Header Logo in Sizing Change

  • Author
    Posts
  • #164259

    ddacoaching
    Member
    Original poster

    Hello,
    I noticed some changes must have come through in how browsers read my site.

    In Safari desktop things look OK, with the logo being properly sized, and looking good when scrolling. On the mobile view the spacing is off with the logo being too far over to the right.

    On Chrome the logo is pushed too far over to the right, and on scroll the spacing doesn’t line up either.

    Any help you could offer? Thanks!

    The blog I need help with is: datadrivenathlete.com

    #164262

    tarasdashkevych
    Theme Author

    Hi Nate,

    By default, the site header section has padding/spacing on the left. Since your logo also has some spacing on the left (https://snipboard.io/oHUBGp.jpg), browser pushes it to the right.

    It is possible to remove left spacing in the site header using this custom CSS:

    
    .site .site-header {
      padding-left: 0;
    }
    

    However, it causes a weird issue in Firefox: https://snipboard.io/95TGO8.jpg

    Chrome and Safari show logo with a side space in mobile views, while Firefox shows logo without a side space in mobile views.

    I would like to help you improve appearance of the logo on your site header but I need you to do the following:

    1) Remove all custom CSS used for the branding/logo section. You can save/backup that custom CSS somewhere on your computer in case you’ll need it in the future.

    2) Remove your current logo, and upload a new logo without any side spacing.

    Let me know when it is done, so I can start working on a new solution (custom CSS) for you site.

    Kind regards,
    Taras

    #164264

    ddacoaching
    Member
    Original poster

    Perfect. I had forgotten I had to build in that spacing on the left previously.

    Cropping it out seems to have fixed the problem alone with scrolling and mobile spacing.

    #164266

    tarasdashkevych
    Theme Author

    Great :) I am happy to hear you were able to resolve the problem by cropping your logo.

    Feel free to open a new thread in this forum if you’ll have any other questions regarding the theme.

    Kind regards,
    Taras

The topic ‘Header Logo in Sizing Change’ is closed to new replies.