I am new to web development and I am facing a hard time dealing with media queries.
I am creating a dance website but my following media queries in "media-query.css" are not getting fired.
#media screen and (max-width:1800px) and (min-width: 399x) {
.our-services ul li {
font-size: 2rem;
padding: 2rem;
}
}
#media screen and (max-width: 400px) {
.our-services ul li{
font-size: 2rem;
padding-left: 0rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
Project link: https://github.com/abhinav700/DanceMasti.com
Too lazy to go through all of those files so I'll list some common errors out here in case someone else finds this question and has a different cause:
Maybe you haven't linked the file. Add <link src="your-directory/media-query.css"></link> to your html file.
Your queries are being overridden by a file with a higher priority. Test this
by leaving !important after your lines, i.e width: 50px !important;. Note that
using important is considered bad code by some(I have no opinion on this,and
have no idea if it's true).
As posted by another user, your media query is a bit off, so you could be toeing
the line and using exactly 400px. I doubt it though. The lower query should be
taking precedence, so it still should look like a mobile view.
Check to make sure that you are using the selectors correctly. Your selectors
currently are looking for a <li> inside a <ul> inside any element with a
class of our-services(someone correct me if I'm wrong). The way I like to
check this is just to set a clause:
li{
position: none;
}
and see if this element disappears. If it does and nothing else pops up... I got nothing.
If this answer helped, please mark it as answer.
It says 399x instead of 401px. So it could be both a syntax issue and a overlap issue.
Related
I'm currently trying to override a piece of styling made earlier in my code to my section-header with the padding, but having difficulty in doing so. I'm trying to center the section header on desktop sizess only.
My original section-header is like this:
.section-header {
padding-left: 10%;
}
And my media query is like this:
#media #{$desktop} {
.section-header {
padding-left: 0;
text-align: center;
}
}
I've already used !important but my mentor tells me to avoid it. How can I override this and make this change?
CSS works in multiple ways and can become a mess which is why your mentor mentioned not using "!important" where possible.
One thing to note is if your section rule is after your media query rule, it will override the media query rule.
Also, consider specificity. The more specific you are with your targeting the more important that rule is.
Quick question. Have you opened it up in Inspect to see whether it's even showing? So possible cache clear issue etc?
If it shows in inspect element, it might worth checking whether there is something with higher specificity overriding it.
It's hard to give a fix above the above without seeing but that won't be accepted on here...
When viewing an email with images off in Gmail, embedded styles will initially load correctly. However, if you click the “Display images below” link to turn images on, that causes Gmail to re-render the email markup with a different prefix for the class names and IDs.
The problem is, the email is still being styled with the previous version of the stylesheet, without updating the prefixes to match the current markup.
This means any CSS rule that depends on class name or ID selectors will stop working the moment images are turned on, leaving only element name or wildcard selectors.
I am currently using mailchimp to pass in an image, but I don't have access to that image element in the code (just the merge tag |IMAGE|) When this issue arises in Gmail, I can't access that image element. Any idea how to accomplish this?
<style>
.share-img img{
max-width: 60%;
margin-bottom: 5px;
}
#media screen and (max-width: 480px){
.share-img img{
max-width: 90%;
margin-bottom: 5px;
}
}
</style>
<div class="share-img" style="text-align: center; width: 100%;">*|IMAGE|*</div>
edit:
Here's an example of how gmail prepends classes/ID's with unique strings. The stylesheet 'share-img' class and the actually 'share-img' class have 2 different strings before them thus it is not resizing the image properly.
gmail inspect element image
try removing the space before 480px in your media query. Gmail is very annoying with CSS support. I have a feeling that's breaking it. Use the below code and see if it works now.
#media screen and (max-width:480px){
.share-img img{
max-width: 90%;
margin-bottom: 5px;
}
}
Cheers
Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.
#media (max-width: 600px) {
.banner {
display: none;
}
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Now as you run the code above(I assume you just did) there is nothing wrong.
Ok, now I will add similar code.
#media (max-width: 600px) {
.banner {
display: none;
}
}
.banner {
display: block;
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.
If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.
(Assuming all else is equal) Styles are activated in the order of precedence that they're encountered, unless encased in what amounts to an IF query, such as a media query.
.banner {
display: block;
}
So the above CSS will always display, no matter what other IF statements come before the rule itself. Which is not what you want.
Solutions:
1) You instead need it to be encapsulated within its own media query to only show when ABOVE 600px so:
#media (min-width: 601px) {
.banner {
display: block;
}
}
2) You place all your media queries in reverse order, so all at the bottom of (last in) your CSS file(s), so the media qualifiers are read AFTER the standard rules.
EDIT:
As Sean qualifies in comments, there are various more specific CSS selections, rather than just the order of appearance in the file, that can bend which rules take precedent over others. The order of appearance works in this case and works when the subject rules are all equal (such as all direct classes only) but please note that there will be other CSS rule instances that can complicate the issue. This answer is not intended for more complex CSS rule ordering.
It depends on the order of the rules: Every rule that comes AFTER a rule in a media query (for the same class or ID) will override it.
In your case the "general" rule for .banner is below/after the media query, so it overrides the rule in the media query. You have to write the general rules first, followed by the media queries.
This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!
I'm trying to understand screen vs. print behavior. What's the reason the APSW docs look different in print vs. screen? (In print, the table of contents column vanishes, and the main column takes up the whole print width)
(I'm trying to debug my sphinx document which doesn't have this behavior, but I figure if I can understand one that works properly, I can figure out why mine doesn't.)
Just something to note, after looking closely at the #media print section in basic.css cited by those of you who answered — there was one line different between my basic.css and the one in APSW:
div.bodywrapper {
margin: 0 !important;
width: 100%;
}
The !important modifier was missing from my basic.css and that was causing the margin: 0 to get overridden.
This is done using media types. With them, you can limit style rules to a certain output device like screen, printer, or handheld.
See here: http://apsw.googlecode.com/svn/publish/_static/basic.css
This is linked to the media type.
You can either link it to a group of properties:
#media screen {
body { font-size: 13px }
}
or to an entire stylesheet
<link href="blah.css" media="all" rel="stylesheet" type="text/css" />
In your case:
#media print {
div.document,
div.documentwrapper,
div.bodywrapper {
margin: 0 !important;
width: 100%;
}
div.sphinxsidebar,
div.related,
div.footer,
#top-link {
display: none;
}
}
They have #media rules.
Take a look at:
http://apsw.googlecode.com/svn/publish/_static/basic.css
They include another css-file in their stylesheet via
#import url("basic.css");