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.
Related
#media only screen and (min-width: 275px)
{
body
{
background-color: black;
}
}
I want to make the background color black when it detects 275px - 500px and i want to make the background color blue when it detects 500px - 750px.This is a reference only simply i want to make css codes with different ranges
Also you can write first media query only min width because another media query also set min width.
#media only screen and (min-width: 275px) {
body {
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px) {
body {
background-color: blue;
}
}
Just add a max-width to complete the range:
#media only screen and (min-width: 275px) and (max-width: 500px)
{
body
{
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px)
{
body
{
background-color: blue;
}
}
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 have CSS below. My screen resolution is 1280x800. Why is my class .landslide not getting the margin value 10%? Right now it's always getting 18%? Even my screen resolution was 1280x800 which should be matching the max-height:800px.
What am I doing wrong?
#media (max-width: 1380px), (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}
#media (max-width: 1380px), (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}
Reverse the rules, otherwise the second one will always overwrite the first one:
#media screen and (max-width: 1380px) and (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}
#media screen and (max-width: 1380px) and (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}
I'm building a responsive site but when I resize the window the media queries aren't corresponding with my screen resolution, so for instance,
#media screen and (min-width:640px) and (max-width: 800px) is resulting in these design elements to be when the screen is above 800 pixels and when I'm at 700 pixels my designs are being set to #media screen and (min-width: 400px) and (max-width:640px) for some reason. Does anyone know why this could be happening?
Update: The max-width 640px media query is being set to my screen at over 700 pixels still.
#media screen and (max-width: 1024px) {
.body{
width:800px;
}
}
#media screen and (max-width: 800px) {
.body {
width:600px;
}
}
#media screen and (max-width:640px) {
.body {
width:480px;
}
}
#media screen and (max-width:400px) {
.body {
width:260px;
}
}
To start troubleshooting, double check that in the head of your document you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Let me know how you get on.
Edit
Thanks for the extra code. Check out this working example. The CSS and the order of the media queries is below:
/* set default */
.body{
width:800px;
}
#media screen and (max-width:400px) {
.body {
width:260px;
}
}
#media screen and (min-width: 401px) and (max-width:640px) {
.body {
width:480px;
}
}
#media screen and (min-width: 641px) and (max-width: 800px) {
.body {
width:600px;
}
}
#media screen and (min-width: 801px) and (max-width: 1024px) {
.body{
width:800px;
}
}
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;
}
}