Site Margins throw things off on mobile.

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Hi. My site is www.natehenderson.me. The body has a left margin of 300px which makes up for the side bar that contains the navigation. On the mobile version, the sidebar transforms to a dropdown at the top so the margin doesn't need to be present. How should I fix this so everything isn't super squished to the right on the mobile version?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes

Posted 3 years ago

  • 1
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Nathan
try moving the logo from the side bar to the right, I belive this is causing you the problem.
Peter
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
I want the logo to be on the sidebar where the header is. That is how the site template is made. The logo moves properly on the mobile version. It moves to the top as well.
Photo of Brent

Brent, Official Rep

  • 64 Posts
  • 18 Reply Likes
Hi Nathan,

I took a look at your site. It looks like you are using some custom CSS to adjust the margin of your content area. As you point out, the problem is that this rule is interfering with the mobile view.

You can add the following CSS after your customization if you want to prevent your custom CSS from interfering with the content margin in the responsive view:

@media only screen and (max-width: 736px) {
   div.sidebar-left .content-wrapper {
      margin:0 10% 0 10%;
   }  
}

I hope this helps.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
That worked. Thanks!