I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
Related
So I'm not really good at css since I'm working more on the backend, I have two max-device-width where if the max is equal or less than to the value it will follow what style implemented but, I have this in css:
#media (max-device-width: 700px){
.main-news .mn-img img {
height: 15vh;
}
}
#media (max-device-width: 1024px) {
.main-news .mn-img img {
height: 25vh;
}
}
my problem is that when the device is already below 700px its still follow the 1024px style not on what i put on the 700px. How can I do this? that when it is now below on the 700px it will follow the 700px style not the 1024px style in css.
For 1024px, you need to do both min and max, so that it falls in a range. For example:
#media (min-device-width: 701px) and (max-device-width: 1024px) {
.main-news .mn-img img {
height: 25vh;
}
}
Note that you can't have the specified width overlap with one another. If you want to set a small screen with 700px max-width, then the min-width for a medium screen should start at 701px.
You can use media queries to specify a range, eg: #media (min-width: 30em) and (max-width: 80em) {... and you can combine them as you wish. So use min-width and max-with to specify ranges.
Look here for a complete primer on media queries: https://css-tricks.com/a-complete-guide-to-css-media-queries/
I am attempting to utilize media queries to hide or unhide a div in HTML:
<div class="hide-medium hide-large">Test</div>
With the following CSS:
#media screen and (min-width: 994px){
.hide-large{
display:none
}
}
#media screen and (max-width: 993px){
.hide-medium{
display:none
}
}
#media screen and (max-width: 601px){
.hide-small{
display:none
}
}
The div hides properly when the browser is sized accordingly; however when the browser size hits 601px and lower the div still stays hidden. What am I doing incorrectly?
Media queries cascade. That is to say, at 601px your #media screen and (max-width: 601px) media query would correctly take affect, but the #media screen and (max-width: 993px) media query will also take affect, as 601px is smaller than 993px. Thus, the element has both media queries applied. And because your element still has the hide-medium class at a 'small' width, it will still be hidden.
If you don't want this to happen, I'd recommend explicitly setting a min-width on your middle media-query as well:
#media screen and (min-width: 994px) {
.hide-large {
display: none
}
}
#media screen and (max-width: 993px) and (min-width: 602px) {
.hide-medium {
display: none
}
}
#media screen and (max-width: 601px) {
.hide-small {
display: none
}
}
<div class="hide-medium hide-large">Test</div>
It's also important to note that media queries in the same stylesheet are applied top-to-bottom. If you have a 'lower down' media query that has a valid rule for the target element, it will overwrite any valid media queries which are 'higher up'. You can make use off only min-width (mobile-first) or max-width (desktop-first) queries in this regard (without mixing them). This is further explained here.
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
I want to change some CSS properties of an element based upon the width of its parent element for responsive design.
For example,
The parent element will have a minimum width of 200px and will stretch to at max 500px regardless of the screen size/width. I want to set a fixed width to its children elements based on the width of its parent container.
I am looking for no Javascript solution for this. +1 if it can be somehow implemented using custom media query.
Please advise.
Try It Once
#media screen and (min-width: 200px) and (max-width: 499px) {
//styles here
}
#media screen and (min-width: 500px) and (max-width: 1024) {
//styles here
}
use Media query
#media only screen and (min-width : 200px) {
}
#media only screen and (min-width : 500px) {
}
My mobile media queries dont work in landscape mode, maybe I am not displaying media only screen right. I am not using any frameworks , just regular CSS...
Could someone point me in the right direction? Thanks in advance
this is what I have right now
#media (min-width : 319px) and (max-width: 480px){
//css here
}
not sure what I am doing wrong
There is a useful attribute/function in CSS called orientation which has two options:
Landscape
Portrait
And this is how you can use it:
#media screen and (orientation:landscape) {
/* Your CSS Here*/
}
To attach the screen max and min width you can do something like this:
#media screen and (orientation:landscape)
and (min-device-width: 319px)
and (max-device-width: 480px) {
/* Your CSS Here*/
}
See this reference: css expanding based on portrait or landscape screen size? and also a documentation about the #media queries on this page: https://css-tricks.com/snippets/css/media-queries-for-standard-devices
I hope this will help you :-)
What about this combination of media-query + viewport height ?
video {
width: 100%;
}
#media screen and (orientation:landscape) {
video {
height: calc(100vh - 110px);
}
}
100vh = 100% of your viewport height.
110px is the height of my navigation bar, (just need to adapt it to your dimensions)