The content div is not adapting to different screen sizes properly.
As the width and height of the browser shrink, it's overlapping with the header and footer.
I'm using flex but I'm unsure if I'm implementing it correctly.
display: -webkit-box;
display: -ms-flexbox;
display: flex;
It seems like I might be making a mistake somewhere in my code.
In addition, the content is being used as an overlay on a background video, so there may be conflicting styles.
Could I be accidentally overriding existing styles?
To provide context, you can find the JSfiddle example here: jsfiddle
Here's a snippet of the code for reference:
[CSS CODE HERE][HTML CODE HERE]Additionally, I would like to include a small arrow under the menus to indicate which page the user is currently on.
However, this feature isn't behaving correctly either.
Below is the CSS code I've been utilizing:
.arrow {
position: relative;
background: #fff;
display: inline-block;
padding: 15px;
color: #000;
text-decoration: none;
border-radius: 6px;
}
.arrow:after {
position: absolute;
bottom: 100%;
right: 50%;
margin-right: -9px;
content: ' ';
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
border-top: 10px solid transparent;
}
Your assistance is greatly appreciated!