Header Logo in Sizing Change
-
Posts
-
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
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,
TarasPerfect. 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.
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.
Premium Theme Support 
