Support » Theme: Shop Isle » Header, Mobile Version

  • Resolved ekerm

    (@ekerm)


    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.
    http://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;
        }
    }
    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?

    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.

    ekerm

    (@ekerm)

    Thank You

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.