cannot centre content

  • Resolved Helsinki

    (@helsinki)


    12 years, 2 months ago

    Believe it or not, I fixed this once, but changed some css and now nothing I do seems to work.

    I have content on a page at say-write.com/test-page

    The content is not in the centre. I made the class ‘article’ width 990px to allow the content to stay on one line on a normal browser (it’s only three small circles!).

    I fixed this I thought originally by using margin left: auto; margin right: auto; for #ul, but it doesn’t seem to work anymore!! Driving me mad, it is!

    Anyone got any ideas what I’m doing wrong?

Viewing 7 replies - 1 through 7 (of 7 total)
  • CrouchingBruin

    (@crouchingbruin)

    12 years, 2 months ago

    It has something to do with this rule in this media query:

    @media only screen and (min-width: 68.5em) {
   .site-breadcrumbs, .site-footer, .site-header, .site-main {
      width: 60%;
      max-width: 45em;
   }
}

    If you set .site-main’s width to 100% and max-width to none, it seems to be OK.

    Thread Starter Helsinki

    (@helsinki)

    12 years, 2 months ago

    Yep, thanks very much for looking at this CB.

    Actually it works in some versions of the site. Decode is a responsive theme, meaning that it has slightly different page styles depending on the device – the desktop and tablet version works fine, but I notice the ‘phone’ version is out.

    Any thoughts?

    Thread Starter Helsinki

    (@helsinki)

    12 years, 2 months ago

    Okay, I found some kind of workaround – I used the @media and then .site-main. Now the handheld version reverts to showing the UL list without the CSS circles and images, which I could live with. You can see the effect by just narrowing your browser window width.

    But in an ideal world, I would like the handheld version to display the circles one on each line, if space is the problem. Any thoughts Scott or CB?

    Thread Starter Helsinki

    (@helsinki)

    12 years, 2 months ago

    Another problem I’m having (not sure if I put this into another thread) is that the CSS animation works fully on the tablet but not the desktop version. The circle inside is supposed to role in from the right.

    Thread Starter Helsinki

    (@helsinki)

    12 years, 2 months ago

    Well, I kind of fixed the second problem – I just made the sidebar narrower, so that on tablets it doesn’t overlap, and on phones, it’s reverting to just text anyhow.

    Perhaps this is resolved now. I’d still like to understand how the @media is working better, so that if I want to make device specific changes to the theme, I could understand what @media only screen and (min-width: 68.5em) means. Is this latter the ‘tablet’ version, and the ‘only’ tag is to define the desktop and tablet version?

    I’ll leave the topic open a day just to see if I anyone can explain the @media, but the main question is resolved.

    Thread Starter Helsinki

    (@helsinki)

    12 years, 2 months ago

    Okay – this didn’t fix the problem. The issue is that now the styling on the author block is not working properly. Basically, it’s ignoring the author styling that takes away the background colour etc..

    You can see it on the test page:

    say-write.com/test-page

    Thread Starter Helsinki

    (@helsinki)

    12 years, 2 months ago

    Fixed. Had to take the global article styling out of custom css, as couldn’t override with page-specific css, even with !important

    Still I have set the styling globally for .post, and as I only have a handful of static pages, shouldn’t be a problem to add the styling page by page for those.

    Thanks again CrouchingBruin for giving the basic fix.

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

The topic ‘cannot centre content’ is closed to new replies.