Adjusting Header Alignment

  • Resolved readandreitz

    (@readandreitz)


    5 years, 11 months ago

    Hello,

    For each one of my Pages, the header is offset to the left of the block of text. They definitely have different margins, but I wanted to get them to be the same. I have tried to experiment with the bumpers, but I have not had any luck.

    Let me know if you can help.

    Thanks!

    Steve

Viewing 8 replies - 1 through 8 (of 8 total)
  • Tim Burkart

    (@bigmoxy)

    5 years, 11 months ago

    Could you please provide a URL to your website so we may review your site?

    Thread Starter readandreitz

    (@readandreitz)

    5 years, 11 months ago

    Sure!

    Here is the link:

    https://readandreitz.com/about/

    Thread Starter readandreitz

    (@readandreitz)

    5 years, 11 months ago

    As a clarification, it works fine on the mobile site, but the desktop and tablet views are offset.

    Thanks!

    Thread Starter readandreitz

    (@readandreitz)

    5 years, 11 months ago

    Bump.

    @bigmoxy Were you able to take a look the issue?

    I appreciate your time.

    Thanks.

    Steve

    Tim Burkart

    (@bigmoxy)

    5 years, 11 months ago

    Hi Steve,

    I’m sorry for losing track…

    I think your simplest solution is to change the padding for the CSS class entry-header:

    It currently is set to –
    padding: 0 20px;

    I would change it to –
    padding: 0 50px;

    Thread Starter readandreitz

    (@readandreitz)

    5 years, 11 months ago

    Tim,

    Thanks so much for looking at it.

    That fixes it for the website view, but it’ll offset the title 30px for the phone view, as well, which presents that as my new issue.

    Is there a way to do it that would incorporate all of the views?

    Steve

    Tim Burkart

    (@bigmoxy)

    5 years, 11 months ago

    Steve,

    Well, so much for a hasty solution. The best approach is to add a media query to the new CSS. Leave your original CSS as is for the entry-header class. That will support mobile devices first. We will create a new CSS block for desktops only. The code will look like this:

    @media only screen and (min-width: 768px) {
   .entry-header {
      padding: 0 50px;
   }
}
    Thread Starter readandreitz

    (@readandreitz)

    5 years, 11 months ago

    Tim,

    Thank you so much! I got it to work. It took me a bit, but you were exactly right.

    I really appreciate the help.

    Thanks, again.

    Steve

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

The topic ‘Adjusting Header Alignment’ is closed to new replies.