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) {
}
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.
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;}
}
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