[Resolved] CSS to make chanhes on mobile only

Home Forums Support CSS to make chanhes on mobile only

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1053446
    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.

    #1053448
    Leo
    Staff
    Customer Support

    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 🙂

    #1053678
    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?

    #1053712
    David
    Staff
    Customer Support

    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.

    #1053747
    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?

    #1054062
    David
    Staff
    Customer Support

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

    #1054110
    Krystian

    Thank you!

    #1054122
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.