[Resolved] CSS to make chanhes on mobile only

[Krystian]

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 😀

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.

[Leo]

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 🙂

[Krystian]

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?

[David]

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.

[Krystian]

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?

[David]

% 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.

[Krystian]

Thank you!

[David]

You’re welcome

[Author]

Posts