Facts Section on Mobile Looks Odd

Hey,

I’m using Moesia Pro on this website: stphouse.com/dev.

I have a problem with the Facts section: it looks odd on mobile devices (screenshot).

I tried to do this solution but it didn’t help.

How can I set them to be 1 or 2 per line?

Thanks,
Hadas

Hi,

Your services is in 2 columns, but if you want to keep the 2 column on mobile, then it will appear like this, because the text in the first face is 2-3 lines more then the second, so the first fact generates an empty space below it and push the 3rd fact to right and the 4th on a new line, what you can do to fix this, is to make the facts to be 1 column on mobile, so it won’t behave like this on 1 column layout. You can achieve the 1 column layout of the facts widget there with this Custom CSS:

#facts .col-xs-6 {
    width: 100% !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

It works, thanks! Great!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba