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!
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.
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”.
It’s really trying to get a scrollbar working but when you’re at under800px screen width (e.g. 320px ) The table will be allowed to expand up to 600px. That’s scrollbars that isn’t directly the fault of the table.
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.