Centering .content with css

  • 4kittenbritches

    (@4kittenbritches)


    9 years, 6 months ago

    Hello!

    I recently changed the width of both my site’s sidebar and content using this css:

    
.sidebar-primary {
	max-width: 200px;
}

.content {
	max-width: 900px;
	width: 100%;
}

    Now, I am having an issue where pages with no sidebar are adjusting all the content to the left or right, rather than being center. Page set-up is to full width content on these pages, but it’s acting like there’s a hidden side-bar.

    I can’t figure out what CSS to add to get it to center again! Or maybe another way change the sidebar width that wouldn’t do this? Any ideas?

    Here is an example: http://www.darcygoedecke.com/about-me/

    Thanks so much!

Viewing 8 replies - 1 through 8 (of 8 total)
  • dhavalvyas

    (@dhavalvyas)

    9 years, 6 months ago

    Can you share the link of your site?

    ThemeSumo

    (@themesumo)

    9 years, 6 months ago

    @dhavalvyas A link was included in the post.

    I looked into this myself but couldn’t figure out how to override the composer styles for you, it had me stumped I’m afraid.

    rudyprime

    (@rudyprime)

    9 years, 6 months ago

    Try setting your .content class with no sidebar to float:none; then add margin:0 auto;
    Is that what your looking for?

    Thread Starter 4kittenbritches

    (@4kittenbritches)

    9 years, 6 months ago

    Thanks rudyprime!

    I tried putting that in as you said but it didn’t work.

    I also tried those settings for .full-width-content, to no avail.

    I’m wondering, did I maybe go about changing the size of my sidebar and content incorrectly the first time? I can’t find a name for “content with a sidebar” to add setting to…

    Thread Starter 4kittenbritches

    (@4kittenbritches)

    9 years, 6 months ago

    I just found this bit of code:

    <div data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid vc_custom_1463334190337 vc_row-has-fill vc_row-o-content-middle vc_row-flex" style="position: relative; left: -430px; box-sizing: border-box; width: 1550px; padding-left: 430px; padding-right: 190px;">

    That padding might make sense on why it’s off center… but I’m not sure how to get at it with CSS.

    Thread Starter 4kittenbritches

    (@4kittenbritches)

    9 years, 6 months ago

    I think I figured it out. Instead of adding the “.content” in the css editor, I edited it in the stylesheet instead. It seems to be working great now!

    I kept the sidebar adjustment in css editor.

    And I also edited the “@media only screen” in the style sheet so it responds correctly on a small screen.

    ThemeSumo

    (@themesumo)

    9 years, 6 months ago

    Great!

    Your custom code will be lost if you update the theme, if you add your code via a Child Theme or a Custom CSS plugin it will be preserved when you update.

    Thread Starter 4kittenbritches

    (@4kittenbritches)

    9 years, 6 months ago

    @themesumo Oh! Good to know! Thank you 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Centering .content with css’ is closed to new replies.