[Resolved] why float:none for alignright and alignleft on mobile (in mobile.min.css)?

[Maria Cecilia]

I was having trouble with alignment of images on mobile devices and I noticed that in mobile.min.css it has float:none for alignright and alignleft and I’m wondering why this is done. To solve this problem I added rules in the style.css in my child theme to use float:left for alignleft and float:right for alignright (on mobile) and now all the images look correct.

[David]

Hi there,

It’s there because of general mobile design principles is to stack images. This eliminates the risk that very narrow ‘columns’ are created when viewed on smaller devices. Unfortunately not everyone knows about correct image sizing or CSS to adjust for that issue so we find this solution creates less issues then it makes.

[Maria Cecilia]

Here are the custom rules that I added to fix the problems:

@media (max-width: 768px) {
.alignright {
    float: right;
    max-width: 50%;
    margin-left: 10px;
}
.alignleft {
    float: left;
    max-width: 50%;
    margin-right: 10px;
}
}

This avoids the problem of narrow columns when the images are too wide. I think it looks good now.

[David]

Looks great and thanks for sharing your solution.

[Author]

Posts