Navbar sticky Going out of page
I've set up some js so when you scroll down, the top navbar becomes position: fixed. However; I am getting this issue where it appears the navbar goes beyond 100% of the screen as it stretches horizontally to the right and out of view. What could be causing this? I have a default container margin: 0 8rem;
How do i acheive this in flexbox without creating two rows of div
lets say i have an array of 7 elements, the max no of elements permited in a row is 4 and the rest should go in row(2). These remaining 3 elemts should start in the center (example image ).
How can i acheive this?...
CSS Responsive Images
I wanted to ask what is the best approach to position images in this context, resizing an image according to screen breaks, and putting them around a container in exact positions according to the pictures I added. What I would do is put them in absolute pos. but I don't know If it would be a good idea to position them within a parent div (to make the div make the responsive resizing), or just make the image responsive by itself with a <picture> <source> tags.
Menu dropdown issue with nested items
Hi on this test site https://stage.dembetheatre.org/
I have a dropdon menu that has an icon that is used in mobile menu to open close nested levels
for the desktop version i have an issue in the i need the icon backround and color to change when the <li> is hovered but at the moment only the main element is taking the hover state, i need to include the icon background and color...
please let me know what i am missing, i have tried removing all styles from all elements other than the li but i am unable to target the icon element to change state when the associated nav item is hovered...
how to isolate an element from specific styles
i want to isolate this .not-content element from global styles but i want an other
styles to effect
```css
:where(:is(button, input, optgroup, select, textarea)) {
font-family: inherit;...
Creating UI for game
I need to create a UI element for my project I have issue creating it and it's a little challenging
Displaying a border image over another image
So this is what i'm sitting at
```css
.inner-image{
position: absolute;
right: 0px;...
Grid Layout Not functioning responsively
I'm completely lost on how to make this fit in my at all times
I've tried setting a min and max height but i don't think i understand them well enough so i couldn't get it to work
i've tried changin the main message container to 90% and still doesn't look the part
```html
<div class="main-message-container"> ...
