Adjust content width of Blog page

  • Resolved yatiya

    (@yatiya)


    9 years ago

    Hi

    My theme specifies a content width, that is far less than the width of the actual site.

    So, I have overridden that setting in my child theme, by adding this to my custom style sheet:

    .site-main{ width:100%; margin:0; padding:0; float:left;}

    The problem is, I don’t want my Blog page (which is set under settings/reading), to be 100%, I want it at 75% t accommodate the sidebar.

    How do I tell wordpress to set the content width of ONLY the blog page, to 75% please?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Digico Paris

    (@digico-paris)

    hi

    use the simple meta header:

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

    in head

    easy as ABC :p

    Thread Starter yatiya

    (@yatiya)

    Ummm. Maybe for you:) I’m a noob. Do I put that in the header.php?

    innuvo

    (@innuvo)

    If you use an inspector, the page will be given an id. for example, it could be “page-id-242”, or maybe “blog” – without you linking to the page I cannot give you the exact code

    If thats the case, use CSS to target just that page. SO it would be

    .page-id-242 .site-main {
width:75%;
margin:0;
padding:0;
float:left;
}

    That way, I have used your code to target the content area for just that page

    Thread Starter yatiya

    (@yatiya)

    Thanks Innuvo. I also thought that’s the way to go. The problem is, WordPress doesn’t seem to assign a page ID to a static Blog Page? How would I identify what that ID is?

    innuvo

    (@innuvo)

    It should do, but if its not, it will have its own page ID for sure. If not, it may be “blog” – do you have a link to the theme? or a link to the blog page?

    Thread Starter yatiya

    (@yatiya)

    Sure, sorry, I should have put it in the original post!

    https://www.entdocatiya.co.za/blog

    Digico Paris

    (@digico-paris)

    The meta i gave was for header.php of main template, it will help any css resolution.

    innuvo

    (@innuvo)

    Ok, it is blog. So, What I’ve done below, is use custom CSS to only target the width on a device over 767 where your site’s break point is. SO, what i’ve done is targetted devices over 767px in width and adjusted the content width and sidebar width. Place this in teh same place as your original CSS you posted in your child theme:

    @media screen and (min-width: 768px) {
.blog .site-main {
  width: 73% !important;
}

.blog #sidebar {
  width: 24% !important;
}
}
    Thread Starter yatiya

    (@yatiya)

    Wow thanks!

    I use SiteOrigin Custom CSS, so I just pasted your code into that.

    I’m learning, so can I ask – How did you decide what the breakpoint is?

    innuvo

    (@innuvo)

    Ok, if you use Firefox it has a “Responsive Design View” – That give you the chance to see the site as it scales down in pixels, therefore allowing you to see where the break points are

    Thread Starter yatiya

    (@yatiya)

    Thank you Digico and Innuvo!

    Digico Paris

    (@digico-paris)

    You can also follow a full grid, aka css grid in boostrap.css from twitter,

    The main pro is it will cut all things in hmtl in a given number of columns you can call from css aka,

    this class = 1/16 of max.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Adjust content width of Blog page’ is closed to new replies.