How would I be able to fix this website so that when the window is resized the images don't overlap?

Question

https://weatherwarriors.ca/

https://github.com/aacamilleri/weatherapp

Basically, I've tried changing the width and height definitions to percentages instead of pixels, but that didn't help much because now the image just smooshes as the window is resized and the pictures still overlap. How would I fix this?

<div id="uw" style="width:10%">
    <img src="uw.png" alt="UW">
</div>

<div id="mainlogo">
    <img src="mainlogo.png" alt="weatherwarriors" style="width: 400px;height: 90px">
</div>

<div id="circle">
    <img src="circle.png" alt="WLU" style="width: 105px;height: 105px">
</div>

<div id="wlu">
    <img src="wlu.png" alt="WLU" style="float:left;width: 250px;height: 100px">
</div>

https://i.stack.imgur.com/s8e9W.jpg

https://i.stack.imgur.com/Zk7ld.png

Answer 1

from a quick look on your website i noticed that you're not defining any position/width/height on your element. A quick fix for that is to wrap your header with a div and define the display:flex; than give your child element inside that wrapper div a height and a width so each one take a place in the one dimension flexbox. Following the above you can now justify-content:space-between so it will be responsive and each element will hold his position as long as there's enough width.

In addition to the above you can define a breakpoint using @media queries to minimise your the width and height of your images to fit on the screen width.

Answer 2

First of all nice website! Keep it up!

So the problem you are facing happens because the elements is not told to do anything else then stay right where they are no matter what and the moving elements/images are because of usage of percentage.

The solution to your problem is by wrapping your element in a container so they don't just fly or lays in random positions around the website when you resize the browser.

I have created a small codepen you can take a look at that simulates the sort of struct/layout and style you might are looking for.

And there is also a Media Query in bottom of the style/css as it may be good idea as @Ali Hamdan suggest.

Some small tips for the future:

• placing elements with position: absolute around the website is not so good approach.
• When making a website have a design in your head or paper for the layout of your site.

Hope it makes sense and helps!