Please why is my css media query not responsive?

Question

Testing this css media query ,with a mobile first design approach ,but it's not responsive.Not working neither on mobile or pc.please what did I not do right
https://code.sololearn.com/WizU90nWpAG1/?ref=app

Answer 1

You can follow media query that set for Bootstrap CSS framework.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Answer 2

steve Purpose it's advisable not to mix min-width with max-width on a set of media queries.

Choose one of the settings based on whether you prefer mobile first (min-width) or desktop first method (max-width).

Answer 3

steve Purpose you need a "space character" in front of the parentheses indicate the screen size like this:
@media screen (max-width:470px) {}

Answer 4

This space "and (max-width:450px)".

Answer 5

You must to write "and (max-width:450px)"
See i have a space between the word "and" and the parentheses.
instead of "and(max-width:450px)"

Answer 6

Ok..Thanks a lot 🙏..let me try it

Answer 7

Ok.it worked Thống Nguyễn .I appreciate

Answer 8

steve Purpose I didn't mention that you should use the framework.

What I actually meant was studying how the framework uses media queries to achieve its job, you can use this exact same method.

Anyway if anyone uses the framework in fact don't need to understand its media queries code works.

Answer 9

Thanks all the same..I solved the issue long ago..All I needed was space before brackets

Answer 10

Which of the parentheses Thống Nguyễn .. The curly braces or bracket

Answer 11

I don't really get your point

Answer 12

Calviղ I don't want to use framework for this particular job