Zurb Foundation crashes with Bootstraps on screen sizes, eg:
#media only screen and (min-width : 320px) {
.button-home {
margin-bottom: 20px;
border: 1px solid red;
}
}
This code won't work when Zurb Foundation is included.
How can avoid/ fix this?
Or better how do I convert that code to Foundation?
I need Bootstrap and Foundation to be present on my site at the moment.
Notes:
The red colour should present only on smaller screens. now it is present on all screen sizes.
I have Foundation loaded after Bootstrap.
I am on "bootstrap": "^3.3.7", "foundation-sites": "^6.3.0-rc1"
This is my error:
/* Small Devices, Tablets */
#media only screen and (min-width : 320px),
#media only screen and (min-width : 480px),
#media only screen and (min-width : 768px) {
.button-home {
margin-bottom: 20px;
border: 1px solid red;
}
}
Now works with:
#media only screen and (max-width : 768px) {
.button-home {
margin-bottom: 20px;
border: 1px solid red;
}
}
Related
I have 3 open intervals of screen width now. They are (0,600], (600,800) and [800,1000] and each has a diffferent css style. For example:
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
But how should I express (600,800) with ccs media query ?
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 600px) and (max-width: 800px){
background: #fff
}
You can use 3rd media query.
Start with a default value, which is the value of the mobile first. Then modify the values from a minimum with and up:
HTML:
CSS:
.bg {
width: 100vw;
height: 100vh;
background-color: #000;
}
#media screen and (min-width: 600px){
.bg {
background-color: steelblue
}
}
#media screen and (min-width: 800px){
.bg {
background-color: tomato
}
}
#media screen and (min-width: 1000px){
.bg {
background-color: #2c3e50;
}
}
#media (max-width: 1000px) {
background: #eee;
}
#media (max-width: 800px) {
background: #fff;
}
#media (max-width: 600px) {
background: #000;
}
This order will execute based on screen size and CSS will be applied accordingly.
You can define these interval for media queries link below:
#media screen and (min-width: 801px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 601px) and (max-width:800px){
background: #cccccc
}
#media screen and (max-width: 600px) {
background: #000
}
Now
The first media query will work from 0px to 600px
The second one will work 601px from to 800px
And the Third one will work from 801px to 1000px
My font for my headers is 60px and I am trying to reformat to be able to shrink or make it responsive for mobile so the words are not cut off in the middle of the word.
Thanks very much!
This is the code:
h1 {
font-size: 4.286em; /* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
/* Portrait and Landscape */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
You are close, just add the h1 changes inside each media query, and also you are missing a closing tag on your original h1 style.
h1 {
font-size: 4.286em; /* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
}
/* Portrait and Landscape */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
h1 {
font-size: 4em; /* a little smaller*/
}
}
/* Portrait */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
h1 {
font-size: 3.5em; /* a little smaller*/
}
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
h1 {
font-size: 3em; /* a little smaller*/
}
}
What I have done is actually make markup using the same media queries you used and just made different background colors for you to know that they all are working. the css below will show you which screen will show which color background based on the screen sizes:
/*This will be anything thats not mobile. it will show a green background*/
body {
background: green;
}
h1 {
font-size: 4.286em;
/* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
color: #fff;
}
/* Portrait - portrait devices will be purple based on your dimension*/
#media only screen and (min-device-width: 240px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
body {
background: red;
}
h1 {
font-size: 4.286em;
/* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
}
}
/* Landscape - landscape devices will be purple based on your dimension*/
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
body {
background: purple;
}
h1 {
font-size: 4.286em;
margin-bottom: 24px;
width: auto;
text-align: center;
}
}
The HTML I used for this test:
<h1>This Is a Heading Tag</h1>
Note that you might need to change the demensions a little to make it work for all becuase i noticed that some phones have larger screens than the size you used. e.g- my huawei landscape falls back to green while my iphone 4s landscape falls back to purple but this is just us showing you that your code should work.
What you need to do to emulate is open chrome and the developer tools F12 and you will see when the console opens, on the top left you will see a phone icon, click on that and then your screen will change. you see the drop down of the phones on the top left? choose the phone and the checkbox next to it to get the landscape mode to see the different variations i mentioned ealier.
Hope this clears, i will gladly help if you need more help. Link to a place i hosted your code update - http://coreb.co.za/lab/design/mediaQueries/
Remember that in essence this style should make anything that's not a mobile landscape or portrait green based on your demensions and then if the demensions are met then you should be able to see the iphone 4 is red and is correct and landscape purple, you just need to make the correct sizes as i mentioned earlier but I'm here to help if need be
Good Luck
I'm trying to make my coded buttons for pdfs/mp3s/mp4s not stack on each other in a asymmetrical way when the browser is faced with a different screen size. For example, when the screen size changes from large desktops approximately 1200px wide to tablet res of 1024px to 768px (landscape/portrait), the buttons stack on each other in a way that looks inefficient/unintended. See for yourself:
http://www.mannachurch.org/portfolio-type/insights-from-the-bottom-bunk/
Try moving the browser to something that would fit a 13 inch or a tablet and you get what I mean. This is just for the buttons, everything else looks fine.
I'm trying to resolve this issue using this media query code on that wordpress site in my header.php file:
/* iPhones ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px){
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
#media all and (min-width: 250px) and (max-width: 400px) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/* iPad in landscape----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/* iPad in portrait----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/*Larger screens -----------*/
#media only screen and (min-width : 1024px) and (max-width: 1224px) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
It will not make those buttons do anything different!!
What am I doing wrong? Wordpress is frustrating enough because it's layered with an endless piles of CSS files. But I'm strugging to see why I can't grab these and make them work with media queries. I'm pretty sure my declarations are correct. Any suggestions?
Omit spaces in your CSS declarations like this a.btn.pull-left.
All wordpress themes come with their own style.css file. Instead of putting css in a php file (header.php), you should edit the .css file. Your button overrides should work there.
Most themes also have their own custom css field in theme options as well if you do not feel comfortable editing style.css in the editor. It's the same thing though.
I am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.
By default I want to give my body element a green border. On a device that supports retina display I want to check for size first. On an ipad I want to give my body a red border and on an iphone I want to give it a blue border. But nesting media queries like so doesn't work:
body { border: 1px solid green; }
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#media (max-width: 768px) and (min-width: 320px) {
body { border: 1px solid red; }
}
#media (max-width: 320px) {
body { border: 1px solid blue; }
}
}
No. You need to use the and operator and write that as two queries. You can, however, do this in SCSS, which will compile to CSS, but it will combine them by unfolding them and using the and operator.
This is a common problem, and once I first wrote LESS or SCSS, I didn't ever want to go back to writing this long-hand.
Long-handed CSS:
#media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
(min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
body {
border: 1px solid red;
}
}
#media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
(min-resolution: 192dpi) and (max-width: 320px) {
body {
border: 1px solid blue;
}
}
Nesting queries may work, but support varies across browsers.
In 2020, yes!
Actually the accepted answer has been outdated for a long time now. I'm not even sure if it was technically correct even at the time of posting. Firefox has supported nesting since 2012 and Chrome since 2013 (source).
You should expect support from all major browsers now, of course with the usual exception of IE.
You can test it using the following HTML and CSS. Just open up dev panel in your browser and vary your viewport width.
#abc {
background: green;
}
/* width < 801px */
#media (max-width: 800px) {
#abc#abc {
background: red;
}
/* 500px < width < 801px */
#media (min-width: 500px) {
#abc#abc#abc {
background: yellow;
}
}
}
<div id="abc">Example text</div>
Alternatively, check out this codepen.