hi all i have a little problem here i have some divs that i have positioned in below screen width
#media all and (min-width: 1024px) and (max-width: 1399px) {
.logo{margin-top:70px;}
.menu_bt{display:block; margin-left:30px;}
.search_bt{display:block; margin-left:30px;}
}
so i above u can see i have positioned some divs and i have shown some hidden divs and they are looking fine on above screen width but when i change browser width to 768px it doesn't show the styles i have set in 1024px screen width for e.g(.menu_bt and .search_bt) i have changed them from display:none to display:block but they doesn't show up in 786px screen width.i have to set those above properties in below mentioned screen width to get them ....i dont know whats the issue please help me out
#media all and (min-width: 768px) and (max-width: 1023px) {
.logo{margin-top:70px;}
.menu_bt{display:block; margin-left:30px;}
.search_bt{display:block; margin-left:30px;}
}
Related
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)
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
}
I'm working with Media screens for the first time and They don't quite seem to be working the way they're supposed too....
#media only screen and (max-width : 320px) {
all the css stylings within here and it shows up as this as it's supposed to.
#media only screen and (max-width : 321px) {
all css stylings that i place in here don't apply to the page when the width goes beyond 321 px. which isn't supposed to happen.... for example if i were to change any text color nothing would end up changing.
thanks in advance for any help :)
The CSS you write in this media query will be applied to the screen which has width less than 321px;
#media only screen and (max-width : 321px) {
if you want to apply the same CSS when you resize it beyond 321px then you need to increase the width as per your requirements -
#media screen and (max-width: 700px){
You need to write Media Query to a class or element as -
#media screen and (max-width: 700px){
body{
font-size:20px;
color:red;
}
}
Demo Here