Support » Theme: GeneratePress » image clipped on mobile

  • Resolved joneiseman

    (@joneiseman)


    When I view the second image in this post on mobile. The image gets clipped. I see the following css in mobile.min.css:

        .alignleft,.alignright{
            float:none;
            display:block;
            margin-left:auto;
            margin-right:auto
        }
    

    If I disable float:none it solves the problem. The problem only occurs for wide images that have the class alignright.

    Any suggestion on solving this problem?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Leo

    (@leohsiang)

    Hi there,

    Is there a specific page where I can see the issue?

    I just viewed the page you link and not seeing the issue.

    Let me know 🙂

    Hi Leo,

    You can see the problem on the staging site. Just replace www (in the url) with staging2 and you’ll see the version that has the problem. In order to fix the problem on the original site, I added the following css in my child theme:

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

    You can see the the result on this at the original url

    Leo

    (@leohsiang)

    I’m looking at the staging site and it looks normal to me:
    https://www.screencast.com/t/Wxh3JllejPr

    When images are set to aligned left or right, it should be 100% on mobile on its own row.

    Am I missing something here?

    I can accept that you want to have images at 100% on mobile (although that’s not my preference). However, there’s still a problem (and you can see the problem in your screencast). The right border of the image is cut off. The image should have a gray border on all four sides, but the border on the right side is not visible.

    Leo

    (@leohsiang)

    Edit your CSS:

    article img {
        border: #666 5px solid;
        margin: 5px;
    }

    to this:

    article img {
        border: #666 5px solid;
        margin: 5px;
        box-sizing: border-box;
    }

    Hi Leo,

    That fixed the problem.

    Thanks,
    Jon

    Leo

    (@leohsiang)

    No problem 🙂

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