Here is a simple HTML page that uses multiple #media rules:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<style type="text/css">
.div1{
height: 100vh;
width: 100vw;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
#media only screen and (max-width: 700px) and (min-width: 500px) {
.div1{
background-color: green;
}
}
#media only screen and (max-width: 499px) and (min-width: 300px) {
.div1{
background-color: red;
}
}
#media only screen and (max-width: 299px) {
.div1{
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
This page should change its colour as the window becomes smaller. It works as intended if I manually resize the web browser window. It also works under Firefox. However, it fails to work properly under Chrome's responsive design mode [Version 69.0.3497.100 (Official Build) (64-bit)]
Strangely enough, the CSS behaves as expected under Chrome's responsive design mode when I recreated it in JSFiddle here: http://jsfiddle.net/7g5jca8x/13/
What is the difference between the JSFiddle version and the HTML version? I can't figure this out.
You were missing the viewport meta tag here is an example
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I added some media queries in CSS.file to make the web page responsive and it works great offline. But when I upload it on the server with Filezilla, it doesn't look responsive anymore.
I've already tried to change #media only screen and (...) in #media (...).
#media only screen and (max-width: 2000px) {
.column_left {
width: 100%;
height: auto;
}
.column_right {
width: 100%;
height: auto;
}
.foto {
width: 150px;
height: 75px;
}
footer {
background-color: lightgreen;
}
}
#media only screen and (max-width: 1000px) {
.title {
margin: 10px;
}
.subtitle {
display: none;
}
}
#media only screen and (min-width: 2500px) {
.foto {
width: 150px;
height: 75px;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stay Culture</title>
<link rel="stylesheet" type="text/css" href="stile.css">
<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
</head>
This is probably a problem with cache.
You can run Ctrl+Shift+R or Ctrl+F5 to delete cache from the current opened page.
To avoid using of old cached files, you can simply add a 'version' tag at the end.
Like that:
<link rel="stylesheet" type="text/css" href="stile.css?v=001">
This 'forces' file to reload, so it's recommended if any change was made in that file, because users are not going to run Ctrl+F5 on your page.
On certain breakpoints in the browser I am getting some unexpected results while using Bootstrap (V3.3.7). So I set up a little experiment with the BS hidden classes.
The BS CSS file contains the following CSS for the hidden classes:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
I have set up the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Bootstrap hidden classes</title>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<style>
.hidden-xs{ color: red; }
.hidden-sm{ color: blue; }
.hidden-md{ color: pink; }
.hidden-lg{ color: green; }
</style>
</head>
<body>
<div class="hidden-xs">Hidden xs</div>
<div class="hidden-sm">Hidden sm</div>
<div class="hidden-md">Hidden md</div>
<div class="hidden-lg">Hidden lg</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
With the CSS I expect at all time there will be 3 elements visible in my set up. However on window widths 767, 991 and 1199 there are 4 elements present. I tested this in Chrome and Firefox.
I was under the assumption the way media queries in BS are used, is the correct way. Why am I getting this result? Am I missing something or is BS using media queries wrong?
I'm having a similar issue in my project, so I edited the bootstrap code like this, and it seemed to fix the issue.
#media (max-width: 767.99px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991.99px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199.99px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
I think the underlying issue here is that the browsers are measuring out width in fractions of pixels, but the css leaves a 1 pixel gap between the classes.
I'm working on making a site mobile friendly, and when I put in the meta tag for viewport it's not recognizing it at all.
I'm still working on media queries, but the viewport isn't doing anything at all.
Site: http://gc200298785.computerstudi.es/test/
Source Code: view-source:http://gc200298785.computerstudi.es/test/
Thank you in advance!
Kayley
It is working fine only. I noticed your css.
#media screen and (max-width: 320px) {
/*main*/
body {
font-size: 16px;
line-height: none;
width: 100%;
}
.container {
max-width: 90%;
padding: none;
margin: 0 auto;
}
a .inside-container {
max-width: 25%;
}
nav {
width: 25%;
}
nav li{
display: inline;
}
#menu {
max-width: 100%;
}
}
add below the code in your css
.container, #paper, #landing, #paper-bottom{width 100%;}
Try adding;
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Also best practise is to start your css as mobile/ responsive, so in other words dont wrap it in a media query.
Then for desktop start a media query under the main mobile/ responsive css
#media screen and (min-width: 800px) //or what ever size you want {
// insert your styles here
}
You will find that it is a lot easier to approach your development this way.
I have some simple CSS and HTML just to see if the media query work. But something wrong
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
background: red;
width: 100px;
height: 200px
}
/* Mobile Phones */
#media screen and (max-device-width:640px) {
.box {
background: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
The box background won't change to blue when viewing in mobile. I use firefox plugin "Go Mobile" to simulate mobile screen environment during the test
Solution: https://jsfiddle.net/r56m37kb/
max-width instead of max-device-width
You are using the incorrect syntax for your media query. Here is a working snippet with comments on where to make the change (max-width vs max-device-width):
.box {
background: red;
width: 100px;
height: 200px
}
/* Mobile Phones */
#media screen and (max-width:640px) /* Changed from max-device-width */ {
.box {
background: blue;
}
}
<div class="box"></div>
My webpage uses multiple sections. I have the .header section set to 1050px which is perfect for desktop viewing, but when viewed on a mobile device the elements inside overflow into the next section.
How can I seamlessly change the section height for mobile viewing so the elements don' overflow?
Other ideas are welcome as well.
Here is my CSS for the section:
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
height: 1200px;
}
Here's one option for you: http://codepen.io/panchroma/pen/BulnL
I'm using media queries to set different CSS values as the viewport of window width changes. The css is easy to follow and for this to work reliably, you need to include a meta tag similar to the following in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've used min-height instead of heght to control the div sizes, because it's more flexible, for example it will probably give better results if a user has a large font setting.
The break points I've chosen for the media queries viewport widths are for illustration only, customise these to fit the specifics of your design.
Good luck!
CSS
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
min-height: 900px; /* set default height */
transition: all 0.5s ease; /* optional css transition effect */
}
/* For media queries to work on smartphones, be sure to add a meta tag similar to the following
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/
#media (max-width: 480px) {
.header-14-sub {min-height: 300px;}
}
#media (min-width: 481px) and (max-width: 767px) {
.header-14-sub {min-height: 500px;}
}
#media (min-width: 768px) and (max-width: 979px) {
.header-14-sub { min-height: 700px;}
}
#media (min-width: 1200px) {
.header-14-sub {min-height: 1200px;}
}