Wrong alignment on the mobile view.

Moeezahmad9 · ‎05-21-2024

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?

Huptech-Web · ‎05-21-2024

@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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

niraj_patel · ‎05-21-2024

Hello @Moeezahmad9
Can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]

Moeezahmad9 · ‎05-21-2024

https://www.cleverstorepk.com/

Dan-From-Ryviu · ‎05-21-2024

Hi @Moeezahmad9

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

<style>
@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}
</style>

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>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Moeezahmad9 · ‎05-21-2024

Not working

Dan-From-Ryviu · ‎05-21-2024

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>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSSCommerce-HDL · ‎05-21-2024

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Moeezahmad9 · ‎05-21-2024

@BSSCommerce-HDL It doesn't work

Huptech-Web · ‎05-21-2024

@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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Moeezahmad9 · ‎05-21-2024

Thank you Kaushik! 🙏 let me try

Moeezahmad9 · ‎05-21-2024

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

Huptech-Web · ‎05-21-2024

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Moeezahmad9 · ‎05-21-2024

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.

Huptech-Web · ‎05-22-2024

@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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

EBOOST · ‎05-21-2024

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%;
}

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: [email protected]
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

Wrong alignment on the mobile view.

Wrong alignment on the mobile view.

Community Blog Articles