[harish]

Hi,

How to increase the content-area same as content-sidebar please provide the better solution. We want to implement in our website – http://www.aptussolution.com

[Sakin]

@harish: Do you mean “No Sidebar, Full Width” layout as shown in demo page http://catchthemes.com/demo/adventurous/sidebar-layout/no-sidebar-full-width/. This option is only there in Adventurous Pro version. So, you need to upgrade it. For more details about pro version, check our theme instructions page at http://catchthemes.com/theme-instructions/adventurous-pro

[SeekingEscape]

Great themes, and thanks for making them available. They’re beautiful and very functional.

Like the OP, I find that the sidebar width is nearly that of the main/primary area. For example, when the browser window is sized such that #main is 967x, #primary is 530px, and the actual content (excluding margins), div.entry-container is only 470px. 570px is only 58% of the screen width, and #secondary is 360px. #secondary is nearly as big as the “main content” (360 vs. 470).

Is there a way, without breaking the beautiful theme, to reduce the relative size of the #secondary?

I see in the css:

#primary {
	clear: both;
    float: left;
    width: 860px;
}
#secondary {
    float: right;
    width: 360px;	
}

I also saw in change-site-width-without-affecting-responsive-version where you suggested

/* For screen size above 1000px */
@media screen and (min-width: 1001px) {
    .site {
        width: 80%;
    }
    #primary {
        width: 75%;
    }
    #secondary {
        width: 22%;
    }
}

Could something like using percentages for #primary and #secondary help this out, instead of pixels? Or, can I just reduce the #secondary pixels? (I tried, didn’t work.)

My site: SeekingEscape

Thanks!!

[Sakin]

@SeekingEscape: Sorry I don’t get it what you want. It’s better if you have any decided width for your site. If it’s in percentage then you can just write simple css as:

@media screen and (min-width: 981px) {	
    #primary {
        width: 75%;
    }
    #secondary {
        width: 23%;
    }
}

But if you have fixed width in px, then you need to add long responsive css as per the device width.

[SeekingEscape]

You’re right. I apologize for not being clearer in my desired result. Let me see if I can do a better job.

In my personal opinion, I would like the #primary to occupy a larger amount of the screen. It seems like #secondary is fixed at 360px and #primary adjusts to whatever’s left. I am not a graphic designer, nor very knowledgeable about what is good practice for design. Therefore I’m okay with you suggesting something contrary to what I’d like, if it’s not accepted practice.

Desired outcome:

• Not break the theme
• Increase width of the post content to a larger minimum size
• Accomplish this by reducing the size of the sidebar/#secondary
• Possibly reduce the size of the margins/borders/padding
• I don’t have a specific requirement, therefore, I’d like to be able to understand how to perform this so I can play with settings

Specifics, that aren’t set in stone:

• Increase the minimum post width from 470px to maybe closer to 550-600px
• This would allow me to use images larger than 450px
• Decrease the sidebar from 360px to maybe 300px
• Reduce margins/borders/padding to maybe 1/2 to 2/3rds their current size
• Sidebar present above 900-something pixel screen width otherwise place it beneath
• I am open to suggestions on pixel sizes on all the above, if it violates standard design practices.

Thank you!!!

[Sakin]

@SeekingEscape:
1. Your post width is already 860px so what to you mean by increase to 550-600px
2. You sidebar width is actually 360px with 30px padding left and 30px padding right.

So, I am still confused. I think you should just use percentage that I have posted in above.

[SeekingEscape]

1. Your post width is already 860px so what to you mean by increase to 550-600px

No. As I mentioned above:

For example, when the browser window is sized such that #main is 967px, #primary is 530px, and the actual content (excluding margins), div.entry-container is only 470px.

Meaning, if someone is on their desktop browser, with the browser window around 1000px, the blog post width is only 470px. Another example…one of my monitors is 1280×1024. With the Chrome browswer full screen, #main is 1263px, #content-sidebar.container is 1080px with 91+91px padding, #primary is 690px and entry-content is 630px due to the 30+30 padding. So my actual blog post is 630px, which is fine. (And my sidebar is still 360px.)

But, if I was to un-maximize the screen, such that it’s only about 967px, the sidebar remains 360px, and my #primary is shrunk to 530px, leaving only 470px for the blog post after the 30+30 padding.

My goal is to have entry-content no smaller than 550 to 600px, if possible. For a screen size of greater than 1000px, you’d have 600px blog post, 30+30 padding, plus a smaller 300px sidebar, plus 30px margin between.

Right now, with a 1000px screen, the blog-post is 470px, plus 30+30 padding, and the sidebar is 360px (I have already reduced my sidebar padding to 20+20px, so it’s 320 content + 20+20 padding = 360px total). In my opinion, the sidebar is using too much of the screen relative to the blog post.

2. You sidebar width is actually 360px with 30px padding left and 30px padding right.

As mentioned, I’ve reduced my sidebar padding by custom css:

#secondary .widget {
	margin-bottom: 25px;
	padding: 10px 20px 10px;
}

But I would still like the overall sidebar size smaller, such as 260px and 20+20px padding for 300px overall. Maybe this is too small?

I think you should just use percentage that I have posted in above.

I’d prefer to not allow the sidebar to grow above ~300px. I’d prefer to keep it at 300px (260+20+20) and allow the blog post to grow with screen size. If the screen size shrinks below approximately 1000px, (600px + padding + 300px sidebar), the move the sidebar contents below, instead of shrinking the blog post to 470px.

Thank you for your consideration.

[Sakin]

@SeekingEscape: For for that, you need to add in all responsive css. So, here goes the detail css that you need to modify as per your need, just modify width and padding as per your need.

#primary { width: 860px; }
#secondary { width: 360px; }
#content .hentry, #secondary .widget { padding: 30px; }
@media screen and (max-width: 1344px) {
    #primary { width: 770px; }
    #secondary { width: 360px; }
    #content .hentry, #secondary .widget { padding: 30px; }
}
@media screen and (max-width: 1280px) {
    #primary { width: 690px; }
    #secondary { width: 360px; }
    #content .hentry, #secondary .widget { padding: 30px; }
}
@media screen and (max-width: 1152px) {
    #primary { width: 570px; }
    #secondary { width: 360px; }
    #content .hentry, #secondary .widget { padding: 30px; }
}
@media screen and (max-width: 1024px) {
    #primary { width: 530px; }
    #secondary { width: 360px; }
    #content .hentry, #secondary .widget { padding: 30px; }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    #primary { width: 570px; }
    #secondary { width: 360px; }
    #content .hentry, #secondary .widget { padding: 30px; }	
}

[SeekingEscape]

Thank you so much for your help!!!! I’m sorry that it was a much more complex problem, but I very much appreciate your assistance!

[Sakin]

@SeekingEscape: Thanks for your appreciation 🙂

[Author]

Posts