Wrong alignment on the mobile view

I am facing an issue with extra space appearing in some dimensions of the mobile view. The desktop version and many mobile versions look fine, but certain mobile devices, like the iPhone SE, show this space on the right-hand side. Can anyone suggest solutions for this problem?

Hello @Moeezahmad9
Can you share store URL?

Hi @Moeezahmad9

Go to Online Store > Themes > Edit code > open theme.liquid file, add this code after , save the file, and check again.


If it don’t work. Please find this line of code in your theme.liquid file, remove it and save file

data-animate-image data-lazy-image data-heading-center data-price-superscript data-button-round>

https://www.cleverstorepk.com/

Not working

Hi @Moeezahmad9 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.skip-to-content-link.button {
    display: none !important;
}

Here is result:

Hope this can help you

Please find this line of code in your theme.liquid file, remove it, and save the file.

data-animate-image data-lazy-image data-heading-center data-price-superscript data-button-round>

@BSSCommerce-HDL It doesn’t work

@Moeezahmad9
please watch this video and make changes as I mention in the video and add the below CSS also
https://www.loom.com/share/3fd196b5920c41b19ae44ad17d0e4515?sid=4a752094-6377-467d-9eb8-e42fc6be7cc3

@media only screen and (max-width: 750px){
.header__icon {
    width: 4.2rem;
}
}

Let me know if you need further assistance.

1 Like

Hi @Moeezahmad9 ,

You should remove some code. Refer the screenshot below

Add code below to the end of base.css

.header__heading-logo {
  max-width: 100%;
}
1 Like

Thank you Kaushik! :folded_hands: let me try

Hey Kaushik, please take a look at this video and let me know if we have a short zoom call regarding this issue.

https://www.loom.com/share/0fb7c35368e34b2e85e669be82388ddb?sid=0abb01e2-cd35-4d15-9594-44a398ac4abf

Hey @Moeezahmad9
look at the video ill fix this issue https://www.loom.com/share/815f51637302403d969b84f6c194a3df?sid=9c73cea4-34f9-41c8-a404-99c52bd1a974
and check the Screen Shot: https://prnt.sc/YFzdbimz94hG

1 Like

Thank you very much for your effort, I am pleased to inform you that all the issues have been resolved. Once again, thank you for your assistance.

@Moeezahmad9 it’s my pleasure, If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

1 Like