I have problem that i have cart main div element and problem is to make mobile responsive correctly, in laptop ( width:1024) or less working correctly, because i using :
#media (min-width: 801px)
#cart-modal {
left: 59%;
}
but in large screen ( width like : 1920px ) i used :
#media only screen and (min-width: 801px) and (max-width: 1920px)
#cart-modal {
left: 69%;
width: 600px;
}
not working !
I want just when i open large screen this cart should be left:69% and when i open laptop left:59%
Please Help me, Thanks !
You've set both queries min-width the same. Now, when you open page on small screen both queries are applied but the second is executed because it's more up to date.
The first one should be something like this:
#media (min-width: 801px) and (max-width: 1920px)
#cart-modal {
left: 59%;
}
And the second one should be:
#media only screen and (min-width: 1920px)
#cart-modal {
left: 69%;
width: 600px;
}
See the MDN documentation for properly constructing #media queries. In this case, your queries are missing parent braces { ... }, and should look like this:
#media (min-width: 801px) {
#cart-modal {
left: 59%;
}
}
#media (min-width: 1920px) {
#cart-modal {
left: 69%;
width: 600px;
}
}
Related
I created a code sandbox to recreate my problem here.
This is the table when there is enough room to display all of the columns:
This is the table when there isn't enough room for the full width:
You can scroll right to get to spell slots 8 and 9, but class levels and proficiency bonus are cut off on the left side. I'd like to keep those columns from getting cut out. What can I do to fix it so that all of the columns are able to be scrolled to?
I figured out one way of doing it.
First, I made the form have position: relative.
Then, I gave .levels left: 20rem.
Finally, I made a bunch of media queries to apply the fix at other screen sizes:
#media screen and (min-width: 512px) {
.levels {
left: 15rem;
}
}
#media screen and (min-width: 768px) {
.levels {
left: 10rem;
}
}
#media screen and (min-width: 1024px) {
.levels {
left: 4rem;
}
}
#media screen and (min-width: 1280px) {
.levels {
left: 11rem;
}
}
#media screen and (min-width: 1536px) {
.levels {
left: 8.5rem;
}
}
#media screen and (min-width: 1792px) {
.levels {
left: 4.6rem;
}
}
#media screen and (min-width: 2048px) {
.levels {
left: 0;
}
}
If you have a table with multiple columns and the table doesn't fit on the screen when the screen size is small, you can use the table-responsive class to make the table horizontally scrollable on small screens.
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
I want to create a website which is responsive on mobile and desktop, but my media queries won't work (it's do nithing).
I put my link below if any body wants html and css.
my CSS:
#media screen and (min-width: 900px){
.container{
width: 30vw;
}
.show-onscreen{
display: block;
}
.hide-onscreen{
display: none;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 300px){
.container{
width: 99vw ;
}
}
and this is full code:
full code
the below query might be the issue:
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
here min-width is greater than max-width, hence it will never execute.
You can try below if that is your goal:
#media screen and (min-width: 700px) and (max-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
max-width: 700px && min-width: 900px will never be true since width cannot be less than 700 and more that 900 on the same time.
I assume you meant to set the rules to be between 700 to 900
#media screen and (max-width: 900px) and (min-width: 700px){
Switch the width values in the media query
To build and website mobile-first you should develop first for mobile and then other sizes.
You will need to use something like this:
Usage: for mobile (except smallest screens), tablet, laptop, desktop, bigscreen. Anyone over 480px
#media only screen and (min-width: 480px) {
// content
}
Usage: for tablet, laptop, desktop, bigscreen. Anyone over 768px
#media only screen and (min-width: 768px) {
// content
}
Usage: for laptop, desktop and bigscreen. Anyone over 992px
#media only screen and (min-width: 992px) {
// content
}
Usage: for desktop and bigscreen. Anyone over 1200px
#media only screen and (min-width: 1200px) {
// content
}
Usage: just for bigscreen over 1600px
#media only screen and (min-width: 1600px) {
// content
}
To use this code you can develop without set media queries until you need to change some css property for bigger screens.
I suggest you to read this article: A Hands-On Guide to Mobile-First Responsive Design
I have this code and I have tried to figure out why it's not working. I have read several answers to quite similar questions, but I just don't get any wiser. Is the code in let us say (max-width:480) applying to all the other larger media queries? The only thing I can see working is the (max-width:1000)
#media screen and (max-width: 1000px) {
.figur {
display: none;
}
#about {
width: 100%;
}
#map {
width: 100%;
}
}
#media screen and (max-width: 720px) {
.parallax {
background-image: url("../img/bamseLiten.jpeg");
}
.row .column {
width: 100%;
height: 200px;
}
}
#media all and (max-width: 480px) {
#logo {
display: block;
width: 70%;
align-self: center;
}
.menu li {
display: block;
width: 100%;
}
}
For maximum device comparability and adopting you can use bootstrap 4+ like Media Query
// Small devices (landscape phones, 576px and up)
#media (max-width: 575px) {
}
// Medium devices (tablets, 768px and up)
#media (max-width: 767px) {
}
// Large devices (desktops, 992px and up)
#media (max-width: 991px) {
}
// Extra large devices (large desktops, 1200px and up)
#media (max-width: 1199px) {
}
For ultra mobile first you can use min-width instead of max-width which is like this -
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
}
Hope you will get a better responsive layout using one of this media query.. Thanks
How are you testing this?
You need to make sure you are able to change the screen size... chrome offers decent ability to do this with inspect.
You may want to try using a min-width along with the max?
#media only screen and (min-width: 768px) and (max-width: 990px) {
.class {
position: fixed;
top: 0;
height:40px;
}
}
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
I have a problem when I use media query in css3: without screen, meida query doesn't work.
Here is code:
.side-menu {
position: fixed;
...
display: none;
margin-right: 0;
#media screen and (min-width: #screen-xs) {
display: block;
}
#media and (min-width: #screen-md) {
right: 8.1%;
}
}
Problem: the first media query works and the seconds doesn't. If I remove the screen and the first doesn't work either.
SO, could anyone help me?
You should remove the and in this line:
#media and (min-width: #screen-md)
To become:
#media (min-width: #screen-md)