I have wrote this media query for targeting 240*480 resolution
#media only screen and (min-width:240px)
and (max-width:480px) {
.speech-bubble-container {
right: 0 !important;
width: 100% !important;
}
}
another media query for 321*480 resolutions
#media only screen and (min-width : 321px)
and (max-width : 480px)
and (orientation :landscape) {
.speech-bubble-container {
right: -48px !important;
}
}
but when i test the website in 240*480 portrait mode device its right:0 property is not overwriting the right:-48px; -- how to achieve this?
I want to excute right:0 for 240*480 resolution device but instead of this it is overwriting by right:-48px;
I am new to responsive design.
Change your media queries like the following: SEE THE DEMO for reference. Resize the fiddle window to see it in action. When it's on portrait mode (width less than 320px), the right: 0; will be applicable while on landscape mode (width greater than 321px), the right: -48px; will be applied.
#media only screen and (max-width : 320px) {
.speech-bubble-container {
right: 0 !important;
width: 100% !important;
}
}
#media only screen and (min-width : 321px) {
.speech-bubble-container {
right: -48px !important;
}
}
Your media queries overlap. The first one it doesn't say '240x480'. It says from a range of minimum width of 240px to maximum width of 480 use these styles.
380px width falls in the above.
Related
i try to resize div.social-menu-item. but order of #media min-width don't work correctly for me.
when my screen is less than 500px it uses #media (min-width: 768px).
minimum width is earlier, #media min-width 240px is written before 540px is written before 768px
I can have a question why?!!
I don't know how to resolve this bug!!!
see below picture for more...
.social-menu-item {
height: 100%;
width: 12%;
display: inline-table;
}
#media only screen and (min-width: 240px) {
.social-menu-item {
width: 50%;
background: #fff;
}
}
#media only screen and (min-width: 568px) {
.social-menu-item {
width: 25%;
background: #000;
}
}
#media only screen and (min-width: 768px) {
.social-menu-item {
width: 12%;
background: #fff;
}
}
live in http://namvarii.ir/ social icons.
i used max-width for resolve this problem for me, but it's not correct it.
This problem doesn't solved,
cause i think the view slider have fixed.
And when i change browser size CSS min-width or max-width don't affect to element. and this problem cant solved!!
Use max-width instead. That should apply the rules in the order that you need:
max-width 768px = 568 -> 768
max-width 568px = 240 -> 568
max-width: 240px = 0 -> 240
Working pen: https://codepen.io/antonbks/pen/oNvzyLP
In media query use min and max width as you are trying to make responsive and trying to support on basis of conditional width
On my shop page on tablets and phones in landscape mode, not all products are shown next to each other. They leave gaps, so sometimes there are two products and sometimes just one product in a row. I tried around with CSS and couldn't find a solution. My goal is to have them all next to each other and display a minimum of 2 in a row on portrait phones, instead of one. How can I do this?
Here's my site: https://malimo.co/shop/
If you open the website on a computer screen, just make the browser window smaller and you will see it)
You set width of products to 50% + margin. That is more than width of screen.
On landscape you have this
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3:nth-child(3n) {
margin-right: 15px;
}
change it to 0px
or change 50% to lower value. For example 46%.
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
width: calc(50% - 7.5px);
}
i think you should set margin-right to 10
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {`
width: calc(45% - 7.5px);
}
i think this will sort the issue. set margin-right to 0
#media (max-width: 992px) and (min-width: 768px)
{
.theme__product__item--col__3:nth-child(3n) {
margin-right: 0;
}
}
In the media queries
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
This will execute when the screen's min-width is 300px.
If i want to execute the code when the width is inbetween the 300px - 500px how i will write the code.
Its pretty simple
#media screen and (max-width: 359px) and (min-width: 240px){
.detail_image{height:160px; width:280px;}
.video_cntrl{height:160px; width:auto;}
}
I highly suggest you to use aspect ratio based resolution it will rectify your worries.
please view it.
#media screen and (min-width: 300px) and (max-width: 500px)
{
body {
background-color: lightblue;
}
}
I have the following media queries... The Landscape media query is always taking precedence. I tried changing the order of these thinking that if the Portrait one was first it would take precedence, but that did not work. In fact, even when I remove the Landscape media query completely and just leave the Portrait it doesn't work, so it seems like the Portrait media query is broken somehow :S
Here are my two queries:
/* iPad Retina, landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#container {
width: 995px !important;
}
#currentroom_convo {
-webkit-overflow-scrolling: touch;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.slimScrollBar .ui-draggable {
opacity: 0 !important;
}
}
/* iPad Retina, portrait*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#container {
width: 300px !important;
}
#currentroom_convo {
-webkit-overflow-scrolling: touch;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.slimScrollBar .ui-draggable {
opacity: 0 !important;
}
div .topbar {
max-width: 300px !important;
}
}
I have this meta tag in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, user-scalable=no">
Please note I am using the !important as I need to override some other CSS from a third-party plugin. Removing !important in the landscape query results in no change to the #container element (still doesn't even pick up the Portrait query).
I have tried searching around here but none of the answers seemed to work for me. Thanks :)
Your approch is wrong. Please note that when you change device orientation forn landscape to portait, your width become height & height become width. In your code your are not changing those values accordingly. Thus as per your condition portait styles apply when screen width is between 786px to 1024px. I think this condition is not satisfied cause ipad resotution width in portait mode is 786px at standard. Thus your styles never get applied.
Also don't use max-device-width & min-device-width & max-device-width instead use min-width & max-width. The resone behind this is that max-device-width gives you width of entire screen, but max-width giv you actual width of browser viewport.
Keeping all this things in mind change your code to following:
/* iPad Retina, landscape*/
#media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){
/* Styles */
}
/* iPad Retina, portrait*/
#media only screen and (max-width:768px) and (orientation:portrait){
/* Styles */
}
Bootstrap includes some default media queries that look like this:
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
Why don't these include the max-width variable? Is that inherently implied by just using min-width, i.e. does CSS just simply "know" to take the highest min-width possible?
It has to do with logic.
TL;DR: See it as if/else statements in you code. You only add the max if you want a max specified.
You can read it like this:
#Div{ color: green; }
#media (min-width: 992px) {
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width at least 992px ) BG -> pink
If you would have maxwidth it goes with the same logic, only as maximum.
If you have both:
#Div{ color: green; }
#media (min-width: 500px) and (max-width: 992px){
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width atleast 500px AND a maximum of 992px ) BG -> pink
Easy demo for max-width, make something tablet resolution only (asuming everything 1024+ is desktop):
#media (min-width: 1024px) { /* ... */ }
There is a tendency to design for the smaller screen (ie. mobile) first and use media queries to target larger screens (ie. desktop) users. This is what you are seeing in the Bootstrap CSS.
The main stylesheet applies to the mobile browser (in fact all browsers). Then a media query is used to target slightly larger screens to apply specific rules:
#media (min-width: 992px) {
This targets window sizes greater than (or equal to) 992px (ie. whose minimum width is 992px).
There is no max-width specified here, so this applies to all large windows.