Margin problem

Mobile
1

Hi
I cannot understand why between @600px and @550 px, margin-right does not obey what I introduced in the head. The styles in the html will be transferred to the css, but i was hoping that this stylesheet would be useful for a series of pages and I am already having problems with the first!

Th page with margin problem is http://pintotours.net/Zork/Calendar.html

It is using the stylesheet of http://pintotours.net/Europe/Spain/TEST.html

help…

2

If you are talking about the 20px margin-right on the table then that is working but because the table cannot get any smaller the margin-right just makes the parent container larger.

Table can only collapse so far and once they reach their limit they stop collapsing smaller.

4

Hi Paul

As I narrow the screen all’s well up to 600px; then, and until 550px, when the #left disappears, the extreme right of the table gets cut.

how can I solve that?

Thanks

5

Hi Paul

I managed to sort out the problems between @600 and @550 but now my big problem is below @400. i would like it work down to@320.

You say there tables have a limit. What is it and how can I alter that limit? Removing, say, the 4th column?

6

The limit is dynamic and just depends on the content in the tables / how many columns. Less content = lower limit.

7

Hu Ryan

Well I solved it, partly!

I deleted the fourth column, but would rather keep it if there is a way. I tried giving a different narrower width to column 4 but it did not work

My current page is at http://pintotours.net/Europe/Spain/holidaysBcn.html

but if you could find some magic to alow me to keep the last column…

It’s easier to see the probelm in the earlier test page http://pintotours.net/Zork/Calendar.html

Thanks

8

Perhaps you can make your table more responsive.

9

Which one do you recommend? I though that what I have now is responsive… up to 400px, anyway!

10

Really it comes down to how you want to display your table.

11

Well, I guess I want to display it as it is now. What do you think is wrong with it, other than I am having problems past @400px?

12

The only problem is the amount of columns/content, as described earlier.
You can wrap the table in a div, set that div to width:100%;overflow-x:auto;, and the table should scroll within it. But that’s sorta the cheap / ugly way to make it “responsive”.

13

Well, that’s me!

Thanks. I’ll try that.

14

hi Ryan

I tried that in http://pintotours.net/Zork/Calendar.html

This time I transferred the css to the stylesheet.

i must have done something wrong because the cheap and ugly way does not work!

15

It’s not all my codes fault. Look here

@media screen and (max-width: 800px) {
#content, #content #box1, #content #box4 {
  clear: both;
  width: auto;
  max-width: 600px;
}
}

It’s really trying to get a scrollbar working but when you’re at under800px screen width (e.g. 320px :wink: ) The table will be allowed to expand up to 600px. That’s scrollbars that isn’t directly the fault of the table.

16

I never said that… your code is usually magical!

Now the problem is that I read your post 3 times and cannot understand it…I got rid of the max-width:600px; if that’s the culprit but nothing changed…

17

You need to set a max-width (probably a new media query) which targets smaller screens and sets a smaller max width.

To be honest it’s REALLY hard ot see what’s all going on in that page (well, more so what a good solution is) because there are so many moving parts. Some parent elements have a flat out max-width:600px which makes it hard to say whether that’ll need to be changed until you get a proper media query in place.

18

Sorry…

I now added this but still the same

 @media screen and (max-width:400px) {

#content, #content #box1, #content #box4{
clear:both;
width:auto;
max-width:400px;
}
}
19

Sorry…

I now added this but still the same

 @media screen and (max-width:400px) {

#content, #content #box1, #content #box4{
clear:both;
width:auto;
max-width:400px;
}
}

is it possible to zoom in the table to say 80%?

20

On that media query, add in padding-right:0; Also remove that 15px left margin from table{}. You also should change that max-width to be 320px;.

21

OK, done as insttructed but note that margin-left is needed at full page,

Nope! Still no good in small screen