Problems with responsive design

Mobile
1

Sorry to come back yet again, but this time I’m nearly there…it’s the very last page to be adjusted,

I cannot get the central column of this page to respond when it gets to media queries 800px.

http://pintotours.net/AAA/VVV.html

Thank you

2

You have an image inside #img-container that’s too wide. Something like:

 img{max-width: 100%; height: auto}

might work. Or if you’re sizing images vertically, you can be more specific with:

#img-container img{max-width: 100%; height: auto}
3

Hi OzRamos

Thanks

If I followed you correctly I now have

#middle {
position:relative;
height:auto;
margin-bottom:0;
background-color:#fff;

}

.img-container {
	max-width:100%;
	height:auto;
	padding-top:62.2%;
	position:relative;		
}
.img-container img {
	position:relative;
	top:0;
	left:0;
	max-width:100%;
	height:auto;	
}

and HTML

<div id="middle">
<!--Free image taken from http://www.freeworldmaps.net/printable/index.html-->
<div id="img-container"> <img src="/Pinto/images/Globe10.jpg" alt="Destination travel information" width="615" height="380"> </div>
 
<ul class="countries">
				<li class="c1"><a href="Europe/Spain/Barcelona.html">Barcelona</a></li>
				<li class="c2"><a href="Americas/DomRepublic/StoDomingo.php">Santo Domingo</a></li>
				<li class="c3"><a href="Oceania/Australia/Sydney.html">Sydney</a></li>
				<li class="c4"><a href="Asia/Indonesia/indonesia.php">Jakarta</a></li>
				<li class="c5"><a href="Asia/Indonesia/bali.php">Bali</a></li>
				<li class="c6"><a href="Americas/DomRepublic/Punta.php">Punta Cana</a></li>
				<li class="c9"><a href="Asia/India/India.php">India</a></li>
		</ul>
		
	

</div><!-- close middle -->

but the problem subsists.

I’ve tried deleting the width/height from the actual image but it does not help

4

In the HTML, img-container is an ID.

In the CSS, img-container is a class.

Change the CSS to an ID, as OzRamos’ example shows, and you should be good to go.

5

Oh, oh… that’s embarrassing!

Yes, the responsive design is fixed.

However, something’s gone astray now with the globe going walk-abouts!

I don’t understand: if the ul. countries are position:absolute. how come they moved down withe globe before I changed the class back to id in the css?

Thanks

6

Hi again

I thought that it was the ul. country links that were occupying the space of the globe, but I moved them down and the space is now empty…

What is keping the globe from being in its proper place, like it was before the ID/class mustake was cprrected.

It should be like in http://pintotours.net

7

The ul.countries need to be inside the img-container and then both the image and the ul should be absolutely placed at the top left of that element and their width and height set to 100%.

The padding-top on the image container maintains the aspect ratio of the element and allows you to position the countries on top using percentages (which you will now need to change to match their positions) and also maintains the aspect ratio of the image.

8

Hi Paul

Thanks for coming to the rescue!

I placed the ul.countries insode the im-container and changed the position:relative to absolute in the img-container img{.

That seems to have done it, and I can now get on with the minor changes!

Thank you very much

qim

9

Hi Paul

I hope you’re still around…

At around @920 the globe moves out of centre and does not get back into position until @800. But there is no media queries at @920…

What’s causing that, please?

Maybe it’s the Content,or/and #container at 100% in @1020 ?

10

Try adding width:100% to the img.

e.g.

#img-container img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  width: 100%;
}
11

Magic!!!

Thanks!

12

PLEASE; IGNORE

I had the zoom (Ctrl + -) down and the responsive Design View was taking the smaller image into consideration

Sorry!!!

EARLIER

Now, I’m trying to get rid of #left at @700 with display:none, but it only disappears at around @625 !

Can’t see why.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.