web-dev
web-dev

Reputation: 151

Elements not resizing properly

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

Answers (1)

ganesh satpute
ganesh satpute

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

Related Questions