Desktop to Mobile Issues

Store Feedback

Topic summary

Mobile banner on the Shopify “Refresh” theme looks correct on desktop but breaks on mobile: large white space above the next section and missing slideshow CTA/text. OP couldn’t upload images but shared the live site for review.

Proposed fix (Theme option + CSS): One contributor notes mobile can show text either over the image or below it. They provide a screenshot and advise adding a mobile-only CSS block in section-image-banner.css to style heading, text, and button, and adjust button container appearance.

New issue: After disabling the mobile layout button, the mobile text becomes too cramped. OP asks for spacing guidance and leaves changes live for review.

Additional guidance (general CSS + settings): Another contributor suggests adjusting padding/margins in theme customizer, adding @media rules (e.g., reduce slideshow-banner margin-bottom, ensure text container displays), verifying responsive settings, and using browser dev tools to locate conflicting CSS. They also recommend checking slideshow-specific mobile options.

Status: No confirmed resolution yet. Key open item: fix tight text spacing and remaining white space on mobile. A screenshot and CSS snippets are central to the thread.

Summarized with AI on December 25. AI used: gpt-5.
1

I am using Refresh, but the issue is that my desktop banner is perfect, but on mobile it is a mess. Big white space between banner and how it works section. Plus the call to action button and text (header and subheader) that generates with this banner (slideshow) is gone. How can I make the mobile app look like the desktop??

Thanks for your help

2

I am unable to load pics of it, but you can view what I am talking about at the site as it’s live.

Shakennotstirredcocktailclub.com

3

Hello @ShakenCC
In refresh theme you have two options either to keep the text in the image or below the image in mobile view.
If you want the text in image you can do the changes with the help of screen shot.

3.png
3.png1920×919 151 KB

if you want to show the content below the image add this code

Go to online store ---------> themes --------------> actions ------> edit code-------> assets------> section-image-banner.CSS
add this code at the very bottom of your file.

@media screen and (max-width: 768px) {
h2.banner__heading.inline-richtext.h1 {
color: black;
}

.banner__text.rte {
color: black;
}

a.button.button--secondary {
color: white;
background: blueviolet;
}

.banner__buttons {
border: 2px solid #000;
border-radius: 30px;
}
}

If this was helpful, hit the like button and mark the job as completed.
Thanks

4

Hi GTLOfficial,

This was really helpful but now once I disable the button ( Mobily layout button) the text on mobile are really close together. I have left it on the live mobile site so you can see.

I’m assuming there is code to fix this maybe?

Thanks for your help

5

Hi @ShakenCC To resolve the issue with your Shopify store where the mobile view of your desktop banner is not displaying correctly, you can take the following steps. These adjustments will ensure that your banner looks consistent across both desktop and mobile views.

1. Check Theme Customization Settings:

  • Go to your Shopify admin panel.
  • Navigate to Online Store > Themes.
  • Click on Customize for the Refresh theme.
  • Look for settings related to the slideshow/banner and check if there are specific options for mobile display. Adjust the padding and margins to reduce the white space.

2. Use CSS Adjustments:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Locate the CSS file (usually under Assets and named something like theme.scss.liquid).
  • Add custom CSS to adjust the mobile view. For example:

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

.slideshow-banner {

margin-bottom: 0; /* Adjust this value to reduce white space */

}

.slideshow-banner .text-container {

display: block; /* Ensure the text is visible */

}

}

3. Ensure Elements are Responsive:

Check that the elements within your slideshow are set to be responsive. This includes images, text, and buttons. Ensure they scale properly on different screen sizes.

4. Inspect and Debug:

Use your browser’s developer tools to inspect the elements on the mobile view. Right-click on the page and select Inspect. Switch to the mobile view and look for any CSS that might be causing the white space or hiding the text and buttons.

5. Adjust Slideshow Settings:

Sometimes, the slideshow settings within the theme customization might have specific options for text and button display on mobile. Ensure these settings are configured correctly.

Coupon Discount on Cart App

Integrating the “Coupon Discount on Cart” app improves your store’s performance by improving the user experience and encouraging conversions. By displaying available discount coupons directly on the cart page, customers are more likely to complete their purchases. They can easily apply discounts without searching for codes, reducing cart abandonment. The app simplifies the checkout process. When customers see the discounts available, it adds transparency and builds trust, making them feel they are getting the best deal.

Offering discounts can incentivize customers to add more items to their cart to qualify for discounts, thereby increasing the average order value. You can highlight special promotions, seasonal sales, or clearance items, drawing attention to these offers and encouraging purchases. The app provides analytics and tracking features to monitor how the discounts are impacting your sales, allowing you to optimize your strategies accordingly.

By addressing the mobile display issues on your Shopify store, you can improve both the visual appeal and functionality of your store, leading to better customer experiences and increased sales.

Feel free to reach out if you need further assistance!

Regards,

Ina