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

Home Forums Support why float:none for alignright and alignleft on mobile (in mobile.min.css)?

  • This topic has 3 replies, 2 voices, and was last updated 10 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1071240
    Jonathan

    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.

    #1071262
    David
    Staff
    Customer Support

    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.

    #1071287
    Jonathan

    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.

    #1071290
    David
    Staff
    Customer Support

    Looks great and thanks for sharing your solution.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.