I’m still having problems with images for small devices in my page http://pintotours.net. I’ve tried all the variants of the code that worked for the previous version but without success.
The problem is with the #ffftypcr div (the part that expands). The other expanding divs (especially the #hundredpc) are ok but I can’t reproduce the code for the others, even if the #fiftypcl (AMENDED)is not quite what it should be but is acceptable.
When I scale the expanded text all the way to the media 500px and 300 px the 2 images (one an advert) do not adjust to the size of the screen, at least in my test of narrowing the PC screen.
Can you point me to this image as I didn’t see an advert in the expanding section?
Do you mean the Travel Insurance image in the expanding section? If so then I can’t see that image on the small screen because once again you have set a fixed height on that section which is not tall enough to show all the content. The image and a load of text just goes through the bottom of the viewport and is unreachable. I have mentioned this a number of times now and you can’t keep putting heights on containers that hold fluid text. It just won’t work. I won’t mention it again
If that travel image is the one you are talking about then you can scale it smaller by targetting it directly and removing the silly padding rules you added to it.
The reason you might not see the advert (it happens to me also) is that when I slide leftwards to narrow the screen for some reason once you enter into the media queries the bottom section of the page does not show and I have to refresh to make it appear. I don’t know if this is a coding problem or is simply the result of ending up with a very, very long column due to the amount of text.
This has nothing to do with the media queries as such but the fact that your script is calculating the height of the expanded item at the start and uses that height in its calculations even though in a fluid page that height will change.
When you refresh the page you basically kickstart the script again and it works out the height again which is different this time because the page is narrower.
You need to find a better script that handles window resize or use something simpler like jquery’s slideDown/up and keep the expanding element in the flow of the page rather than overlapping everything as that is very off putting in your page design.