I am having the weirdest issue with media queries. In my desktop browser, they work fine when it is resized. When I test on my iPhone (5C), the media queries are completely ignored.
EDIT
If I change max-width to something absurd like 3000px, the styles get applied just fine..
The media queries are the last items in my stylesheet, fyi. Here is the media query specific block:
#media only screen and (max-width:930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext{
width:90%;
font-size: 1.8rem;
line-height:2.7rem;
padding-bottom:40px;
}
#quotebox{background-color:green;}
#quotebox h3{ width:65%; }
#quotebox div{ width:40%;}
#contact ul li{
font-size:1.6rem;
width:90%;
}
.socialbox img{ opacity:1; }
.socialbox a{ margin: 0 20px;}
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
visibility: hidden;
opacity:0;
}
.hint:after, [data-hint]:after {
content: "-";
width:0;
height:0;
}
}
Anyone got any ideas?
Try adding: max-device-width to your media query along with this following snippet to the head of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
So your media queries should look like:
#media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext {
width:90%;
font-size: 1.8rem;
line-height:2.7rem;
padding-bottom:40px;
}
}
Related
In my html code below i added a divider which i want the background color to change the blue when it reaches a certain pixel width. Right now my code is having no effect. I want it to the divider to change to blue. How can i get this to work? The code in question is #media (min-width: 551px) {
div { background-color: Blue }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
#media (min-width: 551px) {
div { background-color: Blue }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I'm assuming you want the large screen bg color to be lightgrey and the small screen (less than 551px) color to be blue?
If that is the case, you need to specify *max-width on the media query. I would also make sure you call out the div by class so you aren't targeting all your divs.
Try this code.
If I have the colors reversed, you can just switch them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
div.example { background-color: blue }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
You need to add !important to force the CSS according to the screen resolution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p {
font-size: 16px; !important
}
}
#media (min-width: 551px) {
p {
font-size: 32px; !important
}
}
#media (min-width: 551px) {
div {
background-color: Blue !important
}
}
</style>
</head>
<body>
<div class="example"><p>Example DIV.</p></div>
</body>
There are two reasons this isn't working the way you want it to currently.
First, a style declared outside of a media query has higher "importance" than a style declared inside the media query. In order to combat that, you need to use !important after the media query style.
Second, because you are using a more general object name for the media query, it won't have as much hierarchy once again. Instead of using div, you need to use the same div.example inside the media query.
So the two solutions are either:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px; /* removed the bgcolor here... see below*/
}
#media (max-width: 550px) {
div.example {
background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I have this very simple web that I developed. I used all the codingand tips provided in similar questions here but with no luck. The web runs ok and its validated, but divs do not resize to fit phones. Can anybody give it a quick look and give me some pointers? much appreciated.
Here is the HTML code:
#import url(//db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light);
#font-face {
font-family: "Adieu Light";
src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot");
src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff") format("woff"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.svg#Adieu Light") format("svg");
}
.body, html {
height: 100%;
margin: 0;
background-image: url("Home-bck.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.full {
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)translateY(-50%)
}
.tromper {
display: flex;
justify-content: center;
margin-top: auto;
margin-bottom: 0px;
color: #686868;
font-family: adieu light;
font-size: 28px;
}
.better {
display: flex;
justify-content: center;
margin-top: -39px;
color: #707070;
font-family: Adieu light;
}
.social ul {
display: flex;
position: absolute;
justify-content: center;
right: 50%;
left: 44%;
list-style: none;
}
.social ul li {
margin-top: 0;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 30px;
}
.social ul li .fa {
font-size: 70px;
line-height: 60px;
color: #626262;
}
.social ul li .fa-instagram:hover {
color: #bfeefd;
transition: .5s;
transform: translate(0, -10px) rotate(360deg);
}
.social ul li .fa-linkedin:hover {
color: #bfeefd;
transition: .5s;
transform: translate(0, -10px) rotate(360deg);
}
.Contact {
display: flex;
justify-content: center;
margin-top: 70px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
color: #626262;
font-family: Adieu Light;
font-size: 24px;
}
.clients {
display: flex;
justify-content: center;
}
/* Media Queries: Tablet Landscape */
#media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: auto;
}
#media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
#media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
html { font-size:100%; }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
<!DOCTYPE html>
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>Tromper&Tromper</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="full container">
<div class="tromper">
<h1>TROMPER&TROMPER</h1>
</div>
<div class="better">
<h3>"BETTER TOGETHER"</h3>
</div>
<div class="social">
<ul>
<li>
<a href="https://www.instagram.com/tromperandtromper/?hl=es" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/tromper-and-tromper-works" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<a href="mailto:whatever#whatever.com" style="text-decoration:none" target="_blank">
<div class="Contact">
<h4>CONTACT US</h4>
</div>
</a>
<div class="clients"></div>
</div>
</body>
</html>
The reason of your div is not resizable it's because h1 tag.
You can try modify your css file with this:
/* Media Queries: Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
h1 {font-size: 7vw;} /* <- HERE */
}
However, your code isn't semantic. Try to improve this with the time.
I would comment as I am not sure if this is the right answer, but unfortunetly I am not allowed to.
I don't want to offend you or your experience level but it seems like you do not know how css works? Or maybe you just copied without looking.
You use the media queries to make the website responsive pretty much. Depending on your needs of course.
The easiest way to make divs respeonsive is giving them a width with %. So if you give them lets say 90% they will only get 900px wide when the screen (or window) is 1000px etc.
When you use media queries, because maybe the divs need to be smaller or bigger or you use absolute numbers (like pixel or so) you also need to use your classes and IDs.
Right now in your media queries I see two IDs "primary" and "secondary" because with # you declare this is an ID and in your HTML I dont see any IDs at all. So how is the browser supposed to know, where to apply your CSS?
Now, I dont claim to be a professional CSS user, so it is possible that "#primary" is some sort of special command, but as of right now, I would say there is at least one of your problems.
You also use alot of flex and I dont really know why? You could also work a bit on your HTML, using containers, sections, articles and such, but thats another story.
i agree with bibleblade, and i would like to add that its pretty weird that you use "screen" and sometimes just dont add it. maybe try to be a bit more consistent with that. and plus, by adding "screen" youre stating that this will only look like this, if its on a screen, so it wont work on a printer, which is pretty unnecessary, so i would just remove the "screen" so it defaults to "all" and the last media queries at the bottom for the font-size. are unnecessary, since you could just make the font-size relative to the screen via vw or vh or just use something like clamp
I need to center div's element for mobile devices. This is my website: http://transporttest.cba.pl/
On mobile devices description div goes to the left.I try to use media queries but it didnt works. What I'm doing wrong? On PC everything is ok. This is fragment of my code:
HTML:
<div id="opis">
<h2>
<p style="line-height: 3cm; ">
♦ Od 1991 roku w branży. <br/>
♦ 9 zestawów (ciągnik+ naczepa firanka, colimulde). <br/>
♦ Uprawnienia ADR u każdego kierowcy.<br/>
♦ Warsztat obsługujący auta ciężarowe.<br/>
</p>
</div>
CSS:
#opis
{
font-size: 25px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #F2F3F7;
height: auto;
width:72%;
display:inline-block;
text-align:center;
}
#container
{
text-align: center;
width:100%;
}
#media all and (max-width: 768px) {
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
left:25%;
top:25%;
position:absolute;
width:50%;
text-align:center;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
#media all and (max-width:640px){
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
width:72%;
height:auto;
display:inline-block;
text-align:center;
margin: 0 auto;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
For media queries to work, you need to include:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Between the tags.
https://www.w3schools.com/css/css_rwd_viewport.asp
Firstly, use <meta name="viewport" content="width=device-width, initial scale= 1.0">
As it will automatically fit you webpage to the width of the Device.
Secondly, you should use margin-left=auto;
margin-right=auto;
This will make the contents if your webpage to the center of the screen of the device.
You can also use text-align="center"
if that works for you.
P.S. The <meta name=viewport> should be definitely used in webpages as it helps the designer to format the webpage automatically to the screen width.
I'm trying to use a media query to make a div responsive on a site (using IE11).
This is my CSS:
#media screen and (max-width: 400px) { // Tried with "only screen" also
.divStyle {
background-image:none;
background-color:red;
background-position:right;
color:#fff!important;
height:140px;
position:relative;
top:-6px;
}
}
.divStyle {
background-image:url('/images/image.jpg');
background-position:right;
color:#fff!important;
padding:20px;
height:190px;
position:relative;
top:-6px;
}
I've also added the metatag in the Head section.
<meta name="viewport" content="width=device-width, initial-scale=1" />
But it still doesn't respond when I'm resizing the window.
In your case the rule without the media query follows after the one with the media query. So it overwrites the rule.
Change their order to this.
.divStyle {
background-image:url('/images/image.jpg');
background-position:right;
color:#fff!important;
padding:20px;
height:190px;
position:relative;
top:-6px;
}
#media screen and (max-width: 400px) {
.divStyle {
background-image:none;
background-color:red;
background-position:right;
color:#fff!important;
height:140px;
position:relative;
top:-6px;
}
}
I'm developing a mobile version of my website. I have this code, tested on Galaxy S3, there is no scroll and the site displays okay.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="css/mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="css/desktop.css" />
</head>
On the iPhone 4 however, I get this. The image is a bit too large, and the top bar does not extend to the phone's full width. I assume that this is because iPhone's width is 480px, but how can I target the device and its width, ideally without creating another CSS file for it?
The top bar is set here, as border-top:
body { background-color:#F5F5F5; width: 100%; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; line-height: 14px; }
This can go in your primary stylesheet:
/*Target iPhone's screen width*/
#media screen and (max-device-width: 480px){
/*Do not set fixed widths, use %*/
body{
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:5px;
}
/*Set widths to 100%*/
div{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}
/*Create vertical navigation menu*/
#nav,#nav li{
float:none!important;
clear:both!important;
margin:0 0 20px 0!important;
display:block;
padding:0;
text-align:left!important;
width:100%;
}
#nav{
border:1px solid #ccc;
padding:5px;
border-radius:5px;
}
#nav li{
margin:0!important;
}
#nav li a{
display:block;
}
}