How change the module position in StoreBox template

Good Day,

I need to do two things:

1. move the whole page up so that there isn't such a big gap between the header module and the top of the browser window.
2. I need to move the main body module position down so that it does not overlap with the header module.

Se attached image.

Please can you help me with this.

Thanks,
Steven

Hi

Please tell me the url of Your website.

Hi there,

It is http://dev.recupeit.co.za

Thanks,
Steven

Hi

To move page up use this css code:

Code: Select all

body { padding-top: 20px; }


To lover content down use this code:

Code: Select all

.gkIsWrapper-gk_storebox { margin-bottom: -100px; }


Worked perfectly! Thanks!

Hi

No problem. Glad I could help

Hi There,

This fix worked for the desktop layout but for tablets and mobile layouts, the main body module is still too high. Can this be changed?

Thanks,
Steven

Just an update, I worked out how to fix this in the mobile and tablet layout. But, when viewing in portrait, it does not work. So, if I view in landscape mode it looks good, but in portrait mode the body module still overlaps with the header module.

Hi

Please add this code to with !important rule so it will override it for all layouts

Code: Select all

.gkIsWrapper-gk_storebox { margin-bottom: 0 !important; }

Hi There,

This worked for all layouts except for when the site is viewed on a mobile phone in portrait mode. Can you advise if its possible to fix this, or if it possible to prevent this module from loading on the mobile layout or load a different module instead of this one on mobiles?

Thanks,
Steven

Hi

My code is working. What You see there is a different problem with images and text not matching 100% responsive requirements. Please try add this code to mobile.css file:

Code: Select all

#gkLogo img {
    max-width: 100%;
}

.gkIsWrapper-gk_storebox figcaption h2 {
    font-size: 12px;
}

.gkIsWrapper-gk_storebox figcaption h1 {
    font-size: 18px;
}