How to center the text in multicolumn section in mobile view? CRAVE theme

[KanyeWest]

Hello,

My URL is: www.mommallamasweets.com

I’m trying to get help centering the text for the 3 columns at the bottom of my homepage in mobile view. Right now, the sections where it says “Our Story, Our Ingredients, Our Promise” are overlapping. In the first column, you can see the beginning of the next column. In the middle column, you can see both the first and the last column, and for the last column you can see the column before it and it’s too close to the end of the page.

I’d like to center them all in a way where you can’t see the other columns please.

I would greatly appreciate any help!

[Wish-It]

Try this CSS, let me know if it works.

@media screen and (max-width: 749px){
.slider.slider--mobile.contains-content-container .slider__slide {
margin-left: 1.5rem;
}
}

If you want, you can create it as a task on our app and we will be happy to do it for you, the first task is free.

[Ahsan_ANC]

Hi @KanyeWest ,

You can try this code

1. Go to Online Store-> Theme->Edit code
2. Asset-> base.css ->paste the below code at the bottom of the file.

.multicolumn-list__item{
   margin: 0 15px !important;
}

[KanyeWest]

Thank you so much for your response, however, it only worked for the first two slides, and the third one is still shifted to the left. Do you have any code to fix that? I saved it so youu can check it out on the website.

Again, thank you so much. Hopefully you can help me out with that last part!

[KanyeWest]

Hello Ahsan,

Thank you for your response. It only worked on the first two parts, but the third is still messed up. If you have any way to fix that please let me know!

[Ahsan_ANC]

Hi @KanyeWest you have added the code of Wish-It please add my code so I can see that.

[KanyeWest]

Yessir. I have added your code. Kindly check it out now. Sorry about that.

[Ahsan_ANC]

replace previous code with this one

#Slider-template--15298129756260__multicolumn .multicolumn-card__info{
  padding-left:0;
}

#Slider-template--15298129756260__multicolumn .multicolumn-list__item {
    margin: 0 21px!important;
}

[KanyeWest]

Thank you so much but the last slide is still not centered. I left the code so you can check it out if you can.

[Wish-It]

@Ahsan_ANC when making fixes for mobile version always use media tag, or else the desktop version will be affected.

@KanyeWest replace newly added code with this CSS and let us know if it works,

.slider__slide {
    margin: 0px !important;
}

@media screen and (max-width: 749px){
.slider__slide {
    margin: 1.5rem !important;
}
}

[Ahsan_ANC]

@Wish-It thanks for that I really didn’t know that

[KanyeWest]

Thanks for your clarification. I added your code, but the last slide isn’t centered and it’s shifted to the left. How do I center that one?

[Ahsan_ANC]

not the best one but it will work.

add the following code after the previously added code

@media only screen and (max-width: 768px){
#Slide-template--15298129756260__multicolumn-3 {
    margin-right: 25px !important;
}
#Slide-template--15298129756260__multicolumn-3 .multicolumn-card__info{
padding-left: 0 !important;
}
}

[KanyeWest]

I added it but it didn’t change anything. I left it so you can check it out.

[Ahsan_ANC]

i think you have deleted the previous code. Please add that also with the new code.

[KanyeWest]

I did that by accident, but I added it back and it didn’t change anything. Thank you

[Ahsan_ANC]

Add that also

@media only screen and (max-width: 768px){
#Slide-template--15298129756260__multicolumn-3 .multicolumn-card__info{
  padding-left:0 !important;
}
}

[KanyeWest]

Nothing changed still

[Ahsan_ANC]

can you share the screen shot its fine on my side.

[KanyeWest]