Hi there,
I have disabled the banner position on the home page for mobile layouts so that the picture does not display. (Mainly because the text overlay on the picture does not resize - I am emulating the demo). However, I have a remnant margin appearing:
<div id="maincontainerwrap" class="topmargin">
The topmargin in this case is a whopping 464px, leaving a huge white gap. Not sure how to address this since the problem is only on the mobile device.

I have attached a pic for you.



Thanks!

Have a link for the site?

Thanks
Paul

BRILLENEYES.CLOUDAPP.NET

Can you turn css compression/optimisation

Thanks
Paul

Turned on Optimize CSS & JS: no change...

It wouldn't - it needs to be disabled so we can troubleshoot css

If you create a forum thread or ticket with an issue like this we will ask you to disable css or js compression

Cheers
Paul

sorry I should have said off as it was enabled previously

<link rel="stylesheet" href="/t3-assets/css/css-8ee89.css?t=646" type="text/css" />
<link rel="stylesheet" href="/t3-assets/css/css-14129.css?t=690" type="text/css" />

This feature compresses most css files into 1 or 2 two files

oh, OK; they were already - oh; hang on: you are looking at our live site: I'll change the settings....

Taking a stab at it

Try

@media (max-width: 480px)
#maincontainerwrap.topmargin {
margin-top: 0;
}

Cheers
Paul

I put this in custom.css. Did not work. Turned off optimization...

I can't see that code in the custom css file

I can see you have disabled the compression

Cheers
Paul

Are you running any caching?

Hi Paul,
I have been working on my dev system, not the one you were looking at; that's why you didn't
see anything.
You were on the right track: I changed the following in the eco\template.css file, and it did the trick: (Note the extra curly braces around the @media query stmt.... )

#maincontainerwrap.topmargin {
margin-top: 300px;
}
@media (min-width: 600px) and (max-width: 1100px) {
#maincontainerwrap.topmargin {
margin-top: 300px;
}
}

@media (min-width: 0px) and (max-width: 599px) {
#maincontainerwrap.topmargin {
margin-top: 5px;
}
}

Thanks!

Yeah that's a bad habit that kicks in now and again with media queries

Normally at this time of early morning 2am ish

I can't remember if that is a core theme style but if it is you will lose changes made when the style is compiled or when updating the template version

Changes like this need to be added to the custom.css file or to your custom theme/less files

Cheers
Paul

Put this in my custom.css and seems to work fine - thanks! I guess I'm getting my money out of my support fee!

Keep well

You're welcome

Cheers
Paul