Welcome! To use this support forum, please Login or Join Today!

   

Responsive Teaser not filling container on mobile devices in portrait mode

{name}
Rank

Total Posts: 5

Joined 2016-05-25

PM

 

I having a problem with the Teaser image not filling the container space of most mobile devices when in portrait mode.

Below are links to images of the problem, showing it not working on an iPhone 5, but working fine on an iPhone 6+.

All other mobile devices produce similar results as the iPhone 5.

You can se the development site here http://www.nicolasunderlandtep.co.uk/dev/ and view the issue in Safari’s Responsive design Mode.


Attachments:

https://www.filepicker.io/api/file/3dXMV8uQWumPGwC3SaBT


Attachments:

https://www.filepicker.io/api/file/ihYsPY8HRVqK2sMnL2AX

Thanks

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I’m not able to replicate this locally. It may have something to do with the calculations on the width due to the custom rule you have applied.

If you remove this, does it correct the problem?
If so, perhaps removing the 70% max-width property and change the excess to padding-right?

#teaser .rel {
    text-align: left;
    margin-left: 0;
    /* max-width: 70%; */
    padding-right: 30% !important;
}
{name}
Rank

Total Posts: 5

Joined 2016-05-25

PM

 

Hi Casey

The customs rule only applies to the text, not the image, and removing it has no effect on the images filling the container. See the image attached.

The issue is relating to the style attributes being dynamically applied to the image and its container. This looks to be done in javascript.

Although the stylesheet has the image set to max-width 100% and height to auto, it is not filling the container in portrait mode on mobile devices, other than the iPhone 6+.

As I said before you can view this for yourself using Safari’s Responsive Design Mode, or something like Responsinator, or just look at the dev site on an iPhone 5s in portrait mode.

Thanks


Attachments:

https://www.filepicker.io/api/file/A0T5fS2GQrKV0rRPDXLa

{name}
Rank

Total Posts: 5

Joined 2016-05-25

PM

 

Hi Casey,

Can you get back to me regarding this issue.

Thanks

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi, I’ve pushed up a fix for this in the latest version (1.1).
Can you apply the update and let me know how this works for you?