Responsive.css file "max-width" settings causing undesired layouts

susanad_123 · August 2015

Curious as to why the max-width for .section_wrapper, .container has been set to a fixed pixel value for all screen sizes below 768px. Please see line 211 of responsive.css:

.section_wrapper, .container, .four.columns { max-width: 260px !important; } (these are very broad and apply to every page!)

There are other examples throughout the responsive stylesheets and the effect is that the content is being limited to a tiny portion of the mobile device's screen. I am having to do a TON of customizing to try to override these settings to a max width of 100% and it's a very time consuming and frustrating process. I can't imagine that this is what your designers intended?

Is there something that I'm missing? A setting in the options panel or an easier way to bulk override...? Any shortcuts would be appreciated!

P.S. it seems to be a bigger problem now that I've updated to 9.2 (I was behind almost 10 versions), not sure if something was changed, but for example an image that spans two-third columns on a desktop used to span full width for responsive and now it has a limited width of 260px.

Not sure if that helps you understand any better.

Thank you,

Susana

Albert · August 2015

Hi Susana,

this line is for mobile devices only. It's not for all devices under 768px. If you will look into another place, you see below css:

/* #Tablet (Portrait) & #Mobile (Landscape)             480 - 767 *
===================================================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px)
{
    #Wrapper      { max-width: 420px;}

 .section_wrapper,
 .container,
 .four.columns     { max-width: 380px !important;}

susanad_123 · August 2015

I'm not sure why in my case the section_wrapper was displaying at 260px as I do see how you are overriding the 260px below, but don't you think even 380px is a bit narrow for a 767 screen? That's about half the screen unused!

I guess the real issue here is that I'd like to suggest offering an option in the theme options panel for boxed layouts to become full screen (un-boxed) at <768. I've managed to customize my own style sheets on this project, but it would be nice if there were a simple option for future uses of your theme.

I really like the theme and I can tell you've really paid attention to detail! Thanks :-)

Albert · August 2015

To be honest, we also have no idea why you had 260px in your case. It's 380px because there is some padding/margin and also some users use external stuff like social stuff, chats, etc on side and that's why there must be a padding on side. But if we'll finish current updates, we'll consider your suggestion.

Thanks!

susanad_123 · August 2015

That's great! Thanks!!

Responsive.css file "max-width" settings causing undesired layouts

Comments