Sidebar Widths, Content Width and Padding in-between

  • DannoIE

    (@dannoie)


    11 years, 5 months ago

    Hi Everyone,

    I am trying to get my site layout to the way I want. I have two images to graphically represent what I would like to do – is there any CSS I could add to achieve my aims?

    The website is http://www.sobrienmarblestone.ie

    Problem 1 is the default page template: http://www.sobrienmarblestone.ie/wp-content/uploads/2014/12/sob-help-1.jpg
    I would like the left sidebar to be 240px, then a 15px padding before the text/content which would take up remaining space after a 15px padding either side of a 300px right sidebar.

    and

    Problem 2 is on the full-width page template: http://www.sobrienmarblestone.ie/wp-content/uploads/2014/12/sob-help-2.jpg
    I would like once more for the left sidebar to remain at 240px, then a 15px padding before and after the text/content which would take up remaining space.

    The CSS that is already added is…

    .site {
margin: 0 auto;
}
.entry-content, .entry-summary, .page-content, .nav-links, .comment-content, .widget {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: normal;
}

    …which centres the whole site and stops text falling into the next line hyphenated.

    Please help!

    Many Thanks,
    Daniel.
    Ireland.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    And on mobile?

    Thread Starter DannoIE

    (@dannoie)

    11 years, 5 months ago

    The site is fine on a mobile (Sansung S4) and I wouldn’t like to change that layout!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin

    Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

    Alternatively use your Child Theme style.css file to hold your CSS modifications:

    Problem 1 

    @media screen and (min-width: 1050px) {

    .page-template-default .site:before {
        width: 240px;
    }

    .page-template-default .site-content,
    .page-template-default .site-main .widecolumn {
        margin: 0 300px 0 240px;
    }

    #secondary {
        width: 180px;
    }

    .page-template-default .content-sidebar {
        padding: 72px 15px 40px;
        width: 300px;
    }

    .page-template-default .site-content .entry-header,
    .page-template-default .site-content .entry-content,
    .page-template-default .site-content .entry-summary,
    .page-template-default .site-content .entry-meta,
    .page-template-default .page-content,
    .page-template-default .hentry {
        max-width: none;
        margin: 0;
    }

    .page-template-default .archive-header,
    .page-template-default .comments-area,
    .page-template-default .image-navigation,
    .page-template-default .page-header,
    .page-template-default .page-content,
    .page-template-default .post-navigation,
    .page-template-default .site-content .entry-header,
    .page-template-default .site-content .entry-content,
    .page-template-default .site-content .entry-summary,
    .page-template-default .site-content footer.entry-meta {
        padding: 0 15px;
    }

}
    Thread Starter DannoIE

    (@dannoie)

    11 years, 5 months ago

    Hi Andrew,

    Many thanks, the homepage looks brilliant now!!! And it is the same on mobile too as before!

    Any ideas for full-width pages? http://www.sobrienmarblestone.ie/celtic-crosses/

    Many thanks once again for your help so far.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    By the way I’ve updated the code for problem 1

    Thread Starter DannoIE

    (@dannoie)

    11 years, 5 months ago

    Many thanks Andrew.

    Only one outstanding issue is images within posts fall outside the main content area.

    http://www.sobrienmarblestone.ie/celtic-crosses/

    Many thanks once again for your help so far.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    Clear your browser’s cache

    Thread Starter DannoIE

    (@dannoie)

    11 years, 5 months ago

    I cleared the cache, but the images are still outside the main content area – using Internet Explorer 11 and Google Chrome.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    Did you also revert my updated CSS?

    Thread Starter DannoIE

    (@dannoie)

    11 years, 5 months ago

    Hi Andrew,

    I updated the code.

    The Homepage is fine but the “full width page” http://www.sobrienmarblestone.ie/celtic-crosses reverts back to default including the left sidebar narrowing back from 240px.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    Yes I only addressed problem #1

    Thread Starter DannoIE

    (@dannoie)

    11 years, 5 months ago

    LOL! No worries Andrew, I thought both were solved!!!

    My mistake.
    Apologies.

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

The topic ‘Sidebar Widths, Content Width and Padding in-between’ is closed to new replies.