Posted 4 months ago #
Hi I am using a responsive site and there is a problem occurring when viewing the site on an iPhone the images in post do now want to re-size. Instead it flows out of the screen to the right.
But when I add a caption to the image it re-sizes with the screen. Does anyone know why and if it is possible to have the same re-sizing on the images without captions?
Posted 4 months ago #
If it's an <img> tag, use the CSS;
max-width: 100%;If it's a background image, use the CSS;
background-size: 100%;
Posted 4 months ago #
Thanks for the reply Andrew. So I added this to the CSS
img {
max-width: 100%;
}It worked but only problem is that it doesn't keep the proportions. It stretches the image.
Posted 4 months ago #
Can you post the webpage with this issue?
Posted 4 months ago #
yeah sorry I forgot that…
http://www.spetakkel.org/
Posted 4 months ago #
Which images are resizing without correct dimensions?
Posted 4 months ago #
All the blog posts… If you check this one out for example
http://www.spetakkel.org/ung-og-lovende-4/
Posted 4 months ago #
What if you add a 100% height to it as well?
Posted 4 months ago #
I tried adding this but there is still no difference…
img {
max-width: 100%;
max-height: 100%;
}
Posted 4 months ago #
What about height: 100%;
img {
max-width: 100%;
height: 100%;
}
Posted 4 months ago #
It re-sizes the Spetakkel logo on top with the right proportions but for some reason it doesn't work on the images in the posts…
Posted 4 months ago #
You probably want to narrow down the selectors then, E.g;
.hentry img {
max-width: 100%;
height: 100%;
}
Posted 4 months ago #
Remember to clear your browser's cache if you want to see instantaneous CSS changes.
Posted 4 months ago #
Yeah I just cleared it.
So now I added this css
.hentry img {
max-width: 100%;
height: 100%;
}It works for the images in the post but the logo on top is not effected by it anymore…
Posted 4 months ago #
Oh I thought you didn't want the logo affected, you can remove that .hentry bit and revert back to just using img .
Posted 4 months ago #
So now I targeted the logo alone using this code as well as the previous code..
#logo img {
max-width: 100%;
}This works exactly as I wanted but I don't know if it is adding more code than necessarily?
Posted 4 months ago #
Don't worry about adding more code than absolutely necessary, as long as you're not duplicating code.
Posted 4 months ago #
Allright sweet! Thanks a lot for the help Andrew :)
Posted 4 months ago #
Or one last question if it is okay…
When I embed videos using <iframe> is there a way of making that responsive/adaptive as well?
Posted 4 months ago #
Depends on the content you put into the iFrame. If it's an advert, then no.
Posted 4 months ago #
No I am thinking about youtube and vimeo videos.
But I just added this and it worked :) Thanks again…
.hentry iframe {
max-width: 100%;
}You must log in to post.
