Any css gods want to earn some sats today? DM or reply here. Need some help with a small thing.
Discussion
Not a god but curious what your looking for. Could probably just post your issue and someone can solve if it's simple selectors
Responsive breakpoint stuff, checkout homepage of nodeless.io and just shrink the screen, it doesn't have good breaking points
The breakpoints selection seem not bad, the only problem is the breakpoint 992px > 1060px that explodes the menu, and when < 992px the "beta" floats wrongly.
I would fix the "beta" and remove the first breakpoint to just use the hamburger menu.
Bonus: when the haburger menu is open I would central align the items and put a bottom padding to isolate the signup/login buttons from the background content.
Btw really nice website! 🤙
Beyond my understanding for front end, but hope you get someone that bites on it
#[2]
Thank you #[3] !
#[2], wouldn’t call myself a “css god” haha, but I certainly know css and would be happy to help!
How can I help you?
Please take a look at nodeless.io
The top menu breaks on certain sizes
Also on very small mobile screens, the typing animation causes the sign up button to move.
Can you fix?
Thank you for posting! I will take a look into it now!
Ok, so for the issue where the buttons elements wrap into the next line, that can be fixed by changing some of the responsive breakpoints.
One of them would be the breakpoint for `nav-item`, the max-width can be changed to about 1400px.
The other one would be to change the class of the `nav` element to `navbar-expand-xl` instead of `navbar-expand-lg`
I’m preparing a little screencast video to demonstrate, please give me a minute!
👀👀
You can set different max-width in css based on each width setting you want for different devices for more granular control
Thanks for your patience, the Internet where I am is a bit slow…
Here is a demonstration of the changes I suggested: https://drive.google.com/file/d/1mGQUX-zAAGZ5rsjquBrzl4egwxh6ZBdd/view?usp=drive_link
These are some suggestions based on a quick investigation, but please let me know if you need more help or have any questions!
There is multiple ways to achieve a fix, one quick way for the signup button moving is adding a min-height on the h2..."@media (max-width: 450px)
.banner_text h2 {
font-size: 29px;
line-height: 36px;
min-height: 150px;
}"
Just let me know what u want to achieve?
Alas, I am but a CSS mortal.