Anyone have any idea of how to replicate this grid phone layout?
The layout from this page, when checking it from phone, has a grid that expands when opening the hamburger menu.
https://toweroffantasy.info/
To this blog I'm working on:
https://astro-blog-custom.netlify.app/
Can anyone wrap their head around it to know how to do it? I have been trying, but no luck :(
Here is a GIF of the behavior: https://gyazo.com/e82187a55007c7a125962495c148b9c3
Gyazo
Gyazo
49 Replies
Maybe you should set the main element grid size to window width and translate the side element to -100% and when u need it in view u set it back to 0.
Can anybody check my blog?
I get this weird behavior with grid using chromium, but it doesn't occur in firefox, what could it 
I'm desperated, can't find it 
I'm desperated, can't find it What's the odd behavior? looks okay in Chrome for me
https://gyazo.com/bb07f1509b917f2e6fe5daa09790e2a2
Doesn't it do this to you on smaller devices?
Gyazo
Gyazo
The navbar should push -> while being sticky.
Like this site:
https://gyazo.com/e82187a55007c7a125962495c148b9c3
Gyazo
Gyazo
It is?
that's in Chrome
granted maybe I have some flag on or something 🤷
Brave, Chrome, Firefox, Edge.
It's truly frustrating, I can't figure the cause of it.
I was trying to do my own side bar opening panel, but didn't work, and I pretty much copied this webpage's https://toweroffantasy.info/ and still doesn't work.
I'm going to try to isolate it in a CodePen.
Just to make sure I understand here... the Edge example looks okay, but the Chrome one doesn't... If that's the case, that's really strange.
Also to confirm, in my video it does look correct, yes?
Yes, your video looks fine.
The navbar should be sticky (and span across the whole screen's height).
oh wait... you're using
svh... could you switch that to dvh and see what happens? or even 100vhDoing this should be fine, right?
It should use the 
no, it'll use the
100dvh.
Custom properties don't care what the value is, just that there is a value. You could have --dynamic-height: purple and it would use purple as the value.
Even with regular
vh (I think I tried that before too).
I thought the fallback for a variable was there in case the variable doesn't apply correctly (due to incompatibilities).no, it's for if there is no value at all
I really wish I could recreate the issue, lol.
I'm doing a CodePen (in the middle of work), give me few minutes.
There it is.
https://codepen.io/myntsu/pen/rNqRGwe
The only thing I changed was the
main. Added 300vh just so it can be scrollable and long.so in that codepen, the sidebar isn't getting to the bottom of the page for you?
No, at least in brave.
But I tried my page in my phone as well, and had the same issue as my PC.
It looks okay in the screenshot?
Yeah.
The navbar should span across the whole screen's height.
Basically like this navbar of yours. The only feature I'm going for is the
navbar pushing main to the side.
https://codepen.io/kevinpowell/pen/VwEyMmBI'm getting that same behavior in the codepen and the site... It also looks like that in the screenshot that you put above?
Yeah, in the CodePen it works fine for me then on my phone, I get the wrong behavior (the navbar splitting).
I tried this out of Astro, and it had a slightly different behavior.
Just plain .html, .css and .js, on a live server.
Instead, it didn't push the content down, but the navbar didn't take the whole screen's height. Still not the desired, still weird.
Tried it outside of locally scoped <style> from Astro, no SCSS, etc.
Still Chrome/Brave makes it weird for me... now, it doesn't do for Kevin, which makes me think there's something behind a flag, but the question is what.
then on my phone, I get the wrong behavior (the navbar splitting).
I tried this out of Astro, and it had a slightly different behavior.
Just plain .html, .css and .js, on a live server.
Instead, it didn't push the content down, but the navbar didn't take the whole screen's height. Still not the desired, still weird.
Tried it outside of locally scoped <style> from Astro, no SCSS, etc.
Still Chrome/Brave makes it weird for me... now, it doesn't do for Kevin, which makes me think there's something behind a flag, but the question is what.I've tried a second instance of Chrome that has no flags on, and Edge, where I have no flags enabled either, and everything is always the same for me 🤷
Gonna see if I can't get more eyeballs on this
The only way is using the CodePen's info and generating a test .html, .css and .js
I only tried on edge mobile, it didn't side though it zoomed like the second video.
I might have figured it out, and plot-twist, there is no text for me in Chrome on my phone 🤣
Did you open it through Discord?
opened it in Discord, then sent it to my phone.
Gonna do a remote inspect on it and see what I can figure out, cause it did have that behavior in FF on my phone, and I think I know what it is, but I gotta double check
When I open it through Discord it doesn't have any text either, but as soon as I click like a link, everything appears.
If you figure out something let me know, because I tried so many things already.
Even holy water.
Okay, so I fixed it.
Basically the
main doesn't have enough room when the nav is opened, and the browser is slightly zooming out to keep everything on the page.
If you change the --navbar-width: 150px or something smaller like that, I don't see the issue anymore. Of course, it will partially come down to the size of the screen too here I guess... now, that's a bit strange that something like that is happening...
oh... you have this in your head:
update it to be this instead and I think it fixes it:
As to how I found that...
I was really confused because I could see the space under the navbar, but in my devtools, there was nothing that could account for it.
Went back to look at it in FF to see if I could find anything there and I noticed that the menu sort of got shorter as it opened... like, it was the full height, and as it came in, it shrunk in height, which seems strange. The more I looked at it, the more it seemed like everything was shrinking just a bit...This is Astro's default template. I blame Astro for it, never thought about it 
did you change anything else?
did you change anything else?Sounds like a good and easy PR
I still have the same issue though
It got partially fixed.
Now it doesn't push the screen in a weird direction, but it doesn't stick to the
I made sure to refresh and only make that one change to make sure it was the only thing.
What did you change now? If you updated it on the live version, it's still sticking for me (I didnt go on my phone tho), but I have a horizontal scroll
I changed the 
I figured this problem is phone exclusive. As soon as I disabled phone features on browser, it works perfectly.
It wasn't a browser thing.
And this,
100vw to 1fr.
In the live version.
And gave it a overflow-x: auto if I remember correctly.
So it could "work" at least (and not break).
Now, the GIF from above, I did the head change, reverted back to 100vw.
I can tell the problem is CSS now though, because it doesn't work on any browser.
Lol, out of curiosity, decided to check the creators of the page, and well it turns they're here as well.
https://discord.com/channels/436251713830125568/1060154915772702732/1060155406552420372
They had the exact same issue I figured this problem is phone exclusive. As soon as I disabled phone features on browser, it works perfectly.
It wasn't a browser thing.
And this, 100vw 👎 1fr 👍 but the question is why.
Why one breaks it completely, and the other one just works on phone.
Well, thanks to the owner of that original post, they were able to resolve the issue @Kevin
The problem was the combining an overflow that was horizontal, with another that was vertical.
That's why the 100% or 100vw didn't work on phones, apparently? phone has a reset for it, or another behavior? Not sure if it's due to performance or they want to prevent behavior of the user.
Used overflow-x: clip on the html to fix it.
There's an article here https://kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip/ that talks about it.
And thanks to you as well, if you don't mind, I will give you credits on the READ.me of the repository.well, glad you got there in the end 🤣
I'm gonna have to dive into this more to fully wrap my head around it