How to remove a container from Dawn's mobile slideshow?

Store Design
,
1

Hi,

How do I remove the container (on mobile) for the 2nd slide in the slideshow? Thanks

URL: www.sunshinefoodsuk.com

Screenshot 2023-02-16 at 16.37.37.png
Screenshot 2023-02-16 at 16.37.37.png446Ă—742 251 KB

2

To remove the container for the 2nd slide in the slideshow on mobile in the Dawn theme, you can follow these steps:

  1. Go to the “Online Store” section of your Shopify admin dashboard and click on “Themes”. Then, click on “Actions” and select “Edit code” for the Dawn theme.

  2. In the left sidebar, navigate to the “Assets” folder and click on “theme.scss.liquid” to edit the stylesheet.

  3. Scroll to the bottom of the stylesheet and add the following code:

css
@media screen and (max-width: 767px) { .slideshow__slide--2 .section { max-width: none; } }

 

This code targets the second slide in the slideshow on screens with a maximum width of 767 pixels (mobile screens) and removes the max-width property from the container element, effectively removing the container.

  1. Save your changes to the stylesheet.

  2. Preview your website on a mobile device to confirm that the container has been removed from the second slide in the slideshow.

Note that this code will only remove the container for the second slide in the slideshow on mobile devices. If you want to remove the container for other slides or on other screen sizes, you will need to modify the code accordingly.

3

Hi @dan_hoo ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-slideshow.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
.banner--mobile-bottom .slideshow__text.banner__box {
   display: none;
}
}

Hope my answer will help you.

1 Like
4

@mics There is no “theme.scss.liquid” for Dawn

5

@PageFly-Kate , this removes the container all slides on mobile. I just want to remove the container on mobile for the second slide

6

The code you provided should work to hide the banner text box on mobile screens that have a maximum width of 749 pixels in the Dawn theme.

However, please note that the specific max-width value of 749 pixels might not work well on all mobile devices. like the latest iPhones and Samsung Devices,Some mobile devices have a larger screen size and resolution than others, so the exact value that works best may vary. It’s also possible that the value may need to be adjusted in the future if the theme is updated or if the website design changes.

A more robust solution might be to use CSS breakpoints based on the actual width of the banner text box element, rather than a fixed pixel value. For example, you could use a media query like this:

css
@media screen and (max-width: 749px) { .banner__box { display: none; } }

 

This code would hide the banner text box on screens where the width of the box is greater than the available screen width (i.e., when the text box is overflowing the screen). This would be a more flexible solution that is less likely to break in the future.

In general, it’s always a good idea to test any code changes thoroughly on a variety of devices and screen sizes to ensure that they work as expected.

7

it maybe different for each theme you can type “CSS” in the search section and it will show you all the CSS files look for main CSS like theme or style or base and try adding code there . if this does not work contact me in PM with Store URL and issue

8

@dan_hoo , I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.