Shape 5

When I Enable Responsive Layouts, all modules (menu) that are published to bottom_row3_X appear with a white square over top of them. See attached screenshot.

It appears that .s5_light_modules is applied to module_round_box for some reason when the responsive layout is enabled.

I am not sure why enabling the responsive layout would impact this.

Any assistance would be appreciated.

Hello,

Please post a url.

http://www.betsmartsports.com

Hello,

I don't see anything like that on your site, you also do not have the responsive layout enabled. I will need to see this problem live in order to assist.

Responsive layout is now enabled. Please let me know once you are done reviewing so that I can disable this until we are able to resolve the issue. Thanks in advance.

Hello,

Each of those boxes is a menu module that you have published to the bottom row, they will always be published there whether responsive is enabled or not.

You have some kind of plugin enabled that is modifying css:

http://dol49csaak3y7.cloudfront.net/media/plg_jchoptimize

That will need to be disabled as it is altering core css files. It's manipulating it so much that it's applying this css to those modules:

.s5_light_modules .module_round_box, #s5_component_wrap {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d8d8d8;
    padding: 15px;
}

But those modules are not called inside of "s5_light_modules" anywhere in the source so it should not be applying. They are called inside of "s5_dark_modules" in the source. So either the plugin is causing the issue or something has been modified in elsewhere in the core files. So the first step will be completely disabling that plugin and if you'd made any modifications you'll need to revert them.

Another thing you can do is remove the following from the css above, which should be in template.css, but your plugin is calling a different css file:

    background: #fff none repeat scroll 0 0;
    border: 1px solid #d8d8d8;

I have disabled the use a CDN and the plugin that was performing the CSS minification and compression. You will now notice that s5_light_modules is still applied directly from template.css.

I have edited template.css as shown below, but I prefer to resolve the root issue such that this doesn't cause future issues if s5_light_modules is used as intended.

.s5_light_modules .module_round_box, #s5_component_wrap {
/*
background:#FFFFFF;
padding:15px;
border:solid 1px #D8D8D8;
*/
}

Any additional thoughts? Thanks for your help.

Hello,

The css update you applied above, and appears to be working on your site, is probably the only way to fix this. I have tested locally and this problem does not occur on the default install. Which means there is either another third party extension that is causing the problem or something has been modified.

I am attaching a screenshot of Firebug so you can see what I mean about where the classes are applied. These modules are called inside of "s5_dark_modules" and "s5_light_modules" is there area above them. So I have no idea how the css is even applying to that area, when it's not inside of that class.

The only other thing I can think of is if there's an unclosed element on the page, like a missing </div> tag. That would cause the divs to not close properly as they proceed down the page, but typically you would see a layout issue on the page if that was the case.

Thanks for your assistance. We can close this ticket.