All images full width on post pages in mobile view

[travincult]

I would like all images to be full width on post pages in mobile view.

At the moment I have successfully applied the following CSS rule to get all featured images full width in mobile view:

@media (max-width:768px) {.single .featured-image {width: 112%;max-width:none;position: relative;margin-left: -6%;object-fit:contain}
}

But what is the CSS rule if I want all my images on these single post pages to be full width? (only in mobile view)

An example post page is: https://travelinculture.com/odaiba-statue-of-liberty-tokyo/

 

[scrambler]

All the images I see on that page are full width in both desktop and mobile, so I am not sure what you mean. You will need to be more specific.

[travincult]

The featured image is full viewport width in mobile. The other images from the post are not – I would like them all to be full viewport width.

I don’t think I can attach images to this post. I’ve therefore sent snapshots of it to you by email to illustrate (replying to the email I just received).

[scrambler]

No idea what you mean by Email you dont have my email, and I dont know where the email that is on my profile goes, probably to weaver the administrator…. but not me.

But I understand what you meant.

Just change your rule selector as below in yellow

@media (max-width:768px) {.single .content img {width: 112%;max-width:none;position: relative;margin-left: -6%;object-fit:contain}
}

[travincult]

That was exactly what I was looking for!

Can I make an exception for some images (affiliate link images, icon images etc.)?

[scrambler]

This reply has been accepted as the best answer.

If there will be many exception, it would be better to add a class on the images by editing the content HTML so we can target only the images with that class

If you are inserting the images with a block, check if you have the option to give the images a class.

If not, and if you are familiar with editing HTML, you would switch to HTML in the editor, then either on the image tag or on the div tag of the image container, add your own class like myfullimage to the other classes already present, separated by a space

class=”…… myfullimage”

Then you would use that selector for the rule.

If you add the class on the image tag (img) itself, the rule would become

@media (max-width:768px) {.single .featured-image, .single .myfullimage {width: 112%;max-width:none;position: relative;margin-left: -6%;object-fit:contain}
}

if you put it on the div container tag it would be

@media (max-width:768px) {.single .featured-image, .single .myfullimage img {width: 112%;max-width:none;position: relative;margin-left: -6%;object-fit:contain}
}

If not familiar with editing the HTML of the content, you would have to be specific about what images in that page should not be affected, so we can figure out the best selector to use.

[travincult]

I added the class on the image tag – and it works like a charm! Now I’m able to control all images individually!

Thank you so much @scrambler!

[Author]

Posts