₦airaland Forum

So I just started learning flexbox in CSS and I tried to create a header with logo, search bar and main links like the home, about, contact etc I wanted to use float but I think float is good for only two element like image and some text.... When I use flexbox to design it on pc it looks nice but when I resize the window it looks horrible so please help what do I need to do or what technology do I need to learn coz this is what has been giving me serious headache

Please help o

pls bros go to youtube and learn for free and in a more detailed way

blackpanthar:
pls bros go to youtube and learn for free and in a more detailed way

Hmmmm

You need to learn responsive web design.

When a site is "responsive", it means it can adjust to various css to meet up with the new width of the device.

What you are currently experiencing is the normal behavior, you didn't set a different media query for width smaller than desktop.

Go through this link to learn more.

https://www.w3schools.com/css/css_rwd_intro.asp


@media screen and (max-width: 800px) {

.flexitem {
flex-directon: column;
}

}

The code above would help your case a little.

use media query to arrange it on a specific screen size

Tanks guys I really appreciate