How to fix overlapping text in mobile testimonial carousel on Dawn theme?

Hi, I currently have testimonials on my Dawn theme homepage. In desktop view, they are a list. However in mobile view, I have set them as a showcase carousel. The only issue is when you slide to the next testimonial, you can still see some working from the previous testimonial. I did reach out to shopify, who’s answer was “it’s marginal” LOL which is besides the point. I do not like the look of it on my homepage. www.healingandher.com Please take a look and let me know if you can help.

Thanks!

@HEALINGANDHER ,

Lol. I am not sure what is their meaning of “it’s marginal” but any way the code below should fix the mobile issue.

@media screen and (max-width: 749px){
#Slider-template--15845152325873__165351012669de39f7 .multicolumn-list__item.slider__slide {
    margin: 0 1rem;
}
}

hi @HEALINGANDHER ,

I checked on your theme and provide a solve for you regarding issue you seeing.
You can go to the Online theme => Customize code => assets => base.css and then copy and paste the code below in that file:
@media only screen and (max-width: 749px){

.slider-mobile-gutter .slider.slider–mobile{

scroll-padding-left: auto !important;

}

.slider-mobile-gutter .slider–mobile.grid–peek.grid–1-col-tablet-down .grid__item{

width: 100%;

}

.background-none .slider-mobile-gutter .slider .multicolumn-card__info{

padding-left: 1.5rem;

padding-right: 1.5rem;

}

}

Hope can helpful to you!

Where do I insert this code?
Thank you!

Where do I paste this code?

Thanks!

Oh. @HEALINGANDHER ,

Sorry about that.

  1. Go to your Admin store > Online store > Themes > Click Actions > Edit code

  2. Open the base.css file under your Asset folder.

@media screen and (max-width: 749px){
#Slider-template--15845152325873__165351012669de39f7 .multicolumn-list__item.slider__slide {
    margin: 0 1rem;
}
}
1 Like

Hi, I have just gone through the whole file and I can’t see where I am replacing or entering this code?

In the Edit code view. Find the Asset folder, open the file base.css and add the code

1 Like

Where abouts am I adding it?

Just at the bottom part of the base.css

2 Likes

Thank you! I had added that and it has worked. Can you please tell me how to move the pagination slightly closer to the testimonials, there is quite a large gap between the testimonial and the 1/6 page detail. Also, why when scrolling down my website, can I move the screen from side to side, causing the main page to go off centre?

I followed this video to create custom testimonial section for my shopify store with DAWN theme installed. I just copied the code and it’s done. It work for me.

Amazing video:

https://youtu.be/FM48V-gTTPc

Hi, This is a good video. But the rows of the reviews are like the picture on mobile. i want one review a slide how can i fix this?

The same thing happened to me.

@MRamzan how can we fix it, please?

To fix it. We need to add some CSS code. If possible then please share the store URL. I will send you CSS code to add in your base.css Thanks.

@MRamzan this is the website: https://sandvollpro.com/
password: rtaunt

Ok perfect. Please give me sometime to write code for you. Thanks.