Responsive design

HTML & CSS
21

…getting somewhere…

A lot to digest!

Yes, it’s starting to go where I want it, but…

the images are supposed to be the same height as in the live page

I guess I have to give it a fixed height…

Sorry…

22

I apologize for confusing this issue.

Just for the record, this is a working example of where I was going. You’ll have to adjust the paths to the images. I just did a simple “save page as” so the paths are incorrect…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/responsive-design/205035/

-->
    <style type="text/css">

/* .outer is for testing purposes.  It simulates the boundaries of box4 */
.outer {
    max-width:600px;
    margin:0 auto;
}
.adimg {
    text-align:center;
    outline:1px dashed brown;  /* TEST Outline. To Be Deleted */
}
.adimg img {
    border:2px solid #6495ed;
    padding:2px;
}
.conductor {
    display:inline-block;
}
@media screen and (max-width:515px) {
    .conductor {
        padding:0 31.5%;
    }
    .adimg img {
        width:100%;
        max-width:358px;
        height:auto;
    }
}
    </style>
</head>
<body>

<div class="outer">
    <div class="adimg">
        <div class="conductor">
            <img src="images/BusBali5.jpg" alt="buses in Bali" title="Sarbagita airport official" height="262" width="125">
        </div>
        <img src="images/BusBali6.jpg" title="Inside Sarbagita bus" alt="Inside Sarbagita bus" height="262" width="350">
    </div>
</div>

</body>
</html>
23

Hi ronpat, many thanks

My brain is steaming from overheating!

I finally manged to get Paul’s code going, In the morning I will try yours. You have to learn everyday!

problem is, I forget easily…

Thanks again both of you

24

No the height needs to be the correct aspect ratio so you must leave it at height:auto. If you set the max-width to the natural height of the image then the height will automatically be correct. However if you set a fixed height then the height will not be correct when the image scales smaller.

No worries I think qim needs all our help :smile:

25

You can say that again and again!

Now the page doesn’t validate, but I think the solution may be still within my fast diminishing capabilities

Thanks again

26

Sorry but the problems continue on this page.

Now it’s the bottom image that’s blown out of all proportion. I’ve tried my old faithful div img-container, max-width, etc and can’t budge it.

http://pintotours.net/Asia/Indonesia/denpasar.html

27

There is nothing wrong with those other images. The problem is that you have not fixed the images that Paul and I addressed earlier (different approaches). You have not added width:100% so they become the widest objects in the column and do not scale down as the width of the column is reduced. as needed.

28

Hi ronpat

I am referring to the very last image at the bottom of the central column. It is blown out of proportion. Where do I add width:100%? I tried to do it above in .metro, but it did not change anything.

http://pintotours.net/Asia/Indonesia/denpasar.html

I think you are referring to the Media Queries, but my problem starts right at full PC screen size.

The image is 491 px across and #box4 600px, yest ut blows out of the box

EDIT

I’ve added this in the test page, but even it does not help

.metro img{
max-width:491px;
}

I’ve hust realized that I was addressing the wrong image of the two, but even now no success

29 
.metro img {width:100%;height:auto;max-width:491px}
30

Yes, you are right. I keep forgetting to reaload your pages each time I view them. Things change.

31

Hi Paul

I think I’m going to take up gardening, instead!

It does not work but I am getting confused over the actual image I should target (I tried both separately)

<div class="ad">

<a href="images/DPSDepLoungeB.jpg"><b>Press here</b> to see larger map.

<div class="metro">
<img src="images/DPSDepLoungeS.jpg" title="Plan of Bali Airport terminals" alt="Plan of Bali Airport terminals" 
width="1287" height="715" ></a>
</div><!-- close metro -->
</div><!-- close ad -->

In IE11 Properties of the image I see on the page it show the image as being the large one, rather than the smaller…

Is that the problem?

32

SUCCESS!!!???

I think I’ve solved it. (Famous last words…)

Many thanks and apologies.

33

Just for the record (again), I posted some code in post #22 even though it didn’t quite “feel” right. Sure enough, it doesn’t quite work as intended. This is the corrected version in which the size of the image of the conductor scales down at narrow widths. FWIW.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/responsive-design/205035/
qim
Oct 18, 2015, 9:17 AM
-->
    <style type="text/css">
.outer {
    max-width:600px;
    margin:0 auto;
}
.adimg {
    outline:1px dashed brown;  /* TEST Outline. To Be DELETED */
    text-align:center;
    margin:0 20px;   /* if space at edges is desired */
}
.adimg div {
    display:inline-block;
    border:2px solid #6495ed;
    padding:2px;
}
.adimg img {
    display:block;
    width:100%;
    height:auto;
}
@media screen and (max-width:515px) {
    .conductor {margin:0 31.5%;}
}
    </style>
</head>
<body>

<div class="outer">
    <div class="adimg">
        <div class="conductor"><img src="images/BusBali5.jpg" alt="buses in Bali" title="Sarbagita airport official" height="262" width="125"></div>
        <div><img src="images/BusBali6.jpg" alt="Inside Sarbagita bus" title="Inside Sarbagita bus" height="262" width="350"></div>
    </div>
</div>

</body>
</html>
34

Thanks ronpat

35

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