Sidebar Widgets not Responsive – New Installation (Metro Pro Theme)

[Gary Designs]

Sidebar Widgets not Responsive. New Installation (Metro Pro Theme)

EXAMPLE > http://bit.ly/16akE0T

--------------------

These are the CSS customizations to get the "full width layout" like I want it. But now the sidebars are not responsive. Any help would be much appreciated. Many thanks!

#sidebar-alt {
width: 15.555555555%;
}

.sidebar-secondary {
float: left;
width: 15.555555555%;
}

.sidebar-primary {
width: 38.356164383%;
}

.content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap {
width: 81.111111111%;
}

.content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-sidebar-content .content {
width: 57.534246575%;
}

http:// http://bit.ly/16akE0T

[AnitaC]

Responsiveness is not an exact science. I see you changed your SITE-CONTAINER to 100% versus the original Metro Demo which is a max-width of 1140px. When you modify your code you need to also make the same adjustments Media Queries at the bottom of your style sheet. Look for this and make your adjustments to the code under there as necessary.

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

---

Need help with customization or troubleshooting? Reach out to me.

[emasai]

If you mean that the sidebars are no longer sliding below the main content when the screen width is reduced it is because you have written css rules for the full width. You now need to write another set of rules to modify these in the media queries to make them fit the width of the smaller screens and slide under by removing the floats.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Author]

Posts