How can I have the same view that I have with safari for chrome? Because with safari I have a fade while with chrome I have a “scroll”. How do I get the fade out on chrome too?
Dawn theme
Hi @ale127 ,
While Shopify supports most browsers we do normally recommend that you use Google Chrome for the best results.
I’m not sure what the fade/scroll effects are that you’re referring to, I can’t seem to find them in our listed features of the Dawn theme. Do you have a picture or video you could provide to help me better understand?
All of Shopify’s free themes are responsive, meaning that they adapt to the device that they are being viewed on. However, the features are usually the same across all devices, so did you maybe make some code edits to your theme that could account for why you’re getting these two different effects on mobile and web?
I look forward to hearing from you!
look www.nicolaskern.com
And after my website www.filipporagone.com
The first ave a slideshow with fade
The second don t have this fade when you change the slideshow image but only on chrome
Hi @ale127 ,
I checked and the code you added gave me an error:
You just need to turn it off, everything will work fine
1 Like
but if I modify that section of code the slideshow image becomes too big in the desktop view?
I changed that part but nothing has changed
Hi @ale127 ,
Please remove the added code and add the following code:
.slideshow::before, .slideshow .media::before {
padding-bottom: 38.95803% !important;
}
.slideshow .media>img {
width: auto !important;
margin-left: auto !important;
margin-right: auto !important;
right: 0;
}
.slideshow .banner__media {
background: transparent !important;
}
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
1 Like
woow, thank you very much. You re the best
1 Like
sorry, but now there is a grey line that is visible on mobile and desktop under the slideshow and i want delete it, how can i do?
Hi @ale127 ,
Please add the following code:
.slideshow__controls {
border: none !important;
}
Hope it helps!
1 Like
In image banner.css?
Hi @ale127 ,
Go to Assets > section-image-banner.css and paste this at the bottom of the file.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
it did not work
Hi @ale127 ,
I checked and didn’t find the code you added.
You can try adding the code by following instructions: Go to Assets > component-slideshow.css and paste this at the bottom of the file:
.slideshow__controls {
border: none !important;
}
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
1 Like
It did not work
Hi @ale127 ,
I checked and didn’t find the code
Can you send me the screenshot where you added it? I will check it.
1 Like
You are the best
1 Like