I wrote a class with CSS properties and I want it in the way that the screen at my breaking point which I've decided then media query work how I can use the for example:
When the screen is larger than 600px then it works and
if the screen is less than the breaking point then this media query works.
.test {
width: 30% !important;
display: inline-block;
margin: 10px;
}
#media only screen and (max-width: 600px) {
.test {
width: 100% !important;
display: inline-block;
margin: 20px;
}
}
That is not working. Please anyone help me with this.
The CSS you provided is valid.
If you are not seeing the expected result, the following things may be happening:
There is no element in your HTML which has a class of test. — If you run document.querySelectorAll('.test') in the console and you are not getting any results, then there are no elements which match the CSS selector of .test.
The CSS is actually not being loaded. Maybe you are not putting your styles inside a <style> tag, or you are not correctly loading the stylesheet with <link rel="stylesheet" href="/path/to/your/styles.css"/>? — Your browser’s developer tools should show your stylesheet being loaded in the Networks panel. Alternatively, styles should be present on the page, within a <style> tag.
The CSS rules are being overwritten. Are there are any styles which are styling the .test element(s) after the above CSS rules are applied? — Your browser’s developer tools can show if styles are being applied or not.
Sharing your HTML will make it easier for people to help you.
Related
I'm trying to implement a code on my Squarespace website's homepage to make the 'Soph and Mat' www.thedistancelive.com larger on mobile only.
I've tried the following:
#media only screen and (max-width:640px) {
#block-yui_3_17_2_1_1594350948064_7952 {
font-size: 35px;
line-height: 35px;
padding-bottom: 20px;
margin-top:10px;
}
}
#media only screen and (max-width: 767px){
#block-yui_3_17_2_1_1594350948064_7952, .index-section-wrapper h1 {
font-size: 80px;
line-height: 35px;
padding-bottom: 20px;
margin-top:10px;
}
}
The margin-top/bottom work but the font size is not budging.
Can anyone help, please?
Thank you x
The issue has to do with CSS being overridden by a rule that is both higher specificity and using !important. That is not atypical in Squarespace, where the rules are written based on style and template selections made in the back-end, creating CSS rules with relatively high specificity.
In such cases, one should use the browser developer tools/inspector to view the rule in question. Then, a rule of equal or greater specificity can be be written to override the default CSS.
To do that:
While viewing the page, narrow your browser's width until mobile styles are enabled.
Right-click on the element in question. In this case, that is the H1.
Select "Inspect" (or "Inspect Element" in Firefox and other browsers).
In one of the panels, you'll see the CSS that applies to the target element (the H1 in this case). Find the active rule that is setting font size.
5. Based on that rule, write your own rule of equal or greater specificity and priority. Something like this:
#media only screen and (max-width:640px) {
.index-section-wrapper .content.has-main-media #block-yui_3_17_2_1_1594350948064_7952 h1:not(.OT_title) {
font-size: 35px !important;
}
}
6. Add the rule via Custom CSS / CSS Editor.
There are other ways to write a rule of greater specificity than the example above. It is just one example.
I'd like to have a single h1 tag and have different styling for it. I'm not sure if my css is the easiest way to do it? I"m using bootstrap so maybe there is a more concise way?
I have the following HTML:
<h1>Hello I am an h1 tag</h1>
And following css:
h1 {
color: yellow;
font-size: 32px;
}
#media (min-width: 576px) {
h1 {
color: red;
font-size: 60px;
}
}
Refer to link bootsrap
Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.
Then Best way as I know is to use media queries.
Viewport is another way for this. But not all browsers supports link info. Then most reliable way is to use media queires
So having a really weird issue here, only in Safari 13.0.5, tested on multiple machines and get the same error.
The project itself is a networking app built with Laravel, using Laravel Mix to compile assets.
I have a form with an ID of profileForm:
<form id="profileForm">
... inputs
</form>
This form uses the default form styling I've created for this project - which is working fine.
However the weird thing is, some styles from inside a media query from a completely separate element are being applied here?
.profile-modal {
.. other styles
#media screen and (min-width: 768px) {
padding-left: 70px !important;
padding-right: 70px !important;
}
}
This form does not have the .profile-modal class, yet Safari is applying the above styling to it which is for a completely separate part of the website.
If I rename the class in the sass to something completely random, i.e:
.asdfghjkl {
.. other styles
#media screen and (min-width: 768px) {
padding-left: 70px !important;
padding-right: 70px !important;
}
}
It still applies those styles to this element as seen here
To combat this, I thought as a temporary measure I could add the following to my blade template to remove the padding:
<style>
.profile-modal{
padding-left: initial !important;
padding-right: initial !important;
}
</style>
However that didn't apply to the broken element, to get it to work I have to use the correct ID #profileForm.
Has anyone else had this issue on the latest version of Safari?
I have a WordPress site and for some reason, some of my CSS styles does not being applied in any browser.
/* This rule is rendered in the browser */
.post-date,
.author {
font-weight: bold;
}
/* This two rules doesn't render in the browser */
figure.alignright,
figure.aligncenter {
text-align: center;
}
#media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
<p class="post-date">Some published date</p>
<p class="author">Author</p>
<div class="wp-block-image">
<figure class="alignright is-resized">
<img src="someImgageURL" width="100" height="100">
</figure>
<div>
For example I have the figure style which doesn't get applied.
And when I look in the Style Editor in Firefox or Inspector in Chrome I can't find the style. It's like it doesn't exists, and I can't figure out why.
You are using this:
#media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
It's mean browser has min-width 500px will run this css, so this css is overide your code above.
You should use
#media only screen and (max-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
Most browsers cache websites and their style-sheets, images and so on to safe bandwith.
This means you will have to force your browser to update the css file, which you can do by manually deleting the cache, or to disable caching completely!
Maybe you have some CSS syntax error before the line. (maybe extra bracket opened or something else)
I read all the comments you wrote and came to this conclusion.
You can test it with the below method.
Please remove all the CSS code in the CSS file and just leave the CSS section you want to test.
If it works then review the CSS code you just removed and check the typo.
Hope this helps you.
Thanks
I finally found out what the problem was. It was Wordpress own caching of the stylesheet that gave the problem. After clearing the Wordpress cache, everything is working as expected.
I have a small problem and I'm not sure there is a real way to do what I want easily.
I have multiple stylesheets available:
a Bootstrap stylesheet is loaded first
Multiple modules are loaded
In one module, there is a rule like this:
.container .container {
padding-left: 0px;
padding-right: 0px;
width: auto;
}
This effectively prevent me from using stacked containers in my layout. I'd like to disable this rule.
I can technically override it before or after it is declared but I don't want to reset the styles... Let say I just want this rule to cease to "work".
I tried to override it with:
.container .container {
padding-left: inherit !important;
padding-right: inherit !important;
width: inherit !important;
}
But that doesn't work. What I'd like to achieve is effectively disable a style in the stylesheet chain since the bootstrap has multiple styles with media queries, it could be a bit complicated to reapply the bootstrap styles for the container after the css stylesheet that breaks my styles is loaded.
As far as I know there is no way to do that other than reapplying the styles.