Hello. I have code for a Flexbox that you all helped me out with in the past that I want to use as a container for my table that Ray.H is helping me out with now.
When I make my browser window smaller to mimic mobile, the table is spilling out of the Flexbox.
I think the problem is that I am using max-width: 60% and so I am wondering what is a better way to code things?
Yes, 60% is the problem.
It is still 60% on smaller screens even when the table can no longer shrink it’s width.
You need it to be 100% of the available width on smaller screens. You don’t have to tell it to do that either, blocks naturally fill 100% of the available width on their own.
What you DO need to do is set your max-width in em, rem, or px. Determine that width according to the the max-width that your layout actually needs.
What screen sizes should I be setting media queries for?
I remember reading that you should not try and create media queries for every sized device as that is impossible. But I’m guessing there are a handful of sizes your website should support, right?
Also, what is the smallest size screen I need to support?
In Firefox’s Developer Tools, under “Responsive Mode”, you can go down to iPhone 5.
If you need to reset the styles on any elements do it based on what your layout requires. Not any predetermined screen sizes or specific devices.
You will need to be able to scroll your table for small screens when the table can no longer shrink. You will need to wrap the table in it’s own scrollable div.
If you want to learn more about scrolling tables see Paul’s codepen demos. Paul O’Brien on Codepen
Here’s the code from your 1st post with the changes I mentioned in this thread.
Run it in your browser and simulate any device under responsive mode.
Along with wrapping a div around the table, I also reduced the side paddings on your page wrapper. They needed to be smaller for mobiles, that could be done with a media query if you want the paddings larger for desktops.
I looked at the sample from PaulO, but didn’t see what was going on… (It’s hard to understand what is happening in the nexted window in that lin.)
What does your “table wrapper” do?
And what does this code do?
.table-wrap {
overflow-y:auto;
}
My latest version seems to behave well at all resolutions except it scrolls right a tad on an iPhone 5 which I think is 325px wide.