HTML/CSS Media Query

0
votes

I have referenced the viewport meta tag and stylesheet link correctly but still my media query doesn't work.

All CSS style works with the exception of the media query styling.

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="main.css" type="text/css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
2
htmlcss
It would help if you posted the css as well – Federico klez Culloca
where write your media query. – Arunkumar
Hi Richard, welcome to Stack Overflow. There are a couple of guidelines that could be applied when asking questions, so please make sure to check them out. In order for us to start helping you out on your question, could you please provide us with a minimal reproducible example? – Barrosy

2 Answers

0
votes

If you have written the Media Query in the main.css it won't override the default Media Queries of bootstrap and rest of the stylesheets, because you need to call your main.css after all the default stylesheets. Hope this helps :)

0
votes

and write this type:-

for max-width:- @media (max-width:767px) {code here}

for min-width and max-width:- @media (min-width:768px) and (max-width:991px) {code here}