Title: Header, Mobile Version
Last modified: November 14, 2019

---

# Header, Mobile Version

 *  Resolved [ekerm](https://wordpress.org/support/users/ekerm/)
 * (@ekerm)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/)
 * 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/](http://simacosmetics.at/dry-skin/)
 * I tried this code but unfortunately it did not work. [@jarretc](https://wordpress.org/support/users/jarretc/)
 * > [@media](https://wordpress.org/support/users/media/) screen and (max-width:
   > 600px) {
   >  .woocommerce-products-header .module { padding-top: 0px; } }
 * Thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fheader-mobile-version%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Jarret](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12134489)
 * 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](https://wordpress.org/support/users/ekerm/)
 * (@ekerm)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12135821)
 * It works but is there a way to make the whole banner image smaller?
 *  [Jarret](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12135998)
 * By smaller do you mean you want the whole banner image to be visible on mobile
   screens?
 *  Thread Starter [ekerm](https://wordpress.org/support/users/ekerm/)
 * (@ekerm)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12136120)
 * Yes…
 *  [Jarret](https://wordpress.org/support/users/jarretc/)
 * (@jarretc)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12139775)
 * 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](https://wordpress.org/support/users/ekerm/)
 * (@ekerm)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12149753)
 * Thank You

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

The topic ‘Header, Mobile Version’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/shop-isle/1.1.62/screenshot.png)
 * Shop Isle
 * [Support Threads](https://wordpress.org/support/theme/shop-isle/)
 * [Active Topics](https://wordpress.org/support/theme/shop-isle/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/shop-isle/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/shop-isle/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [ekerm](https://wordpress.org/support/users/ekerm/)
 * Last activity: [6 years, 6 months ago](https://wordpress.org/support/topic/header-mobile-version/#post-12149753)
 * Status: resolved