Sidebar padding for responsive theme?

  • Resolved stevepringle

    (@stevepringle)


    11 years, 2 months ago

    I have added a custom 1px vertical line border to my sidebar right via CSS by adding some rules to the element “.right”, with 16px of padding-left.

    This looks great at normal window size, but when I scale down to iphone size (where the sidebar goes under the main content), the border shows all down the left side of the page, and the main page text subsequently butts up right against it as there is no padding set:

    https://www.stevepringle.co.uk/about/

    I don’t mind the line going all the way up in this window size, but want the main page text to then have the same padding as the sidebar. I tried adding this in having found the relevant element via google chrome, but this applied it to all window sizes.

    Any suggestions would be greatly appreciated!

    Thanks.

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

  • You could add a media query to just make the border disappear at a certain point. Something like:

    @media only screen and (max-width: 750px) {
.right {
    border-left: medium none;
    text-align: center;
}
}

    Hope that helps!

    Thread Starter stevepringle

    (@stevepringle)

    Thank you…that worked a charm!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sidebar padding for responsive theme?’ is closed to new replies.