I have a media query which shoulda change the size of a div from 100% to a fixed 2000px. They are in different style sheets.
In the header contact.css is ABOVE styles.css
Here is an image of the console not seeing the rule, it doesn't even show it with a strike through: https://gyazo.com/dd140a95ed8a7d3454f5568a86f49bdc
(In this image, the browser size has been reduced to less than 700px)
contact.html:
<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/styles.css">
contact.css:
#PageC {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
}
Media query in styles.css:
#media screen and (max-width: 700px) {
#pageC {
height: 2000px;
margin-top: 120px;
}
}
Selectors #pageC and #PageC are not the same.
Fix it and it will work for you as expected.
#media screen and (max-width: 700px) {
#PageC {
height: 2000px;
margin-top: 120px;
}
}
First of all, in contact.css you use completely different selector #PageC and in styles.css #pageC. It doesn't work because of case-sensivity of selectors.
Secondly, I suggest you to put all style for #pageC in one place, because it helps to optimize your work.
For example, page.css can look so:
#pageC {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
}
#media screen and (max-width: 700px) {
#pageC {
height: 2000px;
margin-top: 120px;
}
}
Related
Using Bootstrap5 and adding a separate stylesheet as the last stylesheet in the list, I am trying to style the margins of the class .content I have this code at the end of my stylesheet...
.content {
width: 100vw;
margin-top: 0;
margin-bottom: 0;
background-color: white;
min-height: 80vh;
padding: 0;
}
#media only screen and (min-width: 768px) {
.content {
width: 70vw;
margin-left: 15vw;
margin-right: auto;
margin-top: 15vh;
margin-bottom: 15vh;
background-color: white;
min-height: 80vh;
padding: 0;
}
}
The web page uses <main class="content> wrapped around the content of the page.
The result I am wanting is to have the margins at zero on a mobile device, and a width of 100vw, but when I test it the width and margins of the media query are used even on mobile devices.
Can anybody see where I have gone wrong?
**ADDED AS REQUESTED
<meta charset="utf-8">
<title>NC Commodities Conference of Soybeans, Corn, Small Grains, and Cotton Producers</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
You have to change min-width propety to max-width.
#media only screen and (max-width: 768px) {
.content {
width: 70vw;
margin-left: 15vw;
margin-right: auto;
margin-top: 15vh;
margin-bottom: 15vh;
background-color: white;
min-height: 80vh;
padding: 0;
}
}
This max-width propety means, is “If [device width] is greater than or equal to 768px(accordingy to the example), then do {…}”.
#media only screen and (min-width: 768px)
this min-width implies here as,“If [device width] is greater than or equal to 768px, then do {…}”
Can you check your link tags at html file which you connect bootstrap.css and your.css to project?. You should link your.css at the end comparing the other css files.
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your.css">
If you look at the code, there are two media queries, the one with a max width of 1024 pixels seems to work fine and apply all the styles but the one with a max width of 470 pixels won’t work or apply any of the styles. Why is this happening? Any help appreciated.
https://codepen.io/FreemanW/pen/QWwRBMP?editors=1100
#media (max-width: 470px) {
.banner {
align-items: flex-end;
}
.title-box {
width: 100%;
}
.container {
width: 100%;
}
}
``
Everything within 470px is also within 1024px, so perhaps there's some sort of conflict going on there.
You could try using max-width: 470px and min-width: 471px, thus dividing your options into non-overlapping values :)
Be sure that the media-query with the smaller screen-width is at the end.
That works:
#media (max-width: 1024px) {
h1 {
color: blue;
}
}
#media (max-width: 470px) {
h1 {
color: red;
}
}
<h1>TEST</h1>
That doesn't works:
#media (max-width: 470px) {
h1 {
color: red;
}
}
#media (max-width: 1024px) {
h1 {
color: blue;
}
}
<h1>TEST</h1>
I have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
This question already has answers here:
Why does media query only work when placed last in my CSS?
(2 answers)
Closed 6 years ago.
I had a quiz in a html/css class I'm taking asking me to use media queries to reorganize some divs based on screen size. The code they supplied that I was supposed to add onto was this:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
There was a lot more than that but that is the relevant part. I came up with this:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
#media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
#media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
#media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
But it did literally nothing. The page was completely unchanged. I eventually gave up and looked at the answer, they had written exactly the same the CSS that I had, only in a different order:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
#media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
#media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
So my question is, how does order get applied here and why didn't my code do anything at all?
CSS stands for Cascading Style Sheets, so there rules will be interpreted cascading down, so if you have
.blue { color: blue; }
And then later on down the same CSS file, you put
.blue { color: pink; }
It will overwrite the color of .blue to pink
With media queries you want to add your default styling first and then add your media queries, because it will detect media queries first and then just use those rules instead of your default styling.
Because the browser will be able to detect (for example) your devices min-width is 800px, it'll pick up those styles and not bother to overwrite them when the file gets interpreted further down in your default styling
Hard to explain. Hope that sort of cleared things up
I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link which users don’t see but if touched takes them to the linked page:
In footer.tpl
<div id="footer">
<div class="column">
In stylesheet.css
#test {
#media screen and (max-width: 480px) { image display: none; }
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
Is there any way the link could also be removed? Thanks in advance.
Give your element a display:none; on the media query.
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
background: whitesmoke; /** Testing purposes **/
}
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
<div id="footer">
<div class="column">
Your CSS doesn't seem properly formed. Try replacing your media query with the following, which selects and hides your link by id:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Right now your media query looks invalid.
To hide the link, you could do this:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Note that this will override the display style of your #test element.
Suggestion: You may want to use a css class instead, such as <a class="hidden-mobile"... and use .test in your css file instead, so that you can reuse your class multiple times.