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 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?
@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.
@Mtt Thanks 🙂 I had looked it up already. Waiting for this whole weekend to be done with, and will try that 🙂
@Mtt Tried
@media screen and (max-width: 1290px) {
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; }
}
Strangely the images were showing up left aligned. Hmmm…
@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.
@Mtt Thanks. I was having trouble figuring this out, and thought the glightbox plugin might have something to do with it. When I uninstalled it, your code seems to work. Turning it back on ruined it again.
This last line you sent does the trick, much appreciated. Now I just have to see if I get used to it, I like what you did with images in the theme, so…
