My div currently has the following padding set:
padding: 14px 150px;
I want to change the left/right padding without affecting the top/bottom padding using a media query.
@media screen and (max-width: 700px){
#paddingDiv{
padding: same as before (t/b) change (l/r)
}
}
The solution I came up with is to adjust it like this:
@media screen and (max-width: 700px){
#paddingDiv{
padding-left: 14px;
padding-right: 14px;
}
}
Assuming the default properties for the div are as follows:
#paddingDiv{
height: 200px;
width: 400px;
padding: 14px 150px;
background-color: red;
}
Note: I don't want to alter the top/bottom padding. For instance, this approach is not what I'm looking for:
@media screen and (max-width: 700px){
#paddingDiv{
padding: 14px 14px;
}
}
Note 2: My example showcases matching top/bottom and left/right padding values for clarity, but in reality, they could be different. To reiterate: I only want to modify the left/right padding while maintaining the top/bottom padding.
Is there a way to achieve this elegantly without duplicating the value for top/bottom padding?
Thank you!