Row not mobile responsive

Hello,

I’ve attached a screen shot of my site and the row that reads “our favorite words of inspiration” is not mobile responsive. It’s looks to large. It’s responsive on all other devices but not on my mobile.

My url is https://beachbunnscloset.com

Any help with this is much appreciated.

Also, what is the best way to set the padding between each row for mobile?

Thanks, Robbin

Hi,

You can reduce the font-size of that text on mobiles with this Custom CSS:

@media only screen and (max-width: 480px) {
#panel-50-1-0-1 p {
    font-size: 12px !important;
}
}

Padding to mobile devices only is also the best way to add with @media CSS ( just like I did for the text size change in the above CSS ).

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 add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Thank You Csaba! Yes I do have a child theme and this CSS worked great. I was able to make the font size even a little smaller. :slight_smile:

Also, in regards to the padding sizes in mobile can you give me an example of what I can use. I’m sorry I don’t know CSS. For example I find that there is too much space between certain rows (not all rows) and I would like for it to all look the same or at least be able to control how it looks.

Many thanks!!

Hi,

You can use this CSS for example to modify an element’s padding on mobile:

@media only screen and (max-width: 768px) {
.your-section-class {
    padding: 10px 10px 10px 10px !important;
}
}

Replace .your-section-class with the class of the element which you want to change and modify the padding values.

Kind Regards,
Csaba