[catwingz]

Hi,
What is the CSS to make the right sidebar about 1/3 narrower and the content area correspondingly wider?

thank you

[Mahesh]

@catwingz: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

.two-columns #primary {
    width: 900px;
}

.two-columns #secondary {
    width: 250px;
}
  
@media screen and (max-width: 1280px) {
    .two-columns #primary {
        width: 840px;
    }
}

@media screen and (max-width: 1152px) {
    .two-columns #primary {
        width: 780px;
    }
}

@media screen and (max-width: 1100px) {
    .two-columns #primary {
        width: 700px;
    }
}
  
@media screen and (max-width: 1000px) {
    .two-columns #primary {
        width: 640px;
    }
}
  
@media screen and (max-width: 940px) {
    .two-columns #primary {
        width: 530px;
    }
  
    .two-columns #secondary {
        width: 200px;
    }
}

@media screen and (max-width: 782px) {
    .two-columns #primary {
        width: 100%;
    }
  .two-columns #secondary {
        width: 620px;
    }
}

@media screen and (max-width: 640px) {
    .two-columns #secondary {
        width: 520px;
    }
}

@media screen and (max-width: 568px) {
    .two-columns #secondary {
        width: 560px;
    }
}

@media screen and (max-width: 480px) {
    .two-columns #secondary {
        width: 100%;
    }
}

Regards,
Mahesh

[catwingz]

This is great! I hope this will be exactly what she wanted. Thank you

[Mahesh]

@catwingz: Looking forward for it too. Have a nice day! 🙂

Regards,
Mahesh

[joeh47]

I have the free version of Adventurous and would like to make the content full width so when I have no sidebar on a page the content width is equal to about the space width that would be normally be occupied if side bar were present. If the side bar were enable then the content width would have to return to the original value.

Thanks
Joe

[Mahesh]

@joeh47: The option you are seeking is available in Adventurous Pro. It has No Sidebar (Full width) layout options, the one you want to have plus more other options too. I recommend you to upgrade to Pro.

Regards,
Mahesh

[catwingz]

This is really weird. I posted a follow-up question several weeks ago and now it is gone…
So the public view of the website is much improved, but the view in the post and page editor now has a wide margin on the right side. This is causing problems for my client when she is trying to format her posts and place images, etc. What can be done to remove this and catch the editing experience up with the actual site?
thank you

[Mahesh]

@catwingz: Please post in your site url.

[catwingz]

Site Url

[catwingz]

This is a second attempt. For some reason my posts keep disapearing.

[catwingz]

Integration Massage

[Mahesh]

@catwingz: The problem that you have blank post in above reply is you have put the <a> tag but nothing to display in it. I checked your site but didn’t see any issue, may be I missed it. Can you please tell me in which page is the problem is actually ocurring? (page with problem – url)

Regards,
Mahesh

[catwingz]

As I said, this is a problem with the editing area for posts and pages in the admin, not with the public site. The following are links showing the difference between what the preview of a post looks like in comparison with the view in the editing window. The wide right margin is causing problems with her ability to format posts.

This happened when we made the main content area wider.

Thank you

[Mahesh]

@catwingz: The problem is because the editor’s content width is defined by the theme so that is match the actual content width of the site. You have now customized the theme by increasing the content width through custom CSS. But the width of editor’s content stayed the same and caused the issue. If you would like to do this level of customization. I recommend you to use the child theme. You can find more details on creating child theme HERE then add the CSS to child theme’s style.css
And for the editor’s content width, copy editor-style.css file to your child theme and edit and change line 7 to max-width: 860px;
so it would look like following:

html .mceContentBody {
    max-width: 860px;
}

Hope this helps.

Regards,
Mahesh

[catwingz]

Thanks @Mahesh, that is a huge help. Up until now she hasn’t needed a child theme, but this will make her very happy.

[Mahesh]

@catwingz: Glad to know. Thank you for your appreciation. If you like my support and Catch Flames theme then please support by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-flames?rate=5#postform
Have a nice day!

Regards,
Mahesh

[Author]

Posts