Responsive problem at low width

HTML & CSS
1

Hi

usual problems…

In this page when it gets to around 320px the top image (at least) starts to get cut off. Can’t see why.

http://pintotours.net/TEMP/ContinentalZrh.html

Could you help, please?

2

Too many pixel dimensions I’m afraid! The #haeder has fixed height, and the #section1 too. #clock, #title and #mylogo all have combinations of margins paddings and widths in pixels. I’m afraid you need to rethink header as a whole, and use floats or table-cels or flexbox, and percentages for dimensions and spacing.

1 Like
3

but the top image has a 100% width and it responds, but only to around 320px. Why is that? what is stopping it from then on?

4

I guess that’s because the image is part of <div id="content">...</div> and as your div can’t get any smaller, it prevents your image from getting smaller as well.

5

Hi

Thanks but I’m confused…

If Content and #content-inner have fixed widths… of 600px, how come then that they respond all the way down to 320px?

I never understood this responsive design business…

#content{
width:600px;
}

#content-inner {
width: 600px;
overflow: hidden;
}
6

If you want them to have a minimum width of 600px, you could use
min-width: 600px

7

No, I don’t because as you can see I am trying to get the page to respond below 320px.

8

Because a media query overrides that rule, replacing it with max-width: 600px.
In reality, it could just be `max-width: 600px from the start and not need the query override.

9

Hi Sam

I’ve been looking at the fixed widths in th head to see which is preventing the top image from being cut below 320px, but I’ve tried putting one by one the code in media query 400px and nothing works…

10

Hi,

Its your logoimg that’s too wide and thus causes the page to get cut off.

Add this:

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

11

Hi Paul

Thanks…

I’m just going out. I’ll sort it when I get back.

many thanks.

12

Hi Paul

Could’t wait…so I added the code but there is no difference.

What did I do wrong?

EDIT

I had placed the code in the wrong place…

But it still makes no difference.

Sorry…

13

Seems to be working ok for me? Where do you see an issue?

14

Hi Paul

When I shrink the screen the contents start to get cut off on the right, starting with the top image,when you reach 320px. I get the cut off on all browsers (using PCs)

15

have you got a screenshot?

This is what I see.

370×677 51.3 KB

16

384×746 96.4 KB

I get this in all browsers

17

Yes but you;ve changed the width to 303px and the smallest device these days is 320px (very old iphone). Most are wider than that.

No need to cater below 320px these days.

1 Like
18

Have you cleared your cache?

19

It starts cutting off at 320px. I had access to something below 320px, but in any case, it may be a bit academic but I was trying to work out why it stops there. What is stopping it of getting narrower?

20

Yes, I have.

Maybe the clock is too wide…