Calling for CSS specialists here, if you know any, please tag. I’m using @Mtt theme and I wanted to make photos on the iPhone go full width instead of having some margin. Any clues how to get there?

@pcora Commenting so I know about this too.

@pcora I’ve looked into full-bleed a few times, only to realize I’d have to rearchitect my theme quite a bit since it’s very hard to “break out” of a container. It may not be feasible (not an expert, and not an expert on this theme).

@pcora Try this.

article img, .e-content img, .p-summary img {
width: 100vw;
height: auto;
border-radius: 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

That will give you full-width images on every browser and device. You could use a media query to target smaller screens. (cc @pratik, @maique, @jsonbecker, @mikehaynes). This works on many themes.

@Mtt thank you!! I will give it a try. But if I want only on small screens, then I need a media query, right?

@pcora Yes, media query required. You could set it for a pretty high max width though.

@maique It’s a simple wrapper you can put around a bit of CSS to make it only apply to certain screen sizes and such.

@maique Your code above is missing a semicolon.

I’ll be at a computer later tonight and can have a look specifically at your site.

@maique Had a second, so had a quick look. Your images have an inline max-width: 100%; applied to them. That will either need to be removed or overridden. If you add max-width: none !important; to the code I sent, it’ll override it.

Removing that line in your posts is ideal, but that could be an insane amount of work depending on how it was originally done. The over-ride works fine.