Feature Image displays at incorrect size on mobile devices

littlegreyboxmatt · Member · Nov 28, 2017 at 2:13 am
Copy link

Add topic to favorites
When I view posts on our site on mobile devices the feature image does not display at the correct size (ie. it does not fill the space left to right of the screen). If I reload the page a few times it does eventually display correctly but always incorrectly on the first load?

The blog I need help with is: (visible only to logged in users)
littlegreyboxmatt · Member · Nov 28, 2017 at 2:19 am
Copy link
I am using the MH Magazine theme.
thesacredpath · Member · Nov 28, 2017 at 6:46 pm
Copy link
Hi there, the featured image, title, metadata and the text content are all within the same div. We can make the images full width, but that will cause the text content also to be full width, so it will be flush up against the left and right borders of the screen/window. That will make it difficult for anyone on a mobile device to read. There needs to be a bit of white space on the left and right or the eye has a hard time moving from the end of one line to the next line. This is the way that MH Magazine is designed.

We can make it a little closer than it is with the following Media Query.
```
@media screen and (max-width: 600px) {
  .wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}
```
See what you think and let me know.
littlegreyboxmatt · Member · Nov 28, 2017 at 11:46 pm
Copy link
Thank you so much for the solution but I think my explanation of the issue seems to be a little off the mark.

When I view any post page on a mobile device the title, metadata and text content are all fine but the feature image displays in a scaled down format (50% constrained) inside the div. If I could attach a screenshot I would.

If you can view any post page on a mobile device you will see what I mean. It starts loading and the feature image shows at 100% and then snaps back to 50%?

Thanks in advance for your help.
thesacredpath · Member · Nov 29, 2017 at 7:51 pm
Copy link
Ah! Digging further I see the issue. Add this to your custom CSS to fix that issue.
```
.mh-mobile .post-thumbnail img {
    width: 100%;
}
```
In testing on my iPhone 6s Plus, it fixes the issue. Let me know how it goes.
littlegreyboxmatt · Member · Nov 29, 2017 at 8:33 pm
Copy link
You are a legend! Thanks so much that is 100% fixed :)
thesacredpath · Member · Dec 1, 2017 at 8:28 pm
Copy link
Ah, thanks, and you are welcome. :)

No items found.