I set a media query to change properties of my #secondary wrapper
This is the media query I set
#media screen and (max-width: 767px) {
.left-sidebar #secondary {
float: right;
width: 100%!important;
}
The problem is its not applying those changes until 479px even though i set it to 676px;
When i look in dev tools in google to view the css it looks like this
#media (max-width: 479px)
#media screen and (max-width: 767px)
.left-sidebar #secondary {
float: right;
width: 100%!important;
}
Why could this be happening and how do i fix it?
It looks like your issue is missing braces on your media queries. I usually find it helpful to indent everything within a media query so this doesn't happen by accident.
#media screen and (max-width: 767px) {
.left-sidebar #secondary {
float: right;
width: 100% !important;
}
}
Instead of
#media screen and (max-width: 767px) {
.left-sidebar #secondary {
float: right;
width: 100%!important;
}
Related
I am writing a media query for a web-page and managed to write media queries for 768 and below. But it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working for 768px and above but not working for media query below 768px
#media (min-width:481px) and (max-width:768px) {
.navbar-brand{
margin-left: 80px;
}}
#media (min-width: 768px){
.navbar-brand{
margin-left: 100px;
}
#media (min-width: 991px){
.navbar-brand{
margin-left: 150px;
}}
Here in this example margin left property working very well on min-width: 768px and min-width:991px but not working on #media (min-width:481px) and (max-width:768px).
You are missing a curly bracket to close of your media query for min-width: 768px. Here's the final code with formatting to more easily see it.
#media (min-width:481px) and (max-width:768px) {
.navbar-brand {
margin-left: 80px;
}
}
#media (min-width: 768px) {
.navbar-brand {
margin-left: 100px;
}
}
#media (min-width: 991px) {
.navbar-brand{
margin-left: 150px;
}
}
For capturing screensizes that is 320px with a specific margin you can either remove (min-width:481px) and from your first media query if the same styling should apply or add a media query specific for that case:
#media (max-width: 320px) {
.classname {
enter some code here
}
}
Please take a look and confirm below media queries with updated code.
#media only screen and (min-width: 768px) {
.navbar-brand {
margin-left: 100px;
}
}
#media only screen (min-width: 481px) and (max-width:767px) {
.navbar-brand {
margin-left: 80px;
}
}
I am using this code in my web page and I tried different settings for min-width but it take values only from the media query having least width.
#media only screen and (min-width: 900px) {
li{
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.one{
padding-left: 13%;
}
#media only screen and (min-width: 800px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;}
li.two{
padding-left: 9%;
}
}
#media only screen and (min-width: 600px),screen and (max-width: 601px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.three{
padding-left: 7%;
}
}
Don't know what is stopping other queries to work properly.
Please add this code in your HTML page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.) Your third query should be written like this:
#media only screen and (min-width: 600px) and (max-width: 601px) {...
(a comma would mean two independent selectors)
2.) You made your li elements inline elements. But an inline element can't have any padding - all these padding values don't affect anything. So change the display settings to inline-block for these.
The order of query sizes should be changed. In CSS, the last valid query wins, so the query falls though to the smallest. The largest should come last.
#media (min-width: 768px) {} works for me. also add <meta name="viewport" content="width=device-width, initial-scale=1"> to head tag
#media screen and (min-width: 320px) {
//your css class
}
#media screen and (min-width: 321px) and (max-width:480px){
//your css class
}
#media screen and (min-width: 481px) and (max-width:720px) {
//your css class
}
#media screen and(min-width: 721px) and (max-width:1080px) {
//your css class
}
#media screen and(min-width: 1080px) and (max-width: 1280px){
//your css class
}
#media screen and (min-width: 1281px) and (max-width: 1920px){
//your css class
}
Try using your queries like this, this way worked for me
You have left one curly bracket inside 900 media query. Copy this code and replace media query.
#media only screen and (min-width: 900px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.one{
padding-left: 13%;
}
}
#media only screen and (min-width: 800px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.two{
padding-left: 9%;
}
}
#media only screen and (min-width: 600px) and (max-width: 601px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.three{
padding-left: 7%;
}
}
add this to in your head tag and close proper media query braces you didnt close do check properly.
Ive been trying to make a change of my category images depending on screen size. But right now only the first screen width size are being used. It seems as though the other ones are being overridden by the first row of code (max-width: 769px). (on this site: http://origami.directory/)
What can I do so it changes 3 times as it should do?
.category-list-item {
float: left;
padding: 1em;
}
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
};
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
};
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
};
If someone could help me fix this I would be super grateful!
/ Martin
Remove the extra semi-colon ; from the end of your queries.
Your queries should be like this:
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
}
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
}
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
}
Your queries are conflicting with each other making the second query obsolete. Specify a range for each like this:
#media (max-width: 480px) {
.category-list-item{width: 33.33%;}
}
#media (min-width: 481px) and (max-width: 768px) {
.category-list-item { width: 25%; }
}
#media (min-width: 769px) {
.category-list-item { width: 20%; }
}
I'm not very sure with the min-width:769px part so just let me know what exactly are you trying to do and I'll fix that accordingly. The above is just to show you how queries work basically.
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.
I have responsive design with Bootstrap 3.x and I'd like to do some magic when it comes to modal dialogs.
In particular, I'd like to have class .modal-75p which would set my modal width to 75% of the width of the current container.
I know that Bootstrap LESS files have variables such as #container-lg, #container-md etc. but I'd like to build my LESS mixin against current container, no matter which variable is it using in return.
So if container is currently 1170px, I'd get 3/4 of it = 878 px. If it's down to 970px, I'd get 728px, etc.
Is it possible to do?
You can use media queries and Bootstrap's Less variables to solve this.
First take a look in modals.less:
// Scale up the modal
#media (min-width: #screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: #modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: #modal-sm; }
}
#media (min-width: #screen-md-min) {
.modal-lg { width: #modal-lg; }
}
Variables in the above are defined in variables.less and by default:
#modal-lg: 900px;
#modal-md: 600px;
#modal-sm: 300px;
Now you can redeclare (declare after the import of modals.less in bootstrap.less) the variables mentioned above, write new media queries and recompile bootstrap:
#modal-lg: (#screen-lg - #grid-gutter-width)*0.75px;
#modal-md: (#screen-md - #grid-gutter-width)*0.75px;
#modal-sm: (#screen-sm - #grid-gutter-width)*0.75px;
.modal-dialog {
width: 75%;
#media (min-width: #screen-sm-min) {
width: #modal-sm;
}
#media (min-width: #screen-md-min) {
width: #modal-md;
}
#media (min-width: #screen-lg-min) {
width: #modal-lg;
}
}
The above will compile into (CSS):
.modal-dialog {
width: 75%;
}
#media (min-width: 768px) {
.modal-dialog {
width: 553.5px;
}
}
#media (min-width: 992px) {
.modal-dialog {
width: 721.5px;
}
}
#media (min-width: 1200px) {
.modal-dialog {
width: 877.5px;
}
}
update
After reading your question again. #container-sm is NOT defined as #screen-sm - #grid-gutter-width but:
((720px + #grid-gutter-width));
So use the Less code show below for better results:
#modal-lg: #container-lg * 0.75px;
#modal-md: #container-md * 0.75px;
#modal-sm: #container-sm * 0.75px;
.modal-dialog {
width: 75%;
#media (min-width: #screen-sm-min) {
width: #modal-sm;
}
#media (min-width: #screen-md-min) {
width: #modal-md;
}
#media (min-width: #screen-lg-min) {
width: #modal-lg;
}
}