I'm currently trying to create a website with different media queries for different device sizes, the problem is, when I add a media query in the media-queries.css file for a different viewport the browser only reads one.
I recently added a media query for a maximum width of 1500 pixels, but now the media query for max-980px wont work.
Here's the css, anyone that can help me?
/************************************************************************************
smaller than 980
*************************************************************************************/
#media screen and (max-width: 980px) {
.slider-container {
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 300px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 20px solid #00e800;
height: 100%;
}
}
/************************************************************************************
smaller than 1500
*************************************************************************************/
#media screen and (max-width: 1500px) {
.slider-container {
width: 100%;
height: 400px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 400px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 15px solid #f3f70a;
height: 100%;
}
}
Add a min-width component to the larger max-width:
#media screen and (min-width:981px) and (max-width: 1500px) {
This should tell the system to segregate the two choices, as < 980 will also always be < 1500.
Related
This is my CSS
.header {
overflow: hidden;
height: 60px;
background: #292940;
color: #fff;
}
.container {
flex: 1;
display: flex;
}
.sidenav {
width: 15%;
background-color: white;
}
#media (max-width: 640px) {
.sidenav {
display: none;
}
}
.main {
background-color: #f4f6f8;
padding: 20px 30px;
flex: 1 1 100px;
order: 1;
width: 85%;
}
#media (max-width: 640px) {
.main {
margin-left: 0;
padding: 10px;
}
}
This is working fine if have more content. But not able to 100% if right side content is less. Left side panel height automatically changing based on right side content
If I set height height: 100vh;
.sidenav {
width: 15%;
height: 100vh;
background-color: white;
}
This what showing. Not 100% height
How to fix this issue? Thanks in advance
Please try:
.sidenav {
height: 100%;
position: fixed;
}
Just set your side panel height to the DOM 100% height.
.sidenav {
width: 15%;
height: 100vh;
background-color: white;
}
If you want your sidenav to on the side when you scroll then set its position to fixed
.sidenav {
width: 15%;
height: 100vh;
position: fixed;
background-color: white;
}
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
I made some simple media queries and load in website but when I refresh the page so because of media queries css website orignal css also disturbing, please suggest the exact and proper solution how I fix the media queries as per mobile widths and also including way of these queries in website so I can make a proper responsive website.
For more suggestion I share css code
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 480px)
body {
background-color:white;
}
#columnout {
background:none;
background-color:#0090d7;
width: 300px;
height: 200px;
margin-top: 210px;
position:absolute;
z-index:100;
}
#column{
width: auto;
height: auto;
text-align: right;
margin-left: 47px;
z-index: 1;
margin-top: -29px;
}
You are missing the brackets: {}
#media only screen and (max-width : 480px) {
body {
background-color:white;
}
#columnout {
background:none;
background-color:#0090d7;
width: 300px;
height: 200px;
margin-top: 210px;
position:absolute;
z-index:100;
}
#column{
width: auto;
height: auto;
text-align: right;
margin-left: 47px;
z-index: 1;
margin-top: -29px;
}
}
Some reference for testing how responsive your design is: http://creatiface.com/tools/responsive-design-test
Add {} in your media query:
#media only screen and (max-width : 480px){
body {
background-color:white;
}
#columnout {
background:none;
background-color:#0090d7;
width: 300px;
height: 200px;
margin-top: 210px;
position:absolute;
z-index:100;
}
#column{
width: auto;
height: auto;
text-align: right;
margin-left: 47px;
z-index: 1;
margin-top: -29px;
}
}
For more details please see this link: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.
I'm unfamiliar with #media queries, and what I'm trying to accomplish is a responsive removal/alteration of certain CSS when the browser viewing is shrunk below a certain resolution, or a mobile device viewing the page is also below that same specified resolution.
I need .side to remove float: left; position: fixed; width: 150px; when below 500px width resolution, and .main to remove border-left: 1px solid #000; margin: 0 0 0 170px;
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
}
Any help or explanation is appreciated.
In this way you can do this
#media only screen and (max-width: 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border-left:0;
margin: 0;
}
}
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
width: auto;
}
#media only screen and (max-device-width : 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border: 0;
margin: 0;
}
}
There is a pretty simple way to do it, just use all: unset, like this
#media ("your condition") {
.yourClass {
all:unset
}
}