Some serious problems with my CSS
So, I have started building a site and I have got as far as the navigation, when I made it a few days ago it worked and was responsive. However, there are now a number of problems with it.
One is that in Devtools responsive mode (chrome and edge), when changing the width of the simulated screen, the size of the navbar seems to act in the same way as you zoom in (I can't even describe what it does, so I've provided screenshots), but resets when I choose a dimension pre-set from the dropdown (not the bar with common sizes).
Another is that is that when the mobile nav kicks in, the overflow-x: hidden; on the body doesn't do what it should as there is side scrolling, and you can see in the provided screenshots where the nav is retracted off the page....
Overflow-y: auto makes x-axis scrollbar appear
Hi folks,
I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_list' with smaller subMenus. Each subMenu has elements with an svg and a text. The sidebar is collapsable, so the text elements (spans) hide when collapsed. When the sidebar is collapsed and I hover over the Link, the text appears position absolutely outside of the sidebar. This is the expected behaviour.
However, the 'sidebar_list' is currently not scrollable vertically. If i make 'overflow-y: auto' (or scroll), it makes the list scrollable, but then the text elements are not appearing outside of the sidebar.
What am I doing wrong here and how could I fix this, so the list is scrollable and the text elements appear on hover?...
minFn confusion
CodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb
I'm not sure where this extra space is coming from when i set my grid col to auto. I've got the grid,
.main with two direct chhildren, .poster and .content. Poster includes .img-wrap><img> and a row with two buttons. <img> is set to max-width: 100% and .img-wrap{width: min(100%, 30ch);}
If i set my grid col to the same min(100%, 30ch)its fine, but if grid col is set to auto, theres all this extra space in the column. Where is it coming from? Its just empty space in the poster div....
Need help with a background img?
How would I get the background pattern in the card to be behind avatar. I tried using position absolute but when i add a z-index of -1 and add background color to the card it covers the pattern then if I use background image its going to cover the whole card. I woud appreciate ur guys advice and ur approach.
Hovering issues
When I hover on "register", my screen jumps. What cause it?
https://codepen.io/Jonah-the-lessful/pen/rNbYpVg...
Fix background for div on hover
Hey guys,
You can see in screenshot when I hover on a card the background is getting disturbed. I need it to have same style background (dark one like other two) before and after hover, can any one help me
Thank you.
https://codepen.io/Moksha-Nirugutti/pen/QWPOOvM...
