Header, Mobile Version

  • Resolved ekerm

    (@ekerm)


    5 years ago

    Hello,

    I created a shop page with this theme. At the desktop Version works everything great but I’m having trouble to resize the header on mobile site.
    https://simacosmetics.at/dry-skin/

    I tried this code but unfortunately it did not work. @jarretc

    @media screen and (max-width: 600px) {
    .woocommerce-products-header .module {
    padding-top: 0px;
    }
    }

    Thanks

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Jarret

    (@jarretc)

    Hi there! Are you looking for something like this?

    @media screen and (max-width: 600px) {
    .woocommerce-products-header .module {
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .woocommerce-products-header .container {
        padding-top: 130px;
    }
}
    Thread Starter ekerm

    (@ekerm)

    It works but is there a way to make the whole banner image smaller?

    Jarret

    (@jarretc)

    By smaller do you mean you want the whole banner image to be visible on mobile screens?

    Thread Starter ekerm

    (@ekerm)

    Yes…

    Jarret

    (@jarretc)

    You would need to add background-size: contain; into the code block like this

    @media screen and (max-width: 600px) {
    .woocommerce-products-header .module {
        background-size: contain;
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .woocommerce-products-header .container {
        padding-top: 130px;
    }
}

    However, due to the image being so wide, it doesn’t have enough height with that method and the display is off.

    Thread Starter ekerm

    (@ekerm)

    Thank You

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header, Mobile Version’ is closed to new replies.