Reputation: 151
I have a background-image
set in css whose height is interfering with elements declared above him. Also there are three content regions that are not resizing properly when the screen gets smaller. Everything should stack o top of each other as the screen gets smaller but instead it looks like there is a margin being applied. I was using %
and em
to position things which i think now is a mistake. Can anyone help me fix these issues and recommend a better way to position things so I won't have this problem? I know my CSS is pretty bad but I'm new to it and learning on my own. Here's a link to a codepen session I created.
Codepen: http://codepen.io/anon/pen/MKYrgj
also how do I resize the font so it scales with its containing element without overlapping as the viewport gets smaller?
Upvotes: 0
Views: 188
Reputation: 391
for your mission section use following css by removing old I hove this will solve your issues
#mission {
display: flex;
background-color: #ffffff;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/97/Sveshtnik_IMG_3782.jpg');
background-size: 100%;
background-repeat: no-repeat;
padding-bottom: 7%;
color: #005944;
max-width: 100%;
max-height: 100%;
background-size: cover;
clear: both;
}
instead of display:flex
float: left;
also work for you
Upvotes: 2