Responsive css always applying landscape - html

I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design).
Anyone have an idea of what I'm doing wrong ?
Thank you !
Guillaume
**** edited new version: now working.
/* FOR MOBILE */
#media only screen
and ( max-device-width: 736px){
.coursBox1{
/* Useless CSS */
}
.coursBox1 h1{
/* Useless CSS */
}
}
#media only screen
and ( max-device-width: 736px)
and ( orientation: portrait){
.coursBox1 h1{
font-size: 10px;
}
}
#media only screen
and ( max-device-width: 736px)
and ( orientation: landscape){
.coursBox1 h1{
font-size: 100px;
}
}

You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator.
As a beginner, I would drop the logical operators and only work with the device-width property as this the key value in triggering your queries. Once you understand how this works in your browser, start adding the logical operators.
If you are looking to make adjustments to your font-size or anything else for mobile devices such as tablets and smaller, then you can use something similar:
/* This generally targets both tablets and phones */
#media (max-width: 1024px) {
h1 {
font-size: 21px;
}
// other styles targeted to tablet/phone devices
}
/* This generally targets phones sizes and smaller */
#media (max-width: 768px) {
h1 {
font-size: 18px;
}
// other styles targeted to phone devices
}
This is just a guideline.
See these resources for a range of devices out in the wild with their corresponding sizes:
- http://viewportsizes.com/
- http://www.mydevice.io/devices/
and some some pre-made media query snippets
- Media Query Standard Devices
CSS media queries - MDN

Related

How to make adjustments to only the mobile version?

Currently I am working on a website to gain some experience, but I struggle to make changes only to the mobile version. For example:
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
In order to make CSS changes for the desktop version I have:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
Now I want to hide the follow part on the mobile version:
<span>Are you ready to</span>
So what I tried is the following:
#media (min-width: 768px){
.intro-header__title {
display:none;
}
}
#media (min-width: 960px){
.intro-header__title {
display:none;
}
}
Unfortunately this does not seem to work. I have the same problem with text that is compressed on the mobile version. I would like to change the borders only on the mobile version and not the desktop version. Here is how it currently looks (compressed text due to borders):
You need to add the media type to the #media query (in this case "screen"). Your current rules are also only used on screens with a width of more than 768px or 960px. But you want to format the mobile version so you have to use the max-width instead of min-width:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
/** all screens up to 768px width */
#media screen and (max-width: 768px) {
.intro-header__title span {
display:none;
}
}
/** all screens up to 960px width */
#media screen and (max-width: 960px) {
.intro-header__title span {
display:none;
}
}
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
Note: You also use two media queries doing the same. So the first media query (max-width: 768px) isn't needed because the other media query do the same on a larger screen.
You can find a useful list of screen sizes for the different devices on StackOverflow: Media Queries: How to target desktop, tablet and mobile?

CSS media query order issue

I am updating a text element which ID has if7ou.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view.
So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.
#media (max-width: 480px) {
#if70u {
font-size: 20px;
}
}
#media (max-width: 992px) {
#if70u {
font-size: 40px;
}
}
I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!
I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.
#if70u {
font-size: 20px;
}
#media (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.
In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:
#if70u{
font-size: 14px; //Its apply for mobile
}
#media screen and (min-width: 768px){
#if70u{
font-size: 16px; //Its apply for tablets
}
}
#media screen and (min-width: 992px){
#if70u{
font-size: 18px; //Its apply for small desktop screens
}
}
#media screen and (min-width: 1200px){
#if70u{
font-size: 20px; //Its apply for large desktop screens
}
}
In addition to #S. Dunn answer.
If you want to set a style to specific minumum and maximum width you can use this:
#media only screen and (max-width: XXXpx) and (min-width: XXXpx)
So in your case it would be:
#if70u {
font-size: 20px;
}
#media only screen and (max-width: 992px) and (min-width: 481px) {
#if70u {
font-size: 40px;
}
}

How is min-width media query rule s mobile first approach

They always say that min-width #media rule is the way to build for mobile first, I have read plenty articles about it but i still can't understand how exactly min-width rule works> But the max-width is easy and lends itself to easy comprehension.
#media only screen and (min-width: 400px) {....some rule here.....}
#media only screen and(min-width: 900px){......some rule here....}
my question and confusion is: can one used both breakpoint on the same stylesheets? and how does it make for mobile first ?
I need a tolerable responses please, no down voting for those who enjoy down voting please be tolerable and nice enough to help put.
Indeed its true using min-width helps to make a web mobile first.
Let us take an example.
We are creating a web that will scale to two viewports say 300px, 300px+ devices.
1) using min-width
body {
background: yellow;
}
// 300px+ devices
#media (min-width: 300px) {
body {
background: red;
}
}
Here background-color is been overridden for 300px+ devices
2) using max-width
body {
background: red;
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Here background-color is been overridden for 300px- devices
Now down the line in your App timeline you need to support 600px+ devices
3) using min-width
body {
background: yellow;
}
// 300px - 600px devices
#media (min-width: 300px) {
body {
background: red;
}
}
// 600px+ devices
#media (min-width: 600px) {
body {
background: green;
}
}
New media query added to support 600+ devices, no changes needed in the existing style sheet.
4) using max-width
body {
background: green;
}
// 600px- devices
#media (max-width: 600px) {
body {
background: red;
}
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Although we needed additional media-query rule to support 600+ devices, but we needed to change the global body background-color to support new breakpoint.
Now compare 1) with 3) and 2) with 4) ,
you will notice to support new breakpoint
for 1 to 3 we didn't need to change existing style rules, just added new rules over it.
but for 2 to 4 existing rules were modified to support new breakpoint
Summary
so min-width ensures future friendly and progressive enhancement (mobile-first)
but max-width leds to short-sighted approach and needs degradation (mobile-last)

Angular Material Design text size change

I'm using https://material.angularjs.org/latest/ to make my site responsive. For different screen sizes, I want my font size to change for example,
for small screen, I want font size to be 5px and for greater than medium, 14px.
I have done this so far but font size does not change:
<h3 class=".md-display-1">John</h3>
its css:
#media (max-width: #flex-sm) {
body{font-size: 2px;}
}
#media (max-width: #flex-gt-md) {
body{font-size: 30px;}
}
You have some issue with your code.
0 - You are NOT using the class:
<h3 class=".md-display-1">John</h3>
You must change it to:
<h3 class="md-display-1">John</h3>
Without the dot. The dot is only to indicate it is a class. And when is id we use #.
1 - You are using variables in CSS. The CSS doesn't support variables. Less/Sass support variables. But if you are using css. You must write the sizes. The standard sizes in Bootstrap are:
/* Extra small devices (phones, less than 768px) */
#media (max-width:767px) {
body {font-size: 2px;}
}
/* Small devices (tablets, 768px and up) */
#media (min-width:768px) {
body {font-size: 10px;}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width:992px) {
body {font-size: 20px;}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width:1200px) {
body {font-size: 30px;}
}
2 - Remember use AngularMaterial CSS. They include the Tipography docs in its page: https://material.angularjs.org/latest/CSS/typography . Check there. They use 10px as base. And use em to expand based on clasess.

What is the "correct" logical way of building good responsive design with CSS3?

So I've dived into 'Responsive Design' and have gotten a fair understanding of how this works. However there are specifically two things I need to get my head around.
My "logical" way of thinking is like this: If screen size is less than 320px, then do A, if screen size is less than 480px do B.
#media only screen and (max-width: 320px) { Do one thing here}
#media only screen and (max-width: 480px) { Do another thing here}
The problem with this is that css in max-width: 480px is also affected if screen width is less than 320.
When I look at examples, I see they are using something like:
#media only screen and (min-width: 290px) {}
#media only screen and (min-width: 544px) {}
#media only screen and (min-width: 960px) {}
This basically says that is screen is larger than 290px, do this and if screen is larger than 544px, do that. But I will get the same problem here. Code in min-width: 290px will also be used in any screen size larger than 290px.
So the only solution I can think of that will only work for a specific screen range, is using this:
#media only screen and (max-width: 320px) {}
#media only screen and (min-width: 321px),
only screen and (max-width: 480px){}
#media only screen and (min-width: 640px),
only screen and (max-width: 481px){}
Can anyone advice me on this?
Looking at examples, I see a loot of "redundant" code. Much of the same code is repeated, just having different values:
#media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav li:last-child a, nav li:nth-child(4) a { border-right: none; }
nav li:nth-child(5) a { border-bottom: none; }
}
#media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a { border-right: none; }
nav li:nth-child(5) a { border-bottom: 1px solid #fff; }
}
For large sites, I can just imagine that this will create a lot of code and large CSS files.
Is this becoming the new standard as we have to work with responsive design?
Would it be an option to do following?:
#media only screen and (min-width: 640px) { #import url("css/640.css");}
For a start you're writing/referencing slightly more code than is necessary.
For example:
#media only screen and (min-width: 321px),
only screen and (max-width: 480px) {
can also be written as:
#media only screen and (min-width: 321px) and (max-width: 480px) {
You should never be repeating CSS inside a media query, anything that is set for any screen size, for example background colour or font-family should be set outside of any media query. This means it is only wrote once and applies to them all. Inside each media query should only be code that only affects that specific size. (e.g. widths, font-sizes, etc)
I wouldn't recommend importing css files and the like, just put it all into one, with global styles at the top, and then screen size specific styles inside media queries underneath that. Don't be put off by large css files, it is easier/quicker to download one 10kb file, than ten 1kb files.
I made an example .css file to show you here. Note this would create a horrible site, it is just intended to show you how you could layout code and what goes where.
The example above assumes browser support of media queries. Without it the site would fall on its arse. If you aren't 100% sure of media query support (and aren't using Respond.JS) I would recommend putting the desktop site in the global styles, then overwriting as unnecessary to ensure a fallback for non-supporting browsers
What you wrote is pretty much a way to do it. but like BoltClock says, you have many ways to make a responsive website.
Altho, to avoid 'double' css, you can also make a main css file. Those things that don't need to change in the whole website - no matter what screensize - goes into this file. (for example your font). Besides that your css files will indeed be 'huge' depending on how far you want to go with responsive.
For answering your question if this will be the new standard...it still depends on the owner of the website, if he wants to support mobile friendly websites or not.
I hoped this helped a bit :) good luck!