I have problems with the media-query, it detects me well the first but when they are less than 768px it no longer detects the average
this are my media-querys.
#media screen and (max-width:1920px){
#log {
bottom: 36%;
left: 35%;
}
}
#media screen and (max-width:1440px){
#log {
left: 41%;
width: 57%;
bottom: 30%;
}
#img2 {
width: 100%;
}
}
#media screen and (max-width:1024px){
#log {
left: 61%;
width: 72%;
bottom: 30%;
}
#img2 {
width: 100%;
}
}
#media screen and (max-width:765px){ /***** this is the one that does not work
#Table_01 {
margin-top: -12%;
}
}
You can try this: jsfiddle Demo
#Table_01 {
display: block;
width: 100%;
height: 500px;
border: 1px solid black;
margin-top: 20px;
}
#media screen and (max-width: 768px) {
#Table_01 {
margin-top: -12%;
}
}
<table id="Table_01"></table>
Note: in some #media questions you have 2 spaces, try to use one only to avoid any possible issue.
The last media query just works when the width of the screen is equal or lower than 765px not 768px. Also need to close the comment with */
#media screen and (max-width:768px) { /* this is the one that does not work */
#Table_01 {
margin-top: -12%;
}
}
Related
I am trying to move a shortcode which I put in Wordpress header. The problem is that from the 2 css rules below only the first works. If I change the order then again only the first works.
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
.navigation-wrap{
padding-top: 60px;
} #media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
if you want the "Navigation-wrap" class to be part of the first media query:
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
.navigation-wrap{
padding-top: 60px;
}
} <-- this was missing!
#media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
}
if "navigation-wrap" should be independent from your media querys:
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
} <-- this was missing!
.navigation-wrap{
padding-top: 60px;
}
#media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
}
reason: You forgot the bracket, which basically meant that the second media query was aprt of your first, so it could never occur! When your screen size reached 1025px the first media query is not active anymore and the second one was inside of the first one, so it also couldnt happen anymore. That should fix it
Yes , Only the first CSS code works, you should use javascript, to change the styles based on the Conditions you specify .
Suppose I have some less code like this:
#desktop-min-width: 1024px;
#phone-max-width: 768px;
#desktop: ~"only screen and (min-width: #{desktop-min-width})";
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width})";
#phone: ~"only screen and (max-width: #{phone-max-width})";
.hola {
#phone {
height: 100vh;
top: 10px;
}
#tablet {
height: 30vh;
top: 30%;
}
#desktop {
height: 30vh;
top: 30%;
}
}
// ...more styles...
I there a way for me to combine the #tablet and #desktop and reduce the duplication? Something like this is what I'm imagining:
#tablet or #desktop {
height: 30vh;
top: 30%;
}
Just using a comma should do what you want:
#tablet, #desktop {
...
}
This code seems to be correct but when i add it to my CSS it crashes the site. What did i do wrong?
CODE USED:
#media only screen and (max-width: 767px) {
.sesusercoverphoto_cover_change_cover {
position: absolute;
left: 20px;
top: 20px !Important;
z-index: 2;
}
You're missing a second closing bracket.
#media only screen and (max-width: 767px) {
.sesusercoverphoto_cover_change_cover {
position: absolute;
left: 20px;
top: 20px !Important;
z-index: 2;
}
}
When I am using
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 80%;
Height: 80%;
}
}
The code does not work and defaults to original styling however the code works for
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%;
Height: 50%;
}
}
all the way up to 1024px and then breaks
anyone have any idea why this is happening?
Your max-width: 1024px query must be placed before the max-width: 425px query in the code, otherwise, as an expected result of CSS specificity, overriding will occur.
Demo of wrong order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
<div id="imgWrapper">Media Query: </div>
Proper order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
<div id="imgWrapper">Media Query: </div>
jsFiddle: https://jsfiddle.net/azizn/d5bto8vL/
To conclude, media queries that are based on desktop-first model (max-width queries) should start with default styling for large screens then adding queries for lesser sizes, like so:
large/default > 1024 > 768 > 425 etc
Whereas in a mobile-first model, you use min-width queries and the default styling is smallest then add bigger screens:
small > 425 > 768 > 1024 etc
img.logo {
height: auto;
width: auto\9; /* ie8 */
left: 50%;
margin-top: -250px;
margin-left: -134px;
position: absolute;
top: 50%;
resize: both;
That's the code I'm using. It's a combination of resizing and centering, and yet it's only centering for some reason. I need the image to scale because, as it is currently, it's overlapping with an upper element of the page at very small browser sizes.
You can try using CSS media queries. Basically we define breakpoints based on screen width/browser width, and adjust the image widths accordingly.
img {
width: auto;
height: auto;
}
#media all and (max-width: 600px) {
img { width: 500px; }
}
#media all and (max-width: 500px) {
img { width: 400px; }
}
#media all and (max-width: 400px) {
img { width: 300px; }
}
#media all and (max-width: 300px) {
img { width: 200px; }
}
#media all and (max-width: 200px) {
img { width: 100px; }
}
See this example
Hope this can suit your needs
EDIT:
You could even combine the above suggestion with transform: translateX(-50%) translateY(-50%); to keep the image centered at all times. For instance:
img {
position: absolute;
left: 50%;
top: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#media all and (max-width: 600px) {
...
}
...
Here's an example
Use simple % for implementing the image width and height and the rest will take care automatically. The overlapping here I think is because the image is trying to maintain proportions with the auto attribute.
Or else you can try something like this in css
img.resize{
width:60%; /* Use either % or px*/
height: auto;
}