Layout Help with Genesis Framework

[eze1981]

Guys, please help me out here. My site http://www.startupslove.com

I'd like to change layout as follow:

Website total width should be 1040px

Website layout sizes should be: 500px content | 180px sidebar | 310px sidebar

Please let me know if that makes sense, or if you have any questions.

Thank you in advance!

[AnitaC]

Hello, it's customary to only post an issue once on the forum. I have closed the first one you added about this last night.

Look in your style.css file for the following areas. Responsive design uses percentages. You will need to adjust the percentages to the widths you desire.

To change the content area:

.content-sidebar-sidebar #content, .sidebar-content-sidebar #content, .sidebar-sidebar-content #content {
    width: 56.8104%;
}

To change the sidebar (middle column):

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

To change the sidebar-alt (last column):

#sidebar-alt {
    width: 15.2778%;
}

---

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

[eze1981]

Thank you very much Anitac!

As I wanted to disable the mobile responsiveness, I went ahead and used a fixed width for each one.

Here is what I did. Not sure if is good, but seems to work fine for me. However, please let me know if you see anything wrong with it and I can change it.

 

/* 04b - 1040px CSS Grid ----------- */

#sidebar-alt {
width: 310px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
#header .widget-area {
width: 30.555555555%; /* 352px / 1040px */
}

.content-sidebar-sidebar .sidebar,
.sidebar-content-sidebar .sidebar,
.sidebar-sidebar-content .sidebar {
width: 180px;
}

.content-sidebar-sidebar #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content {
width: 510px;
}

.content-sidebar #content,
.sidebar-content #content,
#title-area {
width: 65.277777777%; /* 752px / 1040px */
}

.content-sidebar-sidebar #content-sidebar-wrap,
.sidebar-content-sidebar #content-sidebar-wrap,
.sidebar-sidebar-content #content-sidebar-wrap {
width: 705px;
}

.content-sidebar #content-sidebar-wrap,
.full-width-content #content,
.full-width-content #content-sidebar-wrap,
.sidebar-content #content-sidebar-wrap {
width: 100%; /* 1040px / 1040px */
}

.footer-widgets-1,
.footer-widgets-2,
.sidebar-content #sidebar,
.sidebar-sidebar-content #sidebar,
#content,
#content-sidebar-wrap,
#footer .gototop,
#sidebar-alt,
#title-area {
float: left;
}

.content-sidebar-sidebar #sidebar-alt,
.footer-widgets-3,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content-sidebar-wrap,
.sidebar-sidebar-content #content,
.sidebar-sidebar-content #content-sidebar-wrap,
#footer .creds,
#header .widget-area {
float: right;
}

 

 

 

Thanks for your help, and I'll be sure to only do 1 posting per topic for the next time 🙂

[Author]

Posts