I am having some problems with my responsive grid. It is problaly something to do with my breakpoints. To see if the breakpoints is working in the Blisk browser, I started with just setting a color on the font, so I would see what is changing.
The reason why I set the first one to 414 px, is that it works on all mobiles except Iphone 6+ and Nexus 6. But those breakpoints are not working. The head-text does not change color.
Am I doing something wrong here?
#media only screen and (max-device-width : 414px) {
.header-box {
background-color: #163A4E;
height: 550px;
margin-bottom: 0px;
padding: 0px;
}
.header-text h1 {
color:red;
}
.header-text h2 {
color:green;
}
}
/* Iphone 6 + and Nexus 6*/
#media only screen and (min-device-width : 415px) and (max-device-width : 736px) and (orientation : portrait) {
.header-text h1 {
color:yellow;
}
.header-text h2 {
color:pink;
}
}
Well, first you have max-device-width but it should be max-width since
device-width is deprecated
Also, don't use the orientation since it is not working (yet).
Your CSS would look like:
#media only screen and (max-width : 414px) {
.header-box {
background-color: #163A4E;
height: 550px;
margin-bottom: 0px;
padding: 0px;
}
.header-text h1 {
color:red;
}
.header-text h2 {
color:green;
}
}
/* Iphone 6 + and Nexus 6*/
#media only screen and (min-width : 415px) and (max-width : 736px) {
.header-text h1 {
color:yellow;
}
.header-text h2 {
color:pink;
}
}
Related
my question about #media code in CSS
when I create a website I use #media in media to change on many screens like this:
#media (min-width: 280px) and (max-width: 767px) {
#media (min-width: 280px) {
.main-header .main-textmonial {
font-size: 11px;
}
}
#media (min-width: 320px) {
.main-header .main-textmonial {
font-size: 13px;
}
}
#media (min-width: 360px) {
.main-header .main-textmonial {
font-size: 15px;
}
}
#media (min-width: 411px) {
.main-header .main-textmonial {
font-size: 18px;
}
}
#media (min-width: 450px) {
.main-header .main-textmonial {
font-size: 24px;
}
}
}
This method is correct or not?
Is there a method better than that?
For this #media query , this is the only way can be can be doing different screen size that set to specification settings by using css
It seems to be valid. I can show You how I like to handle RWD with #media
Create a mixin like so
#mixin breakpoint($point) {
#if $point == desktop {
#media (min-width: 70em) { #content ; }}
#else if $point == laptop {
#media (min-width: 64em) { #content ; }}
#else if $point == tablet {
#media (min-width: 50em) { #content ; }}
#else if $point == phablet {
#media (min-width: 37.5em) { #content ; }}
#else if $point == mobileonly {
#media (max-width: 37.5em) { #content ; }}
}
Use it like this
.podcasts {
margin: 1em auto;
#include breakpoint(phablet){
width: 100%;
}
}
It's just a suggestion, Maybe You'll like it :)
Yes, this is a valid method. Maybe you can also delete the duplicated check for #media (min-width: 280px), like this:
#media (min-width: 280px) and (max-width: 767px) {
.main-header .main-textmonial {
font-size: 11px;
}
#media (min-width: 320px) {
.main-header .main-textmonial {
font-size: 13px;
}
}
#media (min-width: 360px) {
.main-header .main-textmonial {
font-size: 15px;
}
}
#media (min-width: 411px) {
.main-header .main-textmonial {
font-size: 18px;
}
}
#media (min-width: 450px) {
.main-header .main-textmonial {
font-size: 24px;
}
}
}
But again the way you did it is valid for this #media query.
Currently I'm trying to change the padding of my landing page text, so it pushes my smooth scroll button to the bottom of the page. However the queries work up until (min-width: 600px), and they dont change higher.
Mixins Partial
#mixin for-phone-only {
#media (max-width: 599px) {
#content;
}
}
#mixin for-tablet-portrait {
#media (min-width: 600px) {
#content;
}
}
#mixin for-tablet-landscape {
#media (min-width: 899px) {
#content;
}
}
#mixin for-desktop-up {
#media (min-width: 1200px) {
#content;
}
}
Landing Page Partial
.welcomeTitle {
font-family: $landing-font;
font-size: $landing-header-size-l;
text-shadow: 1px 1px 15px #000;
padding-top: 20%;
#include for-phone-only {
font-size: $landing-header-size-sm;
}
}
.welcomeText {
#include for-desktop-up {
padding: 0 20% 21.5% 20%;
font-size: $landing-text-size-l;
}
#include for-tablet-landscape {
padding: 0 20% 20% 20%;
}
#include for-tablet-portrait {
padding: 0 20% 60% 20%;
}
#include for-phone-only {
padding: 0 20% 50% 20%;
}
}
So it applies the tablet portrait query, but when the width goes above 899px, it dose not apply the tablet landscape, or when it goes above 1200px, it dosent apply the desktop query.
Thanks :D
I have the following code both in two CSS tiles with different values (using LESS).
The CSS is linked in link tag in the header. The all.css is positioned before the override.css. The problem is that when I browse the site, I can't see any changes and it only uses the code in the all.css instead of overriding it with the one in override.css.
#subheader h1 {
font-size: 3vw;
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
}
How can I make so that the rules override without using !important?
There is no problem with the LESS compilation and it results in a correct CSS file, this is why I have no idea why it's not working.
You are using completely wrong syntax of writing css #media rule. Follow this w3schools link, the correct syntax should be:
#media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}
The correct code will be:
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
#subheader h1 {
font-size: 3vw;
}
}
#media screen and (min-width: 40em) {
#subheader h1 {
font-size: 3vw;
}
}
/* Large and up */
#media screen and (min-width: 64em) {
#subheader h1 {
font-size: 3vw;
}
}
Try this :
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
Is it ok to nest media queries inside an element? If I want to use min-width: 480px in another places there will be huge repetition. Please look at my code example. Or just use the old way? Any idea?
SASS
.navbar {
height: 500px;
width: 500px;
#media screen and (min-width: 480px) {
background-color: lightgreen;
}
}
.items {
padding: 15px;
color: red;
#media screen and (min-width: 480px) {
border: 1px solid black;
}
}
CSS
#media screen and (min-width: 480px) {
.navbar {
background-color: lightgreen;
}
.items {
border: 1px solid black;
}
}
$pc: 1024px; // PC screen size.
$tablet: 720px; // Tablet screen size.
$phone: 320px; // Phone screen size.
#mixin responsive($media) {
#if $media= phone {
#media only screen and (max-width: $tablet - 1) {
#content;
}
}
#else if $media= tablet {
#media only screen and (min-width: $tablet - 1) and (max-width: $pc) {
#content;
}
}
#else if $media= pc {
#media only screen and (min-width: $pc + 1) and (min-width: $pc) {
#content;
}
}
#else if $media= pc_tablet {
#media only screen and (min-width: $tablet - 1) {
#content;
}
}
}
Examples
body {
#include responsive(pc) {
background: red;
}
#include responsive(tablet) {
background: yellow;
}
#include responsive(phone) {
background: green;
}
}
I have viewed my page in every latest device available at the electronics shop.
I cant for the life of me get the fonts correct. Whats massive in latest samsung galaxy is tiny in latest ipad etc etc.
body {
font-size: 62.5%;
line-height: 1.45em;
}
.p {
font-size: 1.7em;
}
#media only screen and (max-width: 1280px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 1024px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 800px) {
.p {
font-size: 2em;
}
}
#media only screen and (max-width: 600px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
What the hell am I doing wrong?
Please help. Thanks
You can use Viewport to set the font size for many screen size.
here some info about it:
https://css-tricks.com/viewport-sized-typography/
Browser support list:
http://caniuse.com/#feat=viewport-units
Wild guess: .p should be p. You're selecting a class rather than an element.