I'm trying to create mobile first approach media queries. But in chrome dev screen simulator, I notice that the background color red shows up for all the screen size.
body{
background-color: black;
margin: 0;
}
#media (min-width:576px) {
body{
background-color: green;
margin: 0;
}
}
#media (min-width:768px) {
body{
background-color: red;
margin: 0;
}
}
#media (min-width:992px) {
body{
background-color: pink;
margin: 0;
}
}
#media (min-width:1200px) {
body{
background-color: blue;
margin: 0;
}
}
Related
used 'scss to css' converter but have problems about media queries.
I was using 'codepen.io' site to use templates on my practice page. The css part was made with scss and I converted to css with 'scss to css' online converter. I have no idea to fix the problem of media queries inside h1 css class. how can I fix this in css?
h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
#media (min-width: 400px) {
font-size: 4.5em;
}
#media (min-width: 440px) {
font-size: 5.5em;
}
#media (min-width: 500px) {
font-size: 6.5em;
}
#media (min-width: 630px) {
font-size: 7.5em;
}
#media (min-width: 768px) {
font-size: 9em;
padding-bottom: 15px * 2;
}
#media (min-width: 1200px) {
font-size: 12em;
}
}
you need to write valid css media query
h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
#media (min-width: 400px) {
h1 {
font-size: 4.5em;
}
}
#media (min-width: 440px) {
h1 {
font-size: 5.5em;
}
}
// ...keep going like this
in the css you can not set style for media in one tag styling.
for example for h1:
h1{
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
h2{
color: red;
}
#media (min-width: 1200px) {
h1 {
font-size: 12em;
}
h2{
color: blue;
}
}
I've converted your css with https://www.sassmeister.com/ and all works as expected, the generated css is valid.
h1 {
font-size: 4em;
margin: 0;
padding: 0 0 15px 0;
}
#media (min-width: 400px) {
h1 {
font-size: 4.5em;
}
}
#media (min-width: 440px) {
h1 {
font-size: 5.5em;
}
}
#media (min-width: 500px) {
h1 {
font-size: 6.5em;
}
}
#media (min-width: 630px) {
h1 {
font-size: 7.5em;
}
}
#media (min-width: 768px) {
h1 {
font-size: 9em;
padding-bottom: 30px;
}
}
#media (min-width: 1200px) {
h1 {
font-size: 12em;
}
}
If you want to work with sass (.scss) you can convert your source to .css also from command line using cli like dart:
https://sass-lang.com/dart-sass
Or if you want there are a lot of other software the do a real time conversion in a lot of programming language.
I created this website and i have a problem with the mobile site. Which it does not fit to the content. How do i need to fix this? i have attached the css of the responsive below.
I have tried several codes. But it does not fit to the content. The website is smaller than the device. And making the width 100% did not work.
Thanks in Advance
#media only screen and (max-width: 600px) {
.content-area {
float: center;
width: 100%;
}
.social-navigation li a::before,
.sidebar-toggle {
font-size: 16px;
}
.sidebar-toggle {
height: 46px;
}
.site-title {
font-size: 32px !important;
}
}
#media only screen and (max-width: 500px) {
.content-area {
padding: 0;
width: 100%;
}
.container {
width: 100%;
}
.site-logo {
width: 50px;
text-align: left;
}
.site-title,
.entry-title {
padding-top:20px;
font-size: 18px !important;
}
.site-description {
margin-top: 0;
font-size: 16px !important;
}
}
My page has a white space on the right side when using margins and padding in the mobile view.
My page:
https://www.blazor.nl/uploads/get/a83c2617117c88b0/IMG-0002
My CSS:
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper {
margin: 0 50px 0 50px;
min-height: 600px;
position: relative;
top: -120px; }
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 30px; } }
#media only screen and (min-width: 768px) and (max-width: 992px) {
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 20px; } }
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper > h2 {
color: #ffffff;
margin: 0 0 10px;
font-weight: 300; }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper > h2 {
color: #696969;
font-size: 24px; } }
#media (max-width: 992px) {
.page-wrapper .page-container .content-wrapper {
margin: 30px 30px 0 150px; } }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper {
margin: 15px; } }
I am using a snippet which can be found here: https://bootsnipp.com/snippets/dexRM. I also use Bootstrap 3.
Thanks
I can't figure out where there's an error in the following CSS:
#media all and (min-width: 570px) and (max-width: 970px) {
.contain {
padding: 0 0 0;
}
.two {
display: none;
width: 0;
margin-right: 0;
}
.two .tube {
padding: 0 0 0;
}
nav#primary .contain {
padding: 0 240px 0 0;
margin: 0 auto;
}
nav#primary .contain .two {
display: inherit;
width: 240px;
margin-right: -240px;
}
}
/*
* Keep headers in proportion
*/
#media all and (min-width: 971px) and (max-width: 1060) {
header#mast h1 {
font-size: 3.2em;
}
}
The first #media query works, the second #media block is ignored. The W3C CSS Validator complaints that "only 0 can be a length. You must put a unit after your number ) { header#mast h1 { font-size: 1em; } }".
Am I missing something really obvious?
Where is the HTML ?
Well... Here is a version of what you wrote without all of the unnecessary or redundant parts. But I can't test it without the HTML.
#media (min-width: 570px) { /* =========START=== */
.contain {
padding: 0;
}
.two {
display: none;
width: 0;
margin-right: 0;
}
.two .tube {
padding: 0;
}
.primary .contain {
padding: 0 240px 0 0;
margin: 0 auto;
}
.primary .contain .two {
width: 240px;
margin-right: -240px;
}
} /* =====================================END=== */
#media (min-width: 971px) { /* =========START=== */
.mast h1 {
font-size: 3.2em;
}
} /* =====================================END=== */
I'm wondering why some of my media queries are not overriding the native styles at the view port their being called. I'm trying to restyle a menu responsively, to stack, and have the navigation area's height longer in a WP theme. But every which way I add the specs I create to get this effect via editing Live CSS in Safari or FF inspect element - the styles I insert under the specific viewport I'm targeting are not being read. I know I'm using media queries correctly as it reads NEW styles, just doesn't override native? I'm missing something here? Here's what I'm trying to add that won't read.
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float: none; // To translate to not to float to the left stack
position: relative;
}
#access {
background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
height: 240px; //Changed the height to allow stack
width: 100%;
}
Edit: Here's the FULL set of Responsive styles I'm calling, if matters.
/* =Responsive Structure
----------------------------------------------- */
#media (max-width: 800px) {
body {
padding: 0;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
#socialpost { margin-left: -100px; }
p {font-size: 12px; }
#sublogo { display: none; }
#footcontain { padding-left: 0;}
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 20px;
text-decoration: none;
#access a { font-size: 12px; }
#access li {
float: left;
margin-left: -28px;
position: relative; }
}
#media (max-width: 650px) {
/* #media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
body {
padding: 0;
}
#page {
margin-top: 0;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 12px; }
#sublogo { display: none; }
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 13px;
text-decoration: none;
font-size: 11px;}
#footcontain { padding-left: 0;}
#access a {
padding: 0 15px; }
}
#media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
width: 45%;
padding-right: 4%;
}
#content .gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 48%; }
#footcontain { padding-left: 0;}
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
.widget-title { margin-top: 35px; }
.flexslider .slides img {
border: 0 none;
display: block;
max-width: 100%;
padding-bottom: 25px; }
#footcontain { display:none;}
#access li {
float: none;
position: relative;
}
#access {
height: 70px;
}
#access a {
color: #000000;
display: block;
font-family: arial;
font-weight: bolder;
line-height: 3.11em;
padding: 0 10px;
text-decoration: none;
}
#access ul {
font-size: 10px;
list-style: none outside none;
margin: 0 0 0 -80px;
padding-left: 0;
}
.flex-control-nav { display: none; }
.flexslider {
margin: 0 0 67px; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body { padding: 0; }
#access {
height: 70px;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
#sublogo { display: none; }
#access a { padding: 0 10px; }
#access li {
float: none;
position: relative;
}
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 35%; }
#footcontain { display: none; }
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
#footcontain { display: none; }
.widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
#access { height: 70px; }
#access li {
float: none;
position: relative;
}
.flex-control-nav { display: none; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider, check
.flexslider {
margin: 0 0 67px; }
}
The CSS code from your post is not working because it's a device-specific style and you are viewing it on a Safari, Chrome or Firefox using a laptop/desktop. You are forgetting that Media Queries are giving you the possibility to apply different styles when a page is being displayed in a 'browser' - resized to 480px and on an iPhone (which has a max-device-width of 480px).
Example CSS:
/* max-width */
#media screen and (max-width: 480px) {
.one {
background: #F9C;
}
}
/* min-width & max-width */
#media screen and (min-width: 480px) and (max-width: 900px) {
.two {
background: #9CF;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.three {
background: #F90;
}
}
/* iphone specific css */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
In the example above you can target both and still have a separate style for your device of choice. If you want to test it in a browser just use the min-width or max-width properties.
Hope this helps.
On the top example there's a missing closing bracket.
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float: none; // To translate to not to float to the left stack
position: relative;
}
#access {
background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
height: 240px; //Changed the height to allow stack
width: 100%;
}
}