Archived topic
CSS to make chanhes on mobile only
7 replies · Started by Krystian on November 4, 2019
Hello yet again.
1. I've changed header top and bottom padding in elements to make it bigger. I'd like to know how can I change header size on mobile only, to be specific decrease its height (on picture linked bellow - left is current state, right is desired result). The changes on picture was made globally of course :D
2.The light blue strip indicated by the arrow.
Could you please provide me with a way (CSS?) to change page background color on mobile only?
Also if that's not a problem, how to change container separating space on mobile only?
Theme is Article.
Picture: https://drive.google.com/open?id=1vVusw8gHCKe3r70-8LkrtpOtlqMYxXNZ
Thank you.
Hi there,
1. Have you tried the top and bottom options with mobile toggle activated?
https://docs.generatepress.com/article/header-element-overview/#padding
2. So that is the body background color set in the customizer. You can use the different body background color on mobile with this CSS:
@media (max-width: 768px) {
body {
background-color: #000000;
}
}Let me know if this helps :)
Thanks!
1. CSS works like a charm :) Is there any difference whether I add second @media at the end of all CSS code, or to incorporate it in existing @media entry? If incorporating in previous @media entry, it doesn't matter where exactly, as long the brackets are accounted for, am I rigt?
2. I did not noticed toggle... works too.
Curiosity question
Element 1 has normal padding top/bottom 200/200, mobile 40/40
Element 2 has normal padding top/bottom 100/100, mobile 40/40
Element 1 has bigger image on mobile than element 2 even though mobile values are the same. It that a feature or a bug?
Hi there,
1. You can not add a @media query inside another @media query. But you can include multiple CSS rules inside one eg.
@media (max-width: 768px) {
body {
background-color: #000000;
}
.my-selector {
background-color: #000000;
}
.my-other-selector {
background-color: #000000;
}
}2. The height of the element is not just affected by the padding but also the height of the content. So if Element 1 has a single line of text it will be shorter then an element with 2 lines of text.
You're right, that was the case.
Last question,
is there any technical difference between padding set in px vs %?
Does padding set in % scale better on different resolutions?
% is responsive so will scale based on the width of container.
If you calculate the aspect ratio of your original image eg. H / W * 100 = ratio% you can use the ratio% for your TOTAL top and bottom padding
e.g 600px / 960x x 100 = 62.5%
This will keep the image 100% responsive for all device sizes.
Of course once you add content to the container this will mess with the height so % would need to be reduced to compensate for that.
Thank you!
You're welcome
