Hi
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.
Hi,
I’m not quite sure what you want the images to scale with as they are smaller than 320px so don’t really need to scale down.
To make them smaller when the page goes to one column you would need to do something like this.
@media screen and (max-width:502px){
#content2 img,#content1 img {
height: auto;
margin: 0 40px;
max-width: 44%;/* adjust to suit */
text-align: center;
}
}
Hi Paul
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.
I am going to try your code and let you know
Thanks
Hi Paul
That code solved the problem with the fist image, but not the second, the advert, even If I reduce the % for max-width 300px.
i introduced this because some phones and my daughter’s iPod Touch 4 needs that max-width to take the page.~
The problem with the advert is that it loses its ability to be centred and the right side disappears beyond the screen
I thought of simply getting rid of the advert by placing it inside a div and in media queries put display:none; but even that I am unable to do…
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.
@media screen and (max-width:502px){
#content2 img,#content1 img {
height: auto;
margin: 0 40px;
max-width: 44%;/* adjust to suit */
text-align: center;
}
#content2 .textcenter{
padding:0;
display:block;
margin:auto;
max-width:80%;
}
}
Of course if you use that textcenter class anywhere else then you may want to create a new class for that image.
Hi Paul
The extra code worked! Many, many thanks.
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.
Let me know if you have any ideas.
Regards
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.
Where would I find that?
From what you say (I haven’t checked for lack of resources) when the page opens ina small device it should open properly. Or not?
It should open correctly as long as the user hasn’t resized the browser or changed text size etc.
You’d need to ask in the JS forum for a start and see if anyone can give you some hints on how to go about it.
I guess I’ll be ready for that in my next life, if I don’t turn up as a grasshopper!
many thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.