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.

 

[J2402]

Fiorenze.nl

Password: Fiorenze24

[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 </body> tag

<style>
@media screen and (max-width: 767px) {
h2.banner__heading.inline-richtext.h1 {
    color: black !important;
}
.banner--mobile-bottom .slideshow__text.banner__box {
    color: black !important;
}
}
</style>

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.banner__content {
    position: absolute !important;
}
}
</style>

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!

[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]

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.

[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