Responsive design

HTML & CSS
1

Hi

I’ve got a problem with an image in this page. The right side gets cut off at around 565px and 375px.

responsive design is not my forte, I’m afraid…

Could you help, please?

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

The image is just above where it says Transit Hotels

Please, note that the stylesheet is used by dozens of pages, so I guess I have to wrap the image in anew div

Thanks

2

I’ve just tried it on Chrome and it seems to be responding down to as far as the browser window will go. All of them are doing.

3

Actually, scrub that. The browser window wasn’t letting me get down quite small enough. I tried the built in Responsive Web Design Tester, and at phone sizes, all the images get clipped on the r/h side. Let me see if I can replicate the sizes you mention specifically

4

Your HTML has width & height attributes set for some of the images - effectively making them fixed width. I’m not sure the CSS is able to overrule that.

5

The problem is the adimg and you have not added responsive rules for it. That single image holds the whole page open so nothing in that section will get smaller.

Add this:

.adimg img{width:100%;height:auto}

CSS will always over-ride similar presentational html attributes including width and height attributes wherever set,

6

Today I learned… :blush:

7

Hi chrisofarabia

In fact, I have identical code in http://pintotours.net/Europe/Spain/taxisBcn.html and there it works fine…

Thanks

8

Magic!

Many thanks Paul and chrisofarabia

Wait, wait.

Now the conductor on the page became a giant!

Everything worked nicely before, but I have been making lots of little changes and must have done something wrong with the media queries

9

If you want to make exceptions to the 100% width then you need to add a new class to the image in question and set a width that you want for that image.

e.g. Add a class of conductor to the image.

  .adimg img.conductor {width:150px;height:auto}

Do that for any images that you want special widths on.

Generally you would only add that rule in the media query or set a max-width equal to the images natural size to stop it getting too big.

If you want the image as only one on a line then set it to display:block.

Its good to learn something new :smile:

10

[Like this?

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

> <img src="images/BusBali6.jpg" width="350" height="262" title="Inside Sarbagita bus" alt="Inside Sarbagita bus" >

> </div><!-- close adimg -->

I guess not. Sorry I’m panicking becuase the page is live,

I think I got it!

Thanks

No, I dint!

How do I centre the guy? Tried text-align:center; and margin 0 auto, but no good

PANICK!

In gfact the images should start side by side!

11

Set the page up on a test site, if you can. It’s not hard to fix… just takes a little time.

On the test site, make the HTML look like this:

<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><!-- close adimg -->

CSS and media query considerations to follow…

12

Ok, I got things back to square1. I still can’t understand why in the http://pintotours.net/Europe/Spain/taxisBcn.html the code works, and here it does not. I am referring back to the plan above that get cut on the right with the earlier code. Paul solved it, but causes a problem further down,

I now have a test page http://pintotours.net/TEMP/SIDE/denpasar.html

13

I said add the class to the image not add another div around it.

img.conductor

That means you should have added class=“conductor” to the image tag.

If you want the small images side by side (assuming there is room) then you would set them to display:inline using that unique class otherwise you will change all the other images.

To center inline images you need text-align:center on a block parent of that image. In your case that would be on .img-container or .ad-img. Of course this will affect all images using that class but I guess as the other images are display:block it will not affect anything.

14

My brain has seized!

Now, I think I followed Paul’s instructions with ronpat’s help but the bottom images are all out of proportion

http://pintotours.net/TEMP/SIDE/denpasar.html

I can’t understand why the code works in http://pintotours.net/Europe/Spain/taxisBcn.html and not here!

I tried this also but doesn’t work…

<div class="adimg" class="img.conductor">

<img src="/Asia/Indonesia/images/BusBali5.jpg" width="125" height="262" alt="buses in Bali" title="Sarbagita airport official" >
</div>

<img src="/Asia/Indonesia/images/BusBali6.jpg" width="350" height="262" title="Inside Sarbagita bus" alt="Inside Sarbagita bus" >


</div><!-- close adimg-->
15

Pay attention. What’s this closing div doing ?

16

Hi Paul

Thanks for your patience…

I’ve been trying 1001 things and that has gone. Right now (I will stop!) I have:

<div class="adimg" class="img.conductor">

<div class="img-container"><img src="/Asia/Indonesia/images/BusBali5.jpg" width="125" height="262" alt="buses in Bali" title="Sarbagita airport official" ></div>

<div class="img-container"><img src="/Asia/Indonesia/images/BusBali6.jpg" width="350" height="262" title="Inside Sarbagita bus" alt="Inside Sarbagita bus" ></div>


</div><!-- close adimg-->
17

In that page the natural height of the image is about a third ofg its width (250x99) but in the other page the natural height of the image is twice its widths (125x262). That means that when you scale it the height will always be twice the width in order to maintain its aspect ratio. As I said before just add a max-width of 125px if you don’t want it to scale bigger but still scale smaller when needed.

18

I added it to the code I pasted last and still the same.
the css is

.adimg img{
width:100%;
height:auto
}
  .adimg img.conductor {
max-width:125px;
height:auto;
}

Sorry Paul, but is not possible to address the earlier problem of images being cut on the right without affcting this conductoe and the other image whioch display fine in the current live page?

19

Come on you know what’s wrong with that you’ve been doing this long enough now :smile:

When you another class to something you don’t add another class attribute you just add the class as a space separated list.

e.g.

class=“one two three”

not class="one class=“two”

You still haven’t put the class on the image so you are not going to be able to give it special rules and you also put the class as img.conductor which is css not html.

You don;t need that extra img-container either so do something like this:

<div class="adimg image-block"> 
	<img class="conductor" src="/Asia/Indonesia/images/BusBali5.jpg" width="125" height="262" alt="buses in Bali" title="Sarbagita airport official" > 
	<img class="bus" src="/Asia/Indonesia/images/BusBali6.jpg" width="350" height="262" title="Inside Sarbagita bus" alt="Inside Sarbagita bus" > 
</div>
<!-- close adimg-->

Then:

.image-block{
	text-align:center;	
}
.image-block img{
	display:inline;
	margin:5px;
	width:100%;
	height:auto;
}
img.conductor{max-width:125px}
img.bus{max-width:250px;}

Adjust to suit :slight_smile:

20

I explained that. It doesn’t display: fine its just a small height image. If you tell your conductor to lie down then take an image of him it will be the same :smile: