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.