Fancy slideshow text stack on mobile - Dawn pro

C4P

Hi,
I was hoping someone can help with the css code to place the mobile text below the mobile image in fancy slider or sticky media sections?
Alternatively, is there code to upload a suitable mobile image for the image banner or slideshow sections?
Many thanks,
Cathy

alvinkonda

Hi there,

I checked the issue more in-depth, but as I can see, it needs to be handled directly on your store, as it depends on the specific case.

Please let us know your store URL and the 4-digit collaborator code so that we can send you a partner request to access the theme. You may use our contact us page or the live chat feature to provide your details.

Additionally, as you mentioned, you may try the default Slideshow section that is available on the Dawn theme. It has that kind of logic that you require. Also, adding a Richtext section below the slideshow and hiding it on desktop could be a solution too.

Let me know

alvinkonda

Hi,

As I can see on your store, the default slideshow you are using is working exactly like that. The content on the desktop is within the image, and on mobile is shown below.

Let me know if there is anything specific that you need to adjust.

C4P

Hi Alvin, we are not using a slide show but we would like to use a slideshow that has the same functionality.

alvinkonda

HI there,

Unfortunately, with a slideshow, it's not possible to have the captions below the images since the whole slide has to move, including the text below. Maybe you can publish the Fancy Slideshow section, and we can help you to hide the captions on mobile, and you may use a RichText section below to show your text, which of course we have to hide for desktops.

But either way, the best logic would be to just show the captions within the slideshow, like we have on our demo.

Let me know.

C4P

Hi Alvin,
This sounds like a plan. I have published the "fancy slider" section. However, is it possible to also align the text on the desktop view much further to the left as in the image below where we previously used the "image banner" section with css to have the below effect:

I couldnt align the buttons and the text properly.

On mobile view we need the text below the image please. Unfortunately, the opacity is being applied to both desktop and mobile views and its too dark.
Thanks for your help. We really would like to use a slider to add a few more slides.
Many thanks,
Cathy

alvinkonda

HI Cathy,

I changed the text-align setting from center to left, and it seems the position is better, however, it can't be too much on the left as it needs to be on the container line. Here is how it looks at my end.

Additionally, I changed a bit the Image overlay opacity setting to 30% so the image looks a bit darker and the text is more readable, especially this can help on mobile.

Regarding the option to put the caption below the image on mobile, as I said, that unfortunately is not possible in the slider logic, as the text must be absolutely positioned within the image. The only solution that we can have is to hide it completely on mobile, but if the overlay opacity adjustments are made, the text can be much more readable on mobile.

Let me know.

C4P

Hi Alvin,
Unfortunately the overlay is too dark. Can you please help us to remove the text on mobile
and then add a rich text layer as you suggest below? It would be much appreciated.
We will try to widen the container so that we can utilise the room we have on the left.
Many thanks,
Cathy

alvinkonda

Hi Cathy,

I adjusted as you requested, I added a Rich Text section below the slider, and it's showing up only on mobile. Also, the slider captions are hidden on mobile now.

Your container width is fine, I don't think it is necessary to increase it.

Let me know if further changes are needed.

C4P

Thank you so much Alvin. That looks really great. 🙂