How to correctly center multicolumn content and heading on Dawn theme?

[Eliott_123]

Hi there,

I’m currently using the Dawn theme and I’m encountering some issue with the text alignment of the Multicolumn on Mobile (on Desktop everything is OK).

Indeed, my text is centered but not well, it seems that there is more margin to the left than the right, and at each following column, the text is more and more to the right.

Here is a picture to make it clearer :

Also, I would like to take this opportunity to tell you that I would like to center the Multicolumn Heading.

So, could you please help me to :

1. Center with the right margins the content of the Multicolumn
2. Center the Heading of the Multicolumn

Website : www.getsharky.nl

Product Page : https://www.getsharky.nl/products/sharky-slippers

Password : lauzog

Thanks in advance,

Eliott.

[made4Uo]

Hi @Eliott_123 ,

The code below will fix the text problem as well as the container overflow. You won’t see a piece of image from the previous slider, as shown in your picture.

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.slider--mobile.contains-content-container .slider__slide {
    margin-left: 1.5rem !important;
}

.background-none .slider .multicolumn-card__image-wrapper+.multicolumn-card__info {
   padding-left: 0 !important;
}
}

[Eliott_123]

Hi @made4Uo ,

Thanks a lot for providing your help!

I just tried the code and it’s almost perfect.

Concerning the text, it seems that it’s well centered with the image.

However, concerning the container, it seems that there is an issue, because I don’t have any margin on my last column.

For all the columns, I have the same margin (or padding) on left & right (as image n°1).

But, for the last column, I have 0 margin (or padding) on the right (as image n°2).

Could you please help me to fix that?

Thanks again for your time and your help,

Eliott.

[made4Uo]

Weird. I don’t seem to see that problem. What browser are you using? It is perfect in chrome

[Eliott_123]

Hey, I have the issue on my mobile both under Safari and Chrome

But it’s ok if you don’t have an easy/quick solution, it’s already better like that!

[made4Uo]

Hi @Eliott_123 ,

Can you try opening to a incognito browser, for some reason I don’t see the problem in Chrome

[Eliott_123]

Hey,

Thanks for your reply!

Unfortunately it still doesn’t proper align for the last column even under an incognito tab.

As I said, it’s already better than before so I think we should stick to that, thanks again!

By the way, if you have the time, could you please help me to align the heading of my Multicolumns?

I tried several codes but it never work for the Multicolumn on my product page.

Thanks a lot for your help & time!

Eliott.

[made4Uo]

Hi @Eliott_123 ,

What do you want to do with you heading?

[Eliott_123]

Hey @made4Uo ,

I’m really sorry, didn’t see you replied me!

I just succeed to align the Heading of my Multicolumn! I’ll not disturb you anymore with code ahah.

Thanks again for all your help!
Eliott.

[AdlerAndCoy]

Probably not relevant anymore, but I’ve found your problem. Use the code mentioned in the accepted solution and then within your theme editor, go to Theme Settings → Layout and set your Horizontal and Vertical Spaces to 4px.