I have two media queries. One is for phones while the other is for tablets. They both call for the same exact styling. In this case what would be the best approach for keeping this code DRY?
$mobile-portrait: "only screen and (max-width: 680px)";
$tablet-portrait: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";
div {
background: gray; margin: 0 auto; height: 50px; width: 50px;
#media #{$mobile-portrait} {
height: 100px; width: 100px;
}
#media #{$tablet-portrait} {
height: 100px; width: 100px;
}
}
I'm not sure that there's any good way to do this, but you could always just create multiple selectors. (I don't know if that's the best practice, but that's what I would do.)
#media #{$mobile-portrait},
#media #{$tablet-portrait} {
height: 100px;
width: 100px;
}
EDIT: The following is also valid.
#media #{$mobile-portrait}, #media #{$tablet-portrait} {
height: 100px; width: 100px;
}
For aesthetic I prefer putting the selectors on multiple lines. When there are longer selectors, the line break helps differentiate between them.
I also prefer the styles on multiple lines. If you have more than about three or four in a selector, it can get confusing.
EDIT 2: The comma actually acts like a logical or when inside of a media query.
Per this MDN article:
comma-separated lists
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.
Which means that the second #media is not necessary:
#media #{$mobile-portrait}, #{$tablet-portrait} {
height: 100px;
width: 100px;
}
Related
I am working on a form in Visual Studio Code. While trying to utilize the and operator, in a media query the and operator is not being recognized. I am attempting to have a set of format rules for when the screen is less than 600px wide.
css:
#media screen and (max-width: 600px) {
/*full width when screen less than 600*/
.form-body{
background-color: #EEEAE9;
border: 6px solid #000;
width: 100%
}
}
the and operator is appearing as simple text, ignoring the defining characteristic of 600 px width.
Is there a reason why css would not be recognizing the "and" operator?
Is there a way to name your media queries?
#media ("AddImageBorderQuery") {
#Cats {
border: 5px solid red;
box-sizing: border-box;
display: block;
}
}
There's mention of something similar here.
My use case is different than defining classes and switching to them.
If you want more details I have completely different designs hidden behind different queries (single page application). Then in those designs I want to have specific states and I want to name the query so I can switch to those states. There can be large number of changes so I want to use nested query groups as a way to organize them.
I'm doing this manually now using a dictionary and code but naming media queries would simplify things.
#media ("page1") {
#media ("AddImageBorderQuery") {
#Cats {
border: 5px solid red;
display: block;
}
}
}
#media ("page2") {
#media ("ShowContactForm") {
#ContactForm {
display: block;
}
}
}
window.showMediaQuery("ShowContactForm");
One approach to load media queries dynamically is by having a style tag with id, e.g. <style id="app-dynamic-media-query">, which content you can fill/replace later on the fly. You can access that style tag using document.getElementById.
Why is the last media query not working here? Am I over looking something? I have tried changing the order but it always leaves out the last one for some reason. This appears to be the correct cascading order to me.
#media screen and (min-width: 768px) {
.mobileBrand {
display: none;
}
}
#media screen and (max-width: 767px) {
.desktopBrand {
display: none;
}
}
#media screen and (max-width: 1079px) {
.nav-right {
margin-left: 1em;
}
}
#media screen and (max-width: 1106px) {
.nav-right {
margin-left: 6em;
}
}
The scenario above doesn't clearly tell the browser what margin-left to apply if screen is less than 1079px - it could be either 6em or 1em.
You should define min and max values for the 1106px query.
#media screen and (min-width: 1080px) and (max-width: 1106px) {
.nav-right {
margin-left: 6em;
}
}
the fourth one will overwrite the third one, since also the fourth one defines everything less than 1106px. So the third will never apply.
Use min-width AND max-width on the fourth one to avoid that.
ADDITION/EDIT: or just reverse the order of the third and fourth one...
If you look at your media query:
#media screen and (max-width: 1079px) {
.nav-right {
margin-left: 1em;
}
}
#media screen and (max-width: 1106px) {
.nav-right {
margin-left: 6em;
}
}
You have two queries that conflict with one another.
One is from 0px to 1079px and the other 0px to 1106px.
They overlap for 1079px altogether.
I would define the queries a little more explicit.
Stating something along the lines of
#media screen and (min-width:1080px) and (max-width:1106px)
That way, anything above your defined 1079px will show a margin-left of 6em instead.
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I am having some trouble with CSS, when i try the site on a mobile device the line height remains at 65px , this can be fixed by putting a !important in front but this is not the kind of fix i want, should i be using a class or something?
Thank you very much
/*Change the glyph size when necessary*/
#media only screen and (max-width:990px)
{
#IEGlyphPlacement
{
line-height: 80px;
}
}
#Glyph
{
line-height: 65px;
}
You're targeting a different element inside of the media query. The media query is targeting the element with an ID of IEGlyphPlacement, rather than Glyph (which you define in the non-media query code).
Update as follows:
/*Change the glyph size when necessary*/
#media only screen and (max-width:990px)
{
#Glyph
{
line-height: 80px;
}
}
#Glyph
{
line-height: 65px;
}