Why is the mobile version of my logo not aligning correctly?

Store Design
1

Hello,

The desktop version of my website has a logo on the right side which works great. However, on the mobile version, the logo is usually centred. However lately, once the page loads, the logo shows up in the centre and a second right after moves a little bit to the right, which makes it not to be aligned.

Can someone help me fix this? Thank you.

My website URL: pullcase.co.uk

2

Hi @BYMRLIMA ,

I understand the issue of misalignment of the logo when it comes to smaller screens. This is due to the number of icons changes on the right hand side that makes the logo move to the left. You can fix the following by adding a padding with the same size of the icon on the left

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (max-width: 950px) {
h1.header__heading {
    padding-left: cal(2 * 4.4rem);
}
}

@media only screen and (max-width: 750px) {
h1.header__heading {
    padding-left: 4.4rem;
}
}
3

Hi @BYMRLIMA

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file

@media screen and (max-width: 767px){

header.header.header–middle-left.page-width.header–has-menu {

grid-template-columns: 1fr 2fr 1fr !important;

}

}

RichardNguyen_0-1665647798685.png
RichardNguyen_0-1665647798685.png194Ă—420 32 KB

Hope that my solution works for you.

Best regards,

Richard | PageFly

4

This solved it. Thank you!

5

This solution also works! Thank you!

6

you are welcome @BYMRLIMA :wink:

7

Hello!

So I just realized the solution works for the home page, but the rest of the website still has the same issue. How can I make it universal for the whole website?