I set a width of 70% on my , which looks ok, but for mobile screens it wouldn't hurt if the width was higher, say 90%.
So my question is... Is there a way to make the site's width higher percentage if the screen is smaller?
You should use media query for that:
div {
width:70%;
}
#media only screen and (max-width: 500px) {
div {
width:90%;
}
}
Get a head start on media queries
Or use a framework like bootstrap
Using bootstrap, you can achieve that using:
<div class="col-md-10 col-md-offset-1 col-xs-12">blah blah</div>
A little light reading on media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.content {
width: 70%;
}
#media (max-width: 600px) {
.content {
width: 90%;
}
}
You can combine your size media query with a resolution media query:
#media (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browser */
(max-width: 600px) and (min-resolution: 2dppx), /* The standard way */
(max-width: 600px) and (min-resolution: 192dpi) /* dppx fallback */
Related
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
I'm using Bootstrap with lots of media queries for responsive design. For a given div, I start using bootstrap's col to set width and margin:
<div class="col-xs-6 col-xs-offset-3" id="special">
But in certain cases and in certain cases only, I want to further add my own styling, as below:
#media only screen and (orientation:landscape) and (min-width : 320px) {
.special {
width:40%;
}
}
#media only screen and (orientation:landscape) and (min-width : 768px) {
.special {
width:"go back to using bootstrap col";
}
}
My problem as you can see from the above, is that as the media query builds, on the next size up, I'm not sure how to say... go back to using the bootstrap col. I tried width:auto and width:initial but those did not work
It generally a bad idea to alter dimension when you are using a grid system, because that's all grid system is build for.
Simply by reading your example is a little unclear because there are couple conditions in your code:
width > 320
width > 768
width between 320 ~ 768
orientation is landscape
orientation is not landscape
However, media query is and additional expression for your selector, it will use what you already have if YOU DO NOT SPECIFY the OTHERWISE. so for example
/* from bootstrap */
.col-xs-6 {
width: 10 % ;
}
/* your override */
#media only screen and(orientation: landscape) and(max-width: 768px) {
#special {
width: 40%;
}
}
By applying this, div will have width of 40% when device is landscape + width is less then 768px (sorry i can't tell your intention by reading your code), it use col-xs-6 or col-xs-offset-3 otherwise.
Merge them both into one media rule
#media only screen and (orientation:landscape) and (min-width : 320px) and (max-width : 768px) {
.special {
width:40%;
}
}
Like this:
#media only screen and (min-device-width: 320px) and (max-device-height: 768px) and (orientation : landscape)
I am coding a site with AngularJS and SCSS. I am in the mobile-phase of development and I quickly discovered (for this project) that I needed a way to target multiple breakpoints using a #media query. So I found via this SO answer and this CSS Tricks Post as well as multiple other answers on SO. Then I implemented the solutions I found into a test-case, see snippet below for the test.
main {
background-color: grey;
height: 100%;
min-height: 1000px;
#media (max-width: 992px) {
background-color: red
}
#media (max-width: 768px) {
background-color: lightcoral
}
#media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
#media (max-width: 768px),
(max-width: 768px) and (orientation: landscape) {
background-color: lightblue;
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
But I haven't been able to get it to work. What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone. However, I don't know if I am doing it right, or using the or operator correctly.
It plain doesn't work, well, the first statement (for example: (max-width: 992px)) works, but the second one doesn't evaluate to true. According to Mozilla:
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. --- Mozilla Documentation
Even if I break the code into two separate media queries:
#media (max-width: 992px) {
background-color: lightgreen;
}
#media (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
It still doesn't work. So I don't know if I am targeting the wrong width (when in landscape) or what I am doing wrong. Can any other Front-End developers out there tell me why my comma seperated media queries aren't working?
EDIT: Here is the native SCSS code:
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
#media
(max-width: map_get($grid-breakpoints, 'lg')),
(max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){
background-color: lightgreen;
}
#media
(max-width: map_get($grid-breakpoints, 'md')),
(max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){
background-color: lightblue;
}
#media
(max-width: map_get($grid-breakpoints, 'sm')),
(max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){
background-color: lightcoral;
}
}
EDIT: Per the recommendation of #Godwin, I simplified my #media queries to this:
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
#media screen and (max-width: map_get($grid-breakpoints, 'lg')) {
background-color: lightgreen;
}
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
background-color: lightblue;
}
#media screen and (max-width: map_get($grid-breakpoints, 'sm')) {
background-color: lightcoral;
}
}
However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.
However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.
I'm not sure what you're defining by it since you're not hiding anything in your examples so I'm gonna refer to:
What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone.
Orientation on MDM is defined as the following:
This value does not correspond to actual device orientation.
It just indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
You said your iPad in landscape has a resolution of 1024x768, so to target an iPad or a phone in landscape mode, you can set a media query targeting all devices having a maximum width of 1024px and being in landscape mode (the display is wider than it is tall):
main {
background-color: grey;
height: 100%;
min-height: 1000px;
width: 100%;
#media screen and (max-width: 1024px) and (orientation: landscape) {
background-color: lightblue;
}
}
You can check an example on this codepen.
If your viewport has a width greater than 1024px, the main element will be grey no matter what.
If you resize your browser window to have a viewport with a width equal or less than 1024px, and have a viewport considered in landscape (the display is wider than it is tall), for example an iPad in landscape mode (1024x768), the media query will trigger and apply a blue background:
If you resize your browser window to still have a viewport with a with equal or less than 1024px but have an height greater than your width, the viewport is no longer considered to be in landscape mode but switch to portrait mode. At this time, the media query is no longer be triggered and we fallback to a grey element:
So regarding your question, the example is a media query to apply styles to the user using a tablet or phone in landscape mode.
Here is a solution .Hope this will work for you
main {
background-color: grey;
height: 100%;
min-height: 1000px;
}
#media (max-width: 992px) and (orientation:portrait) {
main{
background-color: red
}
}
#media (max-width: 768px) and (orientation:portrait) {
main{
background-color: lightcoral
}
}
#media (max-width: 992px) and (orientation: landscape) {
main{
background-color: lightgreen;
}
}
#media (max-width: 768px) and (orientation: landscape) {
main{
background-color: lightblue;
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.
However, my first CSS media query:
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {
background: #000;
}
Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.
Here is the code for my website: http://jsfiddle.net/F6Xbp/
Originally I did have a media statement that said:
#media only screen and (max-width: 479px) {
}
This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.
I look forward to hearing some replies and no doubt I'm overlooking something so simple here.
Keith :-)
Updated jsFiddle
You need to put the code you want to change within the #media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
background: #000;
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {
background: red;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {
background: green;
}
}
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (min-width: 959px) {
body {
background: blue;
}
}
I made it work: http://jsfiddle.net/F6Xbp/1/
Technique 1
#media screen and (max-width: 480px) {
body { background-color:black; }
}
Technique 2
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { background-color:black; }
}
For the difference between max-width and max-device-width, see this.
I am using this media query for target viewport max-width of 800px devices mininmum with of 400px
#media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}
And i need to change the color in the landscape orientation for this i use this code
#media screen and (orientation:landscape)
{
body {background:red;}
}
its working good in the device but the background red applies for pc browsers also how to apply background red in devices landscape orientation only?
Thank you.
You aren't choosing an element to apply the background to
#media screen and (orientation:landscape)
{background:red;}
Should be something like:
#media screen and (max-device-width: 1000px)
and (orientation:landscape){
body {
background: red;
}
}
The max-device-width should make it ignore desktops, if you don't put device in there, it will still affect desktops that have made their browser smaller.
try in this way
#media screen and (max-width: 800px)
and (min-width: 400px) {
body {
background: white;
}
}
#media screen and (max-width: 800px)
and (min-width: 400px)
and (orientation:landscape) {
body {
background: red;
}
}
or try to detect handheld-only devices looking at the min-resolution value as in http://jsbin.com/irozuf/1/edit - e.g.
#media screen and (max-width: 800px)
and (min-width: 400px)
and (min-resolution: 97dpi) /* a typical screen has 96dpi */
and (orientation:landscape) {
body {
background: red;
}
}
Looking at this list of displays by pixel density it seems that it could work fine on modern mobile devices
if you add these meta tags to head of page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
so the key: "width" means same "device-width".so,
#media screen and (max-device-width: 1000px){}
is equal to
#media screen and (max-width: 1000px){}
use each one you like:
[meta tags with key "width"]
OR
[no meta tags but "device-width"]