home page buttons

[merlojh]

On this website https://soluneem.com/ there are three buttons color coral near the bottom of the page in mobile view they stack on top of each other? Can this be fixed so they don’t? John

[scrambler]

Site is in maintenance mode…

[merlojh]

You are right forgot to take it of now you can check John

[scrambler]

You need to add and id to the div containing the 3 columns

<div id="mybuttons">

Then add the rule below to override the CSS that turns it into 2 columns on mobile

#mybuttons .content-3-col {width:33.3%;padding:0 5px;clear:none !important;font-size:80%;}

You can tweak values as you see fit

[merlojh]

Thanks you for the help! John

[merlojh]

This does not work in mobile view buttons look distorted? John

[scrambler]

If you mean they break on two lines, this is because the text is too big to fit the three of them side by side.

You need to reduce the font size on mobile, so you can add a mobile rule to do that

.is-mobile #mybuttons .content-3-col {font-size:80%;}

[merlojh]

I reduced the font size to 50% and it still is not looking good? When I size it on my computer it look fine but on my phone it does not? I have a Samsung. I would have to make it really small to work? John

[scrambler]

I would need to see what it look like, but it does not hurt to try, and you can use a different rule for phones using .is-phone class

[Author]

Posts