I've been tasked with developing a wordpress site for my company with almost 0 web development experience. I've been fiddling with CSS a bit and I've come up with this steaming pile of trash.
Anyways, I only need to develop it for 3 resolutions (Company standards). However, auto-scaling websites are complete magic to me. So I've decided to hardcode elements for each of 3 specific resolutions (1920x1080, 1440x900, 1024x768).
Here's the code:
768 Users
#media (min-width : 768px)
{
.sidebar
{
right: 115px;
bottom: 40px;
}
}
900 Users
#media only screen and (min-width : 900px) and (max-width: 900px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
1080 Users
#media only screen and (min-width : 1080px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
Diagram
Question:
The issue is, the hardcoded scaling I've done only works for
the /768 Users/ and the /1080 Users/.
Every change I make in the /900 Users/ section does nothing, how do I fix that?
In your code, (min-width : 900px) and (max-width: 900px) will only target a width of exactly 900px, which is not desirable.
One technique is to use a "mobile-first implementation" in which you start with the smallest size first and work your way up. Think of it as styling for the smallest viewports first and then adding to those styles for increasingly larger viewports.
For example:
/* start with smallest "mobile viewport" styles here, as a default */
#media (min-width : 768px) {
/* add styles for 768px and up */
}
#media (min-width : 900px) {
/* add styles for 900px and up */
}
#media (min-width : 1080px) {
/* add styles for 1080px and up */
}
You might find this article informative: An Introduction to Mobile-First Media Queries
#media only screen and (min-width : 900px) and (max-width: 900px) meaning from 900px to 900px.... so nowhere at all.
If I understand your problem correctly, this should work:
#media only screen and (min-width : 900px) and (max-width: 1080px)
Your going to use CSS3 media queries to essentially define each viewport you are supporting; and from within write your styles per. There a few ways to call this - but I've found the below the simplest to test starting out... You will also have to make sure your meta viewport tag from within the HTML doc is properly defined.
#media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}
Related
On my shop page on tablets and phones in landscape mode, not all products are shown next to each other. They leave gaps, so sometimes there are two products and sometimes just one product in a row. I tried around with CSS and couldn't find a solution. My goal is to have them all next to each other and display a minimum of 2 in a row on portrait phones, instead of one. How can I do this?
Here's my site: https://malimo.co/shop/
If you open the website on a computer screen, just make the browser window smaller and you will see it)
You set width of products to 50% + margin. That is more than width of screen.
On landscape you have this
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3:nth-child(3n) {
margin-right: 15px;
}
change it to 0px
or change 50% to lower value. For example 46%.
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
width: calc(50% - 7.5px);
}
i think you should set margin-right to 10
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {`
width: calc(45% - 7.5px);
}
i think this will sort the issue. set margin-right to 0
#media (max-width: 992px) and (min-width: 768px)
{
.theme__product__item--col__3:nth-child(3n) {
margin-right: 0;
}
}
I am struggling with a website regarding media queries. I have this code snippet as part of my menu
.flexnav.flexnav-show {
margin-top: 52px; } line 513 in my css
and with a media query set at #media all and (min-width: 800px) I have this code snippet for my tablet.
.flexnav.flexnav-show {
margin-top: 0px; } on line 638 in my css
However, when viewing the page on a tablet the margin-top is still set at 52px.
I have a similar issue with a another media query. I have this following code snippet
#media only screen and (min-width: 481px)
header hgroup {
top: 12%;
}
For my desktop I have the following:
#media only screen and (min-width: 769px)
header hgroup {
top:15%;
} at line 462
When on the desktop the top is still 12%
This is the link to the website.
Thanks
-Sohail
You need to use "max-width"
EXAMPLE:
/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
#media screen and (max-width: 769px){
.some-div{ top:15%;}
}
#media screen and (max-width: 481px){
.some-div{ top: 12%;}
}
Sometimes you can use "!important" to rewrite the previous state in CSS but is not necessarily.
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
Bootstrap includes some default media queries that look like this:
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
Why don't these include the max-width variable? Is that inherently implied by just using min-width, i.e. does CSS just simply "know" to take the highest min-width possible?
It has to do with logic.
TL;DR: See it as if/else statements in you code. You only add the max if you want a max specified.
You can read it like this:
#Div{ color: green; }
#media (min-width: 992px) {
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width at least 992px ) BG -> pink
If you would have maxwidth it goes with the same logic, only as maximum.
If you have both:
#Div{ color: green; }
#media (min-width: 500px) and (max-width: 992px){
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width atleast 500px AND a maximum of 992px ) BG -> pink
Easy demo for max-width, make something tablet resolution only (asuming everything 1024+ is desktop):
#media (min-width: 1024px) { /* ... */ }
There is a tendency to design for the smaller screen (ie. mobile) first and use media queries to target larger screens (ie. desktop) users. This is what you are seeing in the Bootstrap CSS.
The main stylesheet applies to the mobile browser (in fact all browsers). Then a media query is used to target slightly larger screens to apply specific rules:
#media (min-width: 992px) {
This targets window sizes greater than (or equal to) 992px (ie. whose minimum width is 992px).
There is no max-width specified here, so this applies to all large windows.
I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand
my queries requirement is
if screen width is 100 to 480 then different style comes,
if screen width 481 to 600 then different style comes,
if screen width 601 to 800 then different style comes,
if screen width 801 then default CSS should work.
.class { /* default style */ }
#media (min-width: 100px) and (max-width: 480px) {
.class { /* style */ }
}
#media (min-width: 481px) and (max-width: 600px) {
.class { /* style */ }
}
#media (min-width: 601px) and (max-width: 800px) {
.class { /* style */ }
}
The basic relies on using this kind of queries:
#media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make
your site pretty on this range.*/
}
Please remember that when using responsive web design you should use percentages when possible also em for fonts.
media queries are now available for IE.
take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them.
A polyfil I been using with good results is response.js
I believe something along the lines of:
#media screen and (min-width: 100px) and (max-width: 480px)
{
/* Change main container '.wrapper' */
.wrapper
{
width: 100px;
}
}
#media screen and (min-width: 480px) and (max-width: 600px)
{
.wrapper
{
width: 480px;
}
}
..etc