Amount of circles changes alignment of other posts

  • Resolved thinkjuliet

    (@thinkjuliet)


    10 years, 7 months ago

    Hi,
    I am trying to build my portfolio with this amazing theme and am almost finished – only one problem to solve!

    As I have 9 posts I want to display 3×3 circles, which works fine after I added this:
    @media screen and (min-width: 1200px) {

    #main {
    width: 60%;
    margin: 0 auto;
    }
    }
    to my Costum CSS Manager. (It is important that it works on the tablet as well.)

    Now the only problem is that this changes the alignment of all the other posts/pages.
    They are not centered anymore but moved to the right.
    I bet it is an easy fix but I can’t seem to find a solution. (Sorry the website is not online yet, hope I’ve described it detailed enough.)

    Thanks a lot in advance!

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you seen the classes that are generated in the <body> element? There, there is a class unique to each page. View the page’s source to find the classes out.

    Thread Starter thinkjuliet

    (@thinkjuliet)

    Thanks for the quick response!

    Ok, e.g. I link to a page – the specific part on that page that is not aligned is called div#primary.content-area (within that is another div#content.site-content that seems to be exactly the same?) – but no matter what I change (margin, width..), it stays on the right.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sorry not sure I understand, did you get the CSS to only apply to the page(s) you want?

    Thread Starter thinkjuliet

    (@thinkjuliet)

    No, that’s the problem, what could I put so it only applies to the first page with the circles? The class of that site (called site-main) is exactly the same as all the others which is why it changes all the others as well.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Did you see the classes in the <body> element?

    Thread Starter thinkjuliet

    (@thinkjuliet)

    Ah, you mean this:
    <body class=”page page-id-19 page-template-default logged-in admin-bar custom-background customize-support”> ?
    Would I have to use those to change it for every other page than the index page?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To apply your CSS to the page with the class of “page-id-19” do this:

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

 .page-id-19 #main {
  width: 60%;
  margin: 0 auto;
 }

}

    Thread Starter thinkjuliet

    (@thinkjuliet)

    You are a star, that works perfectly! Thank you so much!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Amount of circles changes alignment of other posts’ is closed to new replies.

Tags