image clipped on mobile

Resolved joneiseman
(@joneiseman)

2 years, 8 months ago
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)

2 years, 8 months ago

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 🙂
Thread Starter joneiseman
(@joneiseman)

2 years, 8 months ago
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)

2 years, 8 months ago

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?

Thread Starter joneiseman
(@joneiseman)

2 years, 8 months ago

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)

2 years, 8 months ago
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;
}
```
Thread Starter joneiseman
(@joneiseman)

2 years, 8 months ago

Hi Leo,

That fixed the problem.

Thanks,
Jon

Leo
(@leohsiang)

2 years, 8 months ago

No problem 🙂

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

The topic ‘image clipped on mobile’ is closed to new replies.

Views