Centering content between 710px and 909px?

  • Resolved Martin

    (@boozey)


    8 years, 8 months ago

    I’ve been trying for an hour or so to do this but no joy, I’d be grateful for any pointers!

    I have a site in development at https://consciouswebdesign.co.uk/bromley/ with a child theme (although the same happens on the vanilla version of twentysixteen).

    When the screen width drops to 909px (and the sidebar goes to the bottom) the content maintains right hand padding of 23.0769% until the screen width is 710px, below which the padding becomes even and the content is centered.

    There is probably a reason why it has been designed like this, but on a tablet in portrait it looks a bit odd.

    I’ve tried:

    @media screen and (min-device-width: 710px) and (max-device-width: 909px) {
    .entry-header, .entry-summary, .entry-content, .entry-footer, .page-content {
    margin-right: 7.6923%;
    }

    but something (that I can’t identify) overrides it so it doesn’t work.

    Any help would be great.

    Thanks in advance

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Martin

    (@boozey)

    And yes, I did use the second } after the media query in the actual site !

    Hello,

    You need to add !important to margin-right.
    Like this: margin-right: 7.6923% !important;

    Regards.

    Thread Starter Martin

    (@boozey)

    Thanks JovanaV, I tried that but it doesn’t seem to work in Chrome, Safari or Opera – I can only see it working in Firefox.

    !important isn’t necessary in this case. Rather, the issue seems to be that min-device-width and max-device-width aren’t supported in all browsers. Try min-width and max-width instead.

    Thread Starter Martin

    (@boozey)

    Thanks Stephen – I live and learn!

    Thank you both for taking the time to help me out – it’s exactly as I want it now.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Centering content between 710px and 909px?’ is closed to new replies.