Mobile view issue

[J2402]

Hello,

Hopefully someone can help me out with the following issue. My mobile view is giving an error which I can’t figure out.

I tried using a code and pasted this is the css but that one didn’t work for me so maybe there is someone who can help me out.

[Moeed]

Hey @J2402

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Also, if you can explain your issue in a bit detail then that would be amazing. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[J2402]

Fiorenze.nl

Password: Fiorenze24

[J2402]

Hey,

Fiorenze.nl

Password: Fiorenze24

The problem is that my first slide doesn’t show as it should when I open de mobile version. I tried several things, but it didn’t help.

[Moeed]

Hey @J2402

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[J2402]

Thanks for the quick reply, but I would like it to be the same as my desktop page

[Moeed]

Hey @J2402

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[J2402]

Thanks! Can there still be 1 slight change?

I’d like to have the text located where it is on the desktop with a smaller text and buy button like this:

Thank you in advance!

[DaisyVo]

Hi @J2402

From what you’ve shared, it looks like your mobile view issue could be tied to either a CSS error or improper code implementation in your theme. I’ll break it down and guide you through a solution.

Steps to Fix the Mobile View Issue:#### 1. Inspect the Mobile View

Open your store in a browser and use developer tools (Ctrl+Shift+I on Windows or Cmd+Option+I on Mac). Switch to mobile view to identify the exact issue. Look for:

• Misaligned elements.
• Overflow issues (content spilling outside the screen).
• Console errors that may indicate CSS or JavaScript problems.

2. Verify Theme Code- Go to Online Store > Themes > Actions > Edit Code.

• Open the theme.css or theme.scss.liquid file where you made the changes.
• If you added custom code, ensure it’s correctly formatted and scoped only to mobile devices. Use a media query like this:

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

/* Your custom mobile-specific styles here */

.your-class {

/* Example: Fix overflow */

overflow: hidden;

}

}

3. Undo and Test Incrementally- If the code you added didn’t work, try removing it and testing your site again. This will confirm if your added CSS caused the issue.

• Reapply changes incrementally, testing each time.

4. Use Built-in Theme Editor Options

If you’re not comfortable coding, try adjusting mobile view directly in the theme editor:

• Go to Customize under your theme and check mobile-specific settings.
• Many themes have mobile-specific layout options (e.g., font sizes, image alignments).

5. Double-Check Images

Based on your shared links, image dimensions or alignment could also cause issues. To fix this:

• Ensure all images are properly optimized for mobile (e.g., smaller file sizes, responsive width using CSS like max-width: 100%;).

Example CSS for Common Mobile Fixes:

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

/* Ensure images fit within mobile screens */

img {

max-width: 100%;

height: auto;

}

/* Prevent horizontal scrolling */

body {

overflow-x: hidden;

}

/* Adjust text sizes */

.mobile-text {

font-size: 16px;

line-height: 1.5;

}

}

6. Clear Cache

Sometimes, changes don’t reflect immediately due to caching. Clear your browser cache or use an incognito window to check updates.

If Issues Persist:

If none of these work, share more details like:

• The specific error message.
• Screenshots of the code you added.
• Theme name (e.g., Debut, Dawn).

I’d love to dive deeper into this with you. If you need any other assistance, feel free to reply and I will try my best to help.

Best regards,
Daisy