Skip to content
Menu
PINNOPARD
  • Blog
    • Finance & Investments
    • Technology & Trends
    • Health & Fitness
    • Education & Tutorials
  • About
  • Contact Us
PINNOPARD

How To Change CSS Padding Based On Screen Resolution

Posted on July 5, 2020July 6, 2020

Sometimes in your journey of coding as a web developer, you may get to a point where you try to make the padding of an element responsive and adjustable to any screen size. In some scenarios, it is just better to write different lines of code that will function uniquely. For instance, you may be faced with a padding problem of an element like the drop-down arrow of a menu. The padding on the computer screen may be positioned properly, but when viewed on mobile, it is way out of position. One of the best things to do here is create two different properties and use the line ; @media screen and (max-width: ????px) { 

Now, let us look at the following example:

.sub-arrow{
padding-top: 10px;
}

The line above will be associated with a view (screen size) greater than 1023px since this is the maximum width we are going to to use, which is for most computers. The line below will fix the padding for lesser screen sizes like the mobile devices and tablets. You can adjust to any screen size you want by describing the pixel sizes correctly;

@media screen and (max-width: 1023px){
.sub-arrow{
padding-top: 2px;
}

You can see that by just using the line: @media screen and (max-width: 1023px){

We are able to correct the CSS padding in relation to any given screen size.

4 1 vote
Article Rating
Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recent Posts

  • Trading Method for Novice Traders on Binary Options
  • Windows Start Screen Wont Go Away – Solution
  • How To Change CSS Padding Based On Screen Resolution
  • Misunderstanding College Education
  • Bitcoin – Understanding The Basics

Categories

  • Blog
  • Education & Tutorials
  • Finance & Investments
  • Health & Fitness
  • Technology & Trends
  • Uncategorized

Pages

  • About
  • Contact Us
  • Cookies Policy
  • Privacy Policy
  • Terms and Conditions
March 2021
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
293031  
« Oct    
©2021 PINNOPARD