Mobile Slide Show - Spacing

Store Design
,
1

Hi there,

When I started my website : https://nobaanimal.com/ (Theme Impact)

I came here to get help modify my slideshow on my main page (For mobile).

I needed to have more space so the button, title and subtitle goes under the slideshow pictures.

My new problem now, is that I’m trying a new style of images and would only need to have the button goes under the slideshow image (on mobile).

IMG_0801_modified.jpg
IMG_0801_modified.jpg1179×1983 146 KB

IMG_0800_Midified.jpg
IMG_0800_Midified.jpg1179×1997 214 KB

I fade my image on mobile to white so It blend with the site background.

As you can see I now have a massive space on mobile, i’m not the best to play on .liquid, is there something I could delete from the previous code, or add to get that gap fixed?

Thanks for the help!

1 Like
2

Hi @GabrielNoba

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.slideshow__slide .content-over-media > div {
   bottom: 8% !important;
}
}

image (2).png
image (2).png1448×813 245 KB

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

1 Like
3

Hi @GabrielNoba

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
section#shopify-section-template--16421253939311__slideshow .content-over-media {
        padding-bottom: 10vh !important;
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!