I have a menu bar for the main site which has a lot of CSS, but for smartphone users I want to completely redesign the menu bar. I am doing this by using #media only screen and (max-width: 767px) {} and changing the properties of the classes there, however everything is being inherited from the original class and it's a real pain to reset every single property on every class manually.
So I was wondering if there is an easy way to reset a class in CSS when using #media only screen and (max-width: 767px) {}
There is a property called all for resetting all CSS properties.
.classname {
all: initial; /* or unset */
}
initial - This keyword indicates to change all the properties applying to the element or the element's parent to their initial value...
unset - This keyword indicates to change all the properties applying to the element or the element's parent to their parent value if they are inheritable or to their initial value if not...
Browser support: Chrome 37+, Firefox 27+, IE 11+, Safari Not supported
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/all
Related
I am trying to reduce the size of some titles of my commerce in responsive version. I have tried a bit of css but nothing has worked.
At the moment, I have the following for the main slider text:
#media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}
This is my web
enter image description here
Where am I going wrong?
Your css path currently looks like this.
#media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}
Without the associated HTML its hard to say but my initial guess is the classes that are already applied on it have greater importance than your new media query. I would try this adding !important and if it doesnt work make your selector more specific.
#media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}
fun things to note about selector importance:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
currently your media query css selectors have a value of 20 points because there are 2 class names pointing to the change
CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, !important has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the cascade order of stylesheets. Not the best practice but it works well often
I'm trying to use max-inline-size (the new logical properties) inside media query, but it doesn't seem to work.
The idea that in English it will be max-width:1000px; and in Japanese it will max-height:1000px
/*Not Working*/
#media (max-inline-size:1000px){
.main-content{
background:Red;
grid-template-columns:auto;
}
}
CodePen Example
max-inline-size is not in the Media Features.
Use max-height :The maximum height of the display area, such as a browser window
or max-width :The maximum width of the display area, such as a browser window
Example:
#media (max-width:1000px){
.main-content{
background:Red;
grid-template-columns:auto;
}
}
As mentioned, logical properties are properties, not media features, and therefore cannot be used in a media query. Writing mode is a property of an element on a page, not the browser or media the page is being viewed on. You appear to be looking for an element query, which doesn't exist in CSS.
I found that the collapsing menu in the Wordpress theme twentytwelve that transforms into a dropdown if the screen is too narrow is based on this conditional rule in twentytwelve/style.css
#media screen and (min-width: 600px) {
[css rules for actual elements if conditon above applies]
}
I currently build a child theme based on twentytwelve, where this min-width should be 885px instead of 600px.
Changing the value within twentytwelve would be easy, but isn't really a good style.
Neither would be to copy-paste the relevant css into the child and adapt it.
Is there an elegant way with pure CSS?
I'm rather certain that some workaround with a script would be possible
(yes, I am aware that there's a twentythirteen theme)
That is the pure CSS way, however...From my favorite theme, try responsive jQuery rules:
/*
Responsive jQuery is a tricky thing.
There's a bunch of different ways to handle
it, so be sure to research and find the one
that works for you best.
*/
/* getting viewport width */
var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
} /* end smallest screen */
/* if is larger than 481px */
if (responsive_viewport > 481) {
} /* end larger than 481px */
/* if is above or equal to 768px */
if (responsive_viewport >= 768) {
}
/* off the bat large screen actions */
if (responsive_viewport > 1030) {
}
Or your could hard code it into the template file by adding a style="" attribute and formatting the media query you have inside of it. This will make only that div in that template affected by the media query.
I am currently working on a highly design orientated site based on wordpress CMS.
Currently I have a responsive main stylesheet linked externally for the core css. As the site relies heavily on spacing and alignments of both text and images it has become necessary to add inline css using style= HTML to sometimes override the external CSS.
The problem I have is that in most cases certain elements such as margins need to be a different percentage in the mobile view than the desktop view to balance the visual composition. Is there any way to add responsiveness to the inline CSS based on screen width as can be done in an external style sheet?
So far the only way I can think of achieving this is through jQuery amending the external CSS based on the users screen width however this would mean setting up strict rules in the JS eg: for desktop view having margins set at 70% and for mobile setting them to 90%.
If it could be possible to do this inline using html style then this would give my client stricter control and more flexibility. Luckily my client is well versed in CSS.
You could always add a block of css inline with a style element:
<style type="text/css">
#media screen and (min-width:800px) {
.inlineOverride {
/* add more styles here */
}
}
</style>
<div class="inlineOverride">
</div>
It's worth mentioning that HTML5 has introduced a scoped attribute that you can set on the style element to limit the specified style information to the style element's parent element, and that element's descendants.
It isn't widely supported yet, so shouldn't be relied on, but it could be useful in the long term to help prevent inline styles like this from "leaking" into other parts of the document.
This question/answer might be helpful for you(read it thoroughly)
use #media for adjusting your properties of css according to device width-height.
What does #media screen and (max-width: 1024px) mean in CSS?
In modern Browsers you can (kind of) archive this by using custom css properties (css variables):
#media (max-width: 1100px) {
* {
color: var(--color-sm)
}
}
<a style="--color-sm: #11f">Text</a>
(Expand Snippet or open in full page to get the other behavior)
(Color is used for simplicity of presentation, just use margin or any other css property according to your use case.)
I'm confused about the purpose of the $fix-mqs in http://jakearchibald.github.com/sass-ie/
I can see how the rest of the mixin works but can't figure this part out. I have used this pattern it in a project and everything seems to work if I ignore it and put a fixed width in an old-ie include on the body or generic wrapper element, for example:
.l-wrapper {
#include old-ie {
width: 960px;
}
}
So my question is what is $fix-mqs for and what does it do?
The idea is that respond-min() mixin will act as a media query for you when you set $fix-mqs (fix media queries) to a specific width. You'll end up with a document that only contains styles that are applicable to the defined width and no media queries.
For instance, if $fix-mqs: 700px (roughly desktop sized) and you called respond-min(400px), then it wouldn't emit those styles because they're too small. It would generate the styles when you invoke respond-min(800px).
It's not just for IE, though. Some very old mobile devices don't understand media queries either. While most people recommend going "mobile first" with your media queries, there are some very destructive stylings (which are typically a pain to undo) that I'll apply only when it's a narrow device (such reformatting a wide table to appear vertically).
$fix-mqs is only used by respond-min and respond-max in the IE stylesheet.
You set $fix-mqs to be the width your desktop styles kick in, but probably before your "massive" desktop styles kick in (if you have any).
Eg, if I set $fix-mqs: 900px, the IE stylesheet picks up all styles the normal stylesheet would if the viewport width were 900px.
In practice, when you call respond-min(400px) { /* styles */ } the normal stylesheet get a media query, whereas the IE stylesheet gets the styles if 400px is less than or equal to $fix-mqs, otherwise it gets nothing.
Similarly, when you call respond-max(400px) { /* styles */ } the IE stylesheet gets the styles if 400px is greater than $fix-mqs, otherwise it gets nothing.