I wrote the following code to display footer items in a certain way on a LARGE screen (>800px). It works correctly on a large screen, but now this setting applies to smaller screens, too (< 800px screen). I want to apply this flex setting ONLY to large screens... what am I doing wrong here?
#media (min-width: 800px) {
:root {
font-size: 30px;
}
footer .container {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
}
#media (max-width: 599px) {
:root {
font-size: 14px;
}
}
#media (min-width: 600px) and (max-width: 799px) {
:root {
font-size: 17px;
}
}
Check that you have added meta tag in <head> :
This is important. Because without viewport tag media queries don't work at all.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the settings you are applying in #media (min-width: 800px) are applying to smaller screen sizes that mean you have the same code written outside your query too. You should check it in the CSS file. maybe you wrote the same code below the query somewhere.
So check if this code is being used outside the media query and if it's been used outside the media query check its order is below the #media 800px
then you need to remove it and the code will work just fine.
Also, I would appreciate more CSS and HTML to work with
this is the code you should check if it's written outside your query.
footer .container {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
If that does not work please provide us more HTML and CSS because it may be a CSS specificity issue.
Related
I'm working on a challenge that is based on a grid container this grid contains 3 cards and they are displayed horizontally.
THE PROBLEM
I have a class called .grid-container which has these CSS properties:
display: grid;
grid-template-columns: repeat(3, 1fr);
so in my media query, I did this:
#media only screen and (min-width: 320px) and (max-width: 900px) {
.grid-container {
display: flex;
flex-direction: column;
}
}
As you can see I changed the grid to flex with column direction but when I change screen resolutions it doesn't take effect.
If you want to check out the site and source code:
Live site: https://themax370.github.io/3-column-card-component/
Repository: https://github.com/TheMax370/3-column-card-component
Your original rule is more specific:
main .grid-container { ... }
beats this one
#media only screen and (min-width: 320px) and (max-width: 900px) {
.grid-container { ... }
}
every time, because media queries don't affect the specificity of rules, at all.
When two or more rules contradict for an element, the more specific one wins. That is the basic CSS mechanism.
So when using media queries, always make sure
that your media queries come after the original rules they are meant to overwrite (which you did);
that the rules you want to override have at least the same specificity as the original rules (which you failed in).
You have to add main before .grid-container
#media only screen and (min-width: 320px) and (max-width: 900px) {
main .grid-container {
display: flex;
flex-direction: column;
}
}
I am developing website based on Bootstrap template.
Here is link: http://pixelslab.pl/ly/
I just have trouble with paragraphs in the middle - they are overlaping in strange way.
Any idea how to fix it?
screenshot of issue
The fixed height is causing this... change your CSS in the following:
#media screen and (max-width: 766px){
.elementor-text-wrap .section
{
height: auto;
min-height: 200px;
padding-top: inherit
}
}
In order to make them work as expected, you should set your default line-height to normal in a certain breakpoint like 767px. You should also apply flex-direction: column; to the parent element in order to get better results. So the result should be something like this:
#media only screen and (max-width: 767px) {
.elementor-text-wrap .section {
flex-direction: column;
}
.section p {
font-size: 14px;
line-height: normal;
}
}
}
I'm trying to understand CSS a bit and I'm currently somewhat stuck with #media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 10px;
background-color: brown;
}
#media screen and (max-width: 9999px) {
section {
background-color: red;
}
}
#media screen and (max-width: 1000px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Just using a simple
<section>
bla
</section>
HTML code. Here's a w3schools tryit link since you can easily resize your viewport.
https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6
However, it does not work like I'd want it to.
For the yellow background (< 500px), it stays yellow until 500 included.
For the blue background (>= 500px && < 1000px), it stays blue until 1000 included.
For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead.
It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?
It depends where you want the 'jump' to happen, but assuming you want the background to be yellow at 500px and blue between 501px and 999px, you can simply use the following:
#media screen and (min-width: 501px) and (max-width: 999px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Don't forget that you can also use min-width as well as max-width, and that media queries will always take priority sequentially from top to bottom.
Hope this helps!
i thing the perfect responsive media query tag is this one
#media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
width: 60%;
}
}
you want to wright to css according to media screen .
Try it it's helpful for creating responsive layout .
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
So for some reasons when I add the # media query to my wordpress stylesheet, it breaks the styling of the first container. I have the proper brackets so I'm kind of confused as to why my code editor greys out the first container, in this case #navmenu.
#media only screen and (min-width: 1001px) and (max-width: 1499px) {
#navmenu {
margin-top: 50px;
float: left;
width: 15%;
margin-left:29%;
}
}
The same thing occurs, when I try to #media query wrap the original stylesheet to only load when the screen size is >1500px. The site's #wrapper breaks and all styling after that is broken, as if my brackets are not properly placed.