Welcome, Guest: Join Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,350,405 members, 5,212,756 topics. Date: Thursday, 17 October 2019 at 06:46 AM

Media Query In Css Is Not Working On All My Laptop Browsers - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Media Query In Css Is Not Working On All My Laptop Browsers (988 Views) (2) (3) (4)

(1) (Reply) (Go Down)

Media Query In Css Is Not Working On All My Laptop Browsers by peterincredible: 1:16pm On Jan 09, 2017
hi my fellow nairalanders i have been learning lately about responsive web design so i started learning about css3 media quaries and i tried to make one of my big project(website) i am working on responsive but the rules i placed in the queris are not working so i made a little small project where i can easily detect the code error and apply the media queries but it is still give me problems pls i need the help of the web designers in this forume to pls help me detect why it is not working in all my browsers( mozilla , opera and chrome) pls this is the code below
<!DOCTYPE html>
<html>
<head>
<title>sign up</title>
<meta charset="UTF-8"/>
<meta name="author" content="peter dibie"/>
<meta name="description" content=" how to create a login page"/>
<meta name="robot" conent="no-follow"/>
<meta http-equiv="pragma" content="no-chace"/>
<meta name="viewport" content="width = device-width,initial-scale= 1">
<style>
*{ padding:0px; margin:0px;}
body{
width:100%;
height:960px;

}
.page{
max-width:1400px;
margin:10px auto;
width:100%;
background-color:black;
height:100%;

}
#header{
max-width:800px;
background-color:red;
float:left;
width:33%;
border:1px solid black;
height:200px;
}
#middleheader{
max-width:800px;
background-color:blue;
float:left;
width:33%;
border:1px solid black;
height:200px;
}
#rightheader{
max-width:800px;
background-color:yellow;
float:left;
width:33%;
height:200px;
border: 1px solid black;
}
@media screen and(max-width:780px){


#header{
float:none;
width:98%;
height:200px;
}
#middleheader{
float:none;
width:98%
height:200px;
background-color:pink;

}
#rightheader{
float:none;
width:98%;
height:200px;
}
}
@media screen and(max-width:480px){


#header{
float:none;
width:98%;
height:100px;
}
#middleheader{
float:none;
width:98%
height:100px;

}
#rightheader{
float:none;
width:98%;
height:100px;
}

}
</style>
</head>
<body>
<div class="page">
<div id="header">

</div>
<div id="middleheader">

</div>

<div id="rightheader">


</div>
</div>
</body>
</html>
pls your reply and contribution will be highly appreciated thanks
Re: Media Query In Css Is Not Working On All My Laptop Browsers by Nobody: 4:06pm On Jan 09, 2017
u are currently viewing ur codes on device view and not desktop browsers. bcuz of d meta tag? meta name= "viewport" content= "width=device-width=inital-scale=1"> located in ur <head> </head> section. remove it 1st, save and retest again on ur browsers. jst make sure u type ur whatever name.html extention manually as u save ur project b4 retesting on browsers, or separate ur html and css works and save them separately and then LINK THE .HTML project TO UR .CSS work WITH DZ BELOW SCRIBBLEd IN-BTW THE <HEAD> </HEAD> tag> WITH DZ CODE <link type ="text/css" rel="stylesheet" href="ur project.css"/> ON UR HTML PROJECT save n re-test again OR. CHECK UR LOCALHOST IF U RE USING XAMPP APP FOR OFFLINE CHECKS? MAKE SURE UR PROJECTS ARE SAVED IN ../xampp/htoc/urproject directory. test ur APACHE and make sure it is working in d xampp control app? b4 anytins else.
Re: Media Query In Css Is Not Working On All My Laptop Browsers by worisj(m): 9:03pm On Jan 10, 2017
Why not use bootstrap for the responsive web design and save yourself all this stress? I mean in bootsrap it will only be a matter of wrapping the whole thing in the <div class="container-fluid"></div>
Re: Media Query In Css Is Not Working On All My Laptop Browsers by noordean(m): 9:19pm On Jan 10, 2017
worisj:
Why not use bootstrap for the responsive web design and save yourself all this stress? I mean in bootsrap it will only be a matter of wrapping the whole thing in the <div class="container-fluid"></div>

Someone developed bootstrap you know...He might want his code to be natural
Re: Media Query In Css Is Not Working On All My Laptop Browsers by peterincredible: 9:23am On Jan 11, 2017
infact the whole matter tyre me i really dont c anything wrong with my code for christ sake it just a simple code to test responsive design well sha i have battled with it for over three days now still not knowing where the error is from anyway i have moved to javascript i have a lot to accomplish this year i will not wast all my time for just a simple error i dont know where the fault is from maybe when am comfortable with javascript i will go learn how to use boostrap thanks for your replys.
Re: Media Query In Css Is Not Working On All My Laptop Browsers by Nobody: 11:16am On Jan 11, 2017
AN
Re: Media Query In Css Is Not Working On All My Laptop Browsers by Nobody: 11:22am On Jan 11, 2017
@Op, i m thinking i may hv got a solution to ur problem>> since u are testing for responsiveness, while not test it through an "ios simulator browser" instead of using the normal desktop browser>> try it.
Re: Media Query In Css Is Not Working On All My Laptop Browsers by guente02(m): 12:00pm On Jan 12, 2017
Ever thought of using css 3 flex box?
Your code isn't dry at all, repetitions everywhere.
Re: Media Query In Css Is Not Working On All My Laptop Browsers by peterincredible: 12:39pm On Jan 12, 2017
guente02:
Ever thought of using css 3 flex box?
Your code isn't dry at all, repetitions everywhere.
what is css3 flex box anyway googling onpoint but pls do you have any idea of how to solve my problem ure reply will be greatly appreciated thank you.
Re: Media Query In Css Is Not Working On All My Laptop Browsers by guente02(m): 2:34pm On Jan 12, 2017
peterincredible:
what is css3 flex box anyway googling onpoint but pls do you have any idea of how to solve my problem ure reply will be greatly appreciated thank you.

Bros. you'll have to go easy on yourself and don't ever think of rushing to other languages just because css is giving you headache. Just go slow, be stubborn and be patient at the same time else you'll regret ever rushing things.

Check out CSS3 Flexbox guide on youtube or via google - there is a plethora of them available.
-------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>sign up</title>
<meta charset="UTF-8"/>
<meta name="author" content="peter dibie"/>
<meta name="description" content=" how to create a login page"/>
<meta name="robot" conent="no-follow"/>
<meta http-equiv="pragma" content="no-chace"/>
<meta name="viewport" content="width = device-width,initial-scale= 1">
<style>

* {
padding:0px;
margin:0px;
}


.page {
margin: 0px auto;
width: 90%;
}

.page--mod{
width: 33.33333%;
float: left;
height: 200px;
}

.header {
background-color: red;
}

.middleheader{
background-color: blue;
}

.rightheader {
background-color: yellow;
}

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

.page--mod {
clear: both;
width: 100%;
}

}
</style>
</head>
<body>
<div class="page">
<div class="header page--mod">
</div>
<div class="middleheader page--mod">
</div>
<div class="rightheader page--mod">
</div>
</div>
</body>
</html>
Re: Media Query In Css Is Not Working On All My Laptop Browsers by Nobody: 7:26pm On Jan 12, 2017
@Op, ur codes are ok, i personally dnt code lyk 70% d way u do abv. still i can read dem fine. one tin abt html is undstnding hw it work, n hw 2 apply it 2 d way u want it to luk dou it has rules> input types, elements and attributes>and it will definitely wok on any browser? i tink d browsers shuld be d judges cuz dia z no one pure way of writing html5 <1question!@Op? do u use xampp app to test-run ur codes/web designs/projects? try learn other stuffs lyk; clearfix, block, border-radius, overflow-x: button-container e.t.c html5 & css3 get beta with dedicated practices over time. bootstrap 3 shuld com after dou optional but its worth d use. so long as u are interestd in web developmnt, u must let dz 2 pass thru u!
Re: Media Query In Css Is Not Working On All My Laptop Browsers by peterincredible: 10:08pm On Jan 12, 2017
my bris (coin2naira) this code i wrote here is just a simple code to test and know the concept of responsive web design i have written 2 small project of about 2 pages each i just want to learn this reponsive design concept so dat i can apply it on my real project but onfortunately it is not working on any of my browsers and i am sure the fault is not from my code(for christ sake the code is a very small code ) but i dont know why it is not working anyway thanks for your reply may God bless u all for ure contributions
Re: Media Query In Css Is Not Working On All My Laptop Browsers by guente02(m): 1:56am On Jan 13, 2017
peterincredible:
my bris (coin2naira) this code i wrote here is just a simple code to test and know the concept of responsive web design i have written 2 small project of about 2 pages each i just want to learn this reponsive design concept so dat i can apply it on my real project but onfortunately it is not working on any of my browsers and i am sure the fault is not from my code(for christ sake the code is a very small code ) but i dont know why it is not working anyway thanks for your reply may God bless u all for ure contributions
To understand Responsive Web Design u need to have a good grasp of css (floats to be specific). Don't you have learning resources?

1 Like

Re: Media Query In Css Is Not Working On All My Laptop Browsers by imustsaymymindo: 11:27am On Jan 13, 2017
Maybe you have to be online though.
Re: Media Query In Css Is Not Working On All My Laptop Browsers by luksybee(m): 4:38pm On Jan 13, 2017
hmmm.... 9ja coders, but if na to argue.... smiley

anyways @op you just need few adjustment on your code....

you missed few semicolon

and

put a space between screen and (


off you go ... cheers!!!
Re: Media Query In Css Is Not Working On All My Laptop Browsers by tokzy205(m): 10:22am On Jan 17, 2017
op i think u shud try these approach:
@media (min-width:320px) and (max-width:480px){}
@media (max-width:480px){}
@media (min-width:320px){}
hope it helps
Re: Media Query In Css Is Not Working On All My Laptop Browsers by stack1(m): 12:36am On Jan 18, 2017
How exactly is the code not working, from what i see you have two break points set
One at 480px -- for smaller phones
and one at 780px --for tablets/small screen laptops,

What size of screen are you testing on?
If your screen is larger than 780px no media-query breakpoint rules would come into effect and only the global styles would be used.

(1) (Reply)

Regarding For DBMS Query! / Developers In The House, Show Us What You're Currently Working On / Please Help, Browsers Can't Find My External Css

Admob Self Click App + safe click tips For ₦500[December Tips] / Im New N Pleeaasse Need Help On Game Programg Books / How To Be A Website/security Hacker

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2019 Oluwaseun Osewa. All rights reserved. See How To Advertise. 88
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.