Issue with mobile (responsive) column width and ul and ol font sizes

timfurnish · January 2019

On my site http://insideaquestion.com, in mobile view, the columns have a right padding that is pushing the content too far to the left. Inspector just shows an inline element style with:

padding: 20px 20% 0 10px;

Turning it off alleviates the issue, but I cannot find what to target.

Why is this happening and what can I do do change it?

Also, the ol and ul elements are showing up too large in places (on mobile). How do I fix that? I would assume that these elements would obey the same size setting for the sizes determined in the content size of typefaces sizes.

Your help is much appreciated.

-Tim

Pablo · January 2019

Hi,

The problem is with your column item.

You provided the padding to this column and that's make the problem.

https://i.imgur.com/cMGoTKT.png

After disabling it , everything is okay.

if you want to have a space on top, apply the padding on top only or use the placeholder item.

Thanks

timfurnish · January 2019

Ok. Thank you. I removed that padding from those columns: 20px 20% 0 10px

Can you provide insight about my OL and UL elements showing up larger on Mobile? Or Not adapting to Font reduction on mobile?

Suggestions?

timfurnish · January 2019

Never mind: I just removed the CSS styling that I had for lists:

/* TYPOGRAPHY */

ul li {color: #000;font-size: 20px; line-height: 28px;

}

I think maybe it was needed at one point. Did this theme always have the OL and UL follow the same size as the content size? Perhaps something you fixed?

-Tim

Pablo · January 2019

I do not have that power to change something on your website without admin access

To be honest, It shouldn't work like this - I'll test it and if it works as you said - it probably gets fixed soon.
Thanks

Issue with mobile (responsive) column width and ul and ol font sizes

Comments