When Widening Prose, Changing Sidebars & Content Width, One Sidebar Unresponsive

[Scout]

Hello,

I have been working on widening my Prose template to a 1140 px width. This extra space is allowing me to widen my two sidebars and content area. I have selected the sidebar (secondary), content, sidebar (primary) Prose theme layout.

After I have changed the CSS, the mobile responsiveness of the Prose does not appear to work completely. The center content, and sidebar on the far right (primary sidebar) will respond appropriately, but the first sidebar on the far left (secondary sidebar) will not.

If this page was properly responding when being minimized, the third column sidebar (primary) should fall under the center content, and then the first column sidebar (secondary) should fall under the primary sidebar. The proper new mobile responsive vertical alignment would be center content, primary sidebar underneath that, and secondary sidebar on the bottom.

However, with my coding, the secondary sidebar (located on the far left) will not properly fall under the primary sidebar content when the page is being minimized. The secondary sidebar content reacts in a different way, not properly and fully aligning underneath the primary sidebar content (which is below the center content.)

This is the coding I am currently experimenting with:

body {
width: 1140px;
}

#inner {
width: 1085px;
padding: 0 00px;
}

#content-sidebar-wrap {
float: left;
width: 812px;
}

#content {
float: left;
width: 500px;
}

#sidebar-alt{
width: 200px;
float: left;
}

I noticed the sidebar on the left (secondary) loses its proper responsiveness when I include the following specific code:

#content-sidebar-wrap {
float: left;
width: 812px;
}

However, I seem to need that above code to display the proper width for the template, sidebars, and content.

Can anyone give me guidance on CSS code that will allow me to have a 1140 wide template, as well as coding that will allow me to alter the dimensions of my two sidebars and center content, and also maintain the Prose responsiveness?

Thank you for any help you may be able to provide.

[dev]

Maybe try to change your 'width:' CSS statements to percents and see if that help. When you hard-code a pixel width, you basically nullifying responsiveness.

Dev
NewMedia Website Design

[Scout]

Hi Dev,

Thank you for trying to help me out here. I tried substituting the width from px to percentage, but that did not seem to work either. With using percentage, the left secondary sidebar still improperly responds in the same way as I explain above.

As I mentioned above, what is interesting, is that if I remove the below apparently problematic code...

#content-sidebar-wrap {
float: left;
width: 812px;
}

the left secondary sidebar then becomes properly mobile responsive, and that is good. However, other formatting is then thrown off. I need that above code for everything to be visually displayed properly - with the various widths I want for the center content and sidebars.

I was trying to find a different code than the "problematic" one to achieve the formatting I want and maintain the mobile responsiveness too, but the "problematic" code above is the only one that will give me the complete look I want. Again, that "problematic" code leads to improper mobile responsiveness for the left secondary sidebar only - the center content and right primary content are properly mobile responsive, just not that secondary sidebar.

Please let me know any other CSS coding ideas you may have.

Thank you!

[dev]

What is the URL of the site?

[Scout]

This reply has been marked as private.

[PresterJohn]

Could you share the results of this conversation?

[Author]

Posts