Responsive 2 column layout with header and footer
It should be simple, but I'm still so new to CSS.
I'm using 11ty to generate static HTML. I have a CSS file along with it. I'm trying to make a 2-column layout, with header and footer, that looks fine on desktop and mobile. I accept that mobile probably looks different, but I haven't even got the desktop looking right yet.
I've got a codepen here: https://codepen.io/rikrose/pen/yLWJZov
It appears that my table-of-contents section is too narrow, but I have no idea what's controlling that width. In fact, looking at another page, it appears that the width is uncontrolled, and so varies from page to page.
I'm fairly sure I need shorter titles on the sections, but I also need a fixed width, at least on desktop.
What have I cross-threaded, and what do I need to go read to learn how to do it correctly?
76 Replies
First problem I see is you are setting
width: 90%; on your body
I would avoid using body as any type of wrapper with layout styles in general. But def would not limit its width.
Flex will also make its children dense since you are not setting the size its probly shifting based on its siblings content
Personally I'd use grid for this 😉Oh. Oops. That 90% was a hangover from one of the guides I was following.
Okay. Let's see what I can find here.
Also I would not use id="" for styles but class=""
why is that?
Kevin Powell
YouTube
Avoid these 5 beginner CSS mistakes
Check out CSS Demystified 👉 https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=beginnermistakestoavoid
Here are some common mistakes I see beginners make in their CSS, and a big thank you to Geoff Graham with helping me make this list!
My video on the dumb mistakes I keep making: https://youtu.be/GWkMYvoCXyQ
⌚ Time...
Specificity for one but I tend to look at it more semantically too. id="" has specific use cases for function/labeling. I only use it for that logic not styling logic
JS will also make objects for id's so I assume it can have some perf reasons too
hm. I was using it because I felt like it was a singleton on the page.
also don't use tabindex unless you know what you are doiung
How-to: Use the tabindex attribute - The A11Y Project
tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way.
thank you.
Grid with template columns of 1fr 3fr seems to make things better.
don't forget you can also use 0.25fr 1fr or what not
just find its good to remind people you can use 0.00fr values 🤘
I would note that not setting a width still might shift your nav
I would set it maybe with a minmax(20ch, 1fr) or something
Interesting. Why would I use a fractional smallest column, rather than scale everything else from it?
In this case it wouldn't matter
don't live in absolutes, I do what works for when I need it.
hmmm.
for my mind its easer to reason with most the times though
Hmm. I'll bear that in mind.
I agree you should definitely use classes but if for some reason you're not able to add a class and need to target an element with an id, use the attribute selector instead of the high specificity #myContainer. For instance
[id=myContainer]{...}.
Attribute selectors count as the same specificity level as classes. Some people suggest using the :where () selector with #myContainer as :where() has zero specificity but then you may not be able to override the element selector or defaults. I prefer to keep everything at the same level so using classes or attribute selectors instead of id selectors #myContainer {...} or :where(#myContainer){...}.
Just keep it all at the same level. Use classes/attributes for everything above an element sel or use :where() for everything. Even playing field.I like that
I still tend to never style with id's 😂
Thank you.
def attribute selectors though 🔥
I didn't know about ids being overly specific.
Specificity/Hierarchy(cascade) is a must to learn with CSS
I've got a change going in now to switch over to classes.
Yep. Live site working nicely now.
Me neither but in specific situations I'll select by its ID attr if I'm not able to throw a class on it or it would be complicated to use a descendant selector.
But point is OP , don't use ids in your stylesheet eg #myContainer. There are very few hard and fast rules in css but for me personally avoiding id selectors is one hard and fast rule I abide by. The second is avoiding fixed heights 🤣
done, on all accounts.
And now I have had someone else look, I have a new problem with this layout.
It needs to be reactive, and it needs to not be a bad experience on mobile.
I did an embedded svg, which seems.to cause calculation and re rendering when you scroll far enough to get to a not-previously-rendered section on a phone, and the TOC definitely overlaps with the text.
I think I want the TOC to either snap to the top, or to be in a slide-away drawer. One of these options seems to be much, much more achievable to me than the other.
Should I start a new thread for "I want to make this reactive", and one for "I want to improve the experience on mobile"?
I thought I had solved the reactive part, but it doesn't appear to work on my phone, and I'm not sure why - the responsive part isn't working.
I am trying to use: https://matthewjamestaylor.com/2-column-layouts#responsive-2-column-grid
but when using it on https://night-vision-discord.github.io/website/starting-editing/ I'm just getting an overlap and no responsiveness.
Matthew James Taylor
2 Column Layouts (Responsive, Flexbox & CSS Grid)
2 column website layouts in Flexbox, CSS Grid, and Responsive Columns, along with live demos, the HTML, and CSS to make them work.
(i'm sticking with grid, as advised yesterday, but I'm onpen to further advice)
What does reactive mean if not responsive
D'oh. I'm just getting new terms confused.
On my desktop, if I shrink the window, eventually the TOC jumps up to the top as a way to skip to the section that you want.
On my phone, though...
starting here: https://www.youtube.com/watch?v=p3_xN2Zp1TY&t=341s
Kevin Powell
YouTube
Useful & Responsive Layouts, no Media Queries required
Conquering responsive layouts: https://courses.kevinpowell.co/conquering-responsive-layouts
Here’s 5 quick responsive layouts that you can use, without any media queries!
There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation!
🔗 Links
✅ Netflix scroller: https://youtu....
Hm. That's a switch to flexbox, which .. while it feels like a good idea, I'm not sure about.
Since the table of contents is so long I personally would put it off screen to have it slide in and out . As Kpow always says though, you'll want to progressively enhance so that if the javascript fails users can still interact with the site.
What's your hesitation with using flexbox?
And is your codepen updated with the latest code that is resulting in your squished phone view?
I have updated the pen.
What I'm seeing on the phoen doesn't happen on the desktop browser, even with a narrow window - it seems to snap correctly.
Having it in a slide-out seems nicer ... but I'm still new enough to CSS that it's not what I believe I want.
The second thing is that the background does not work well with a phone. It looks right, but the tiling is painful when scrolling down.
My hesitation is mostly because yesterday I was advised to use grid 🙂
I'm not seeing any kind of grid setup or media query that would cause the grid to wrap. Are you sure it's the same code ? What I see on the codepen vs what I see on https://night-vision-discord.github.io/website/starting-editing/ is different.
Oh shoot.
I'm in my kitchen waiting on lunch to cook. I can fix that in a couple of minutes.
You can make the background attachment fixed so it doesn't repeat and just covers the whole viewport where the content scrolls over top of it
No rush at all
It... is there. THere's a rule for
@media screen and (mind-width: 768px) near the end
Are we suffering because the CSS is processed by SCSS into a single line?this codepen you linked in your post has no @media https://codepen.io/rikrose/pen/yLWJZov?editors=1100
uh.. try refreshing? i may have failed to hit save.
aha yup there it is
Are you sure you saved your code correctly on your github repo? The default style for small screens has no grid so therea no reason the table of contents should be in its own column until the screen hits 768px
Bit the styles you had before you saved on codepen where it's default a grid with two columns would explain it. So just double check all your code had been updated to the same thing everywhere
https://github.com/Night-Vision-Discord/website/blob/main/src/static/scss/main.scss#L144 it's there.
GitHub
website/src/static/scss/main.scss at main · Night-Vision-Discord/we...
Generated website builder. Contribute to Night-Vision-Discord/website development by creating an account on GitHub.
And you've given it a few minutes to update the changes ?
It appears to be in the live version. I am not sure if my phoen is ignoring it for some reason, btu clearing the cache seems to have no effect.
and the problem page is on
https://github.com/Night-Vision-Discord/website/starting-editing but https://github.com/Night-Vision-Discord/website/ is behaving correctly?
GitHub
GitHub - Night-Vision-Discord/website: Generated website builder
Generated website builder. Contribute to Night-Vision-Discord/website development by creating an account on GitHub.
It's showing the same issue in both.
which makes sense, since they're usingt he same template and CSS.
ah very strange. the dev tools arent showing me any issues, im wondering if its an issue with the way the scss is being compiled or something.
it's possible. Let me see what removing the scss compile step does, since I'm not making use of anything it provides.
yeah maybe just turn that into a regular css file and see what happens
well... the eleventy passthorugh didn't work for it, so no CSS file..
i am not familiar with what that means, can you just create a CSS file and link to it in your template?
yes, that's what I've just achieved.
As an explanation, eleventy is a processor turning markdown into HTML, and inserting it into a template.
passthrough is a rule for it to pass through certain things, like the CSS and images, without processing them.
we now have the plain .css file, however it's not changing the behaviour on my phone.
I just looked at the source file on my phone and although this shouldn't be an issue, humor me and give it a try. Delete the commented out code underneath the media query that declares .pagecontainer as a grid again. I know it's commented out but see if that changes anything as if the comments aren't recognized that's the only thing that could be overriding it (unless there's some specificity issues between your IDs and classes which I haven't looked at yet )
that change is on the way up.
Initial render has it nicely paginated left and right. A reload makes it overlap weirdly per the previous images. But no snapping to a top/bottom arrangement.
This is so weird
I'm not ruling out that i or my phone are doing something weird.
Something to do with the engine on the android phone, I'll check on iPhone too
but if so, I don't know what I'm doing.
I'm on Android, but I know there's going to be at least one iPhone user.
I am not familiar with eleventy so there may be something with how it or other dependencies work thst I just don't know about
Have you used this same process with other sites you've deployed (eleventy snd your dependencies from this project)?
nope. But it outputs static HTML at the end, which is what we're looking at.
Same two col on iPhone
The same code on codepen works and stacks on a phone though so that’s why I’m wondering if it’s something to do with how the deps compile it or how mobile engine renders. The css looks fine and I don’t see any properties that would need a WebKit prefix to stack it But I haven’t gone through the css with a fine tooth comb. The issue is that it’s rendering a grid on mobile when that grid should only be rendered on screens 768+
That makes sense to me.
Forgot to link the iPhone view
It matches up with the experience. What I'm wondering is how we can figure out what chrome on the phones is making the rendering decisions.
That's .. also not working right.
Nope same two cola
Cols
And that’s safari so it’s not just a chrome issue
i hadn't tested the codepen on my phone ... but it works there.
Yep same here
I am not getting less confused as we discover more about this.
Same. If I were you I may make a new post summarizing this issue (no one is gonna read through this thread ) and see if there are any eleventy experts that may be able to help as I’m about out of tricks
I don't think this is an eleventy problem. It generates static HTML, and that HTML is what's uploaded. The codepen is me doing "view-source" and cut-and-pasting that.
11ty community is super
true , I just don’t see why phones aren’t rendering this html and css correctly. It’s like it’s not reading the media query as a media query
I would ask there
Which makes me wonder what’s in the js
I would, but it's a preprocessor generating static html.
There's no JavaScript on the page.
the output of which is behaving differently on our phones, and when pasted in to codepen.
I will make a new thread, to give people the chance to not go over the whole backlog
I meant the backend as a whole
If the behaviour isn't the same even with identical front end code, I would assume sonethings happening in the backend