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?
Related
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.
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 have an email contact form, with a submit button, and some basic styling on the button. All of the styles work on Desktop, and most of the styles are applied on mobile, just not the padding or border-radius. I already tried switching to EM units instead of pixels. The url is http://sharperprogrammer.com/contact (not self-promoting, just thought it would help to see the full thing)
HTML:
<input type="submit">
CSS:
input[type=submit] {
background-color: #4CAF50;
color: white;
/* padding: 12px 20px; */
padding: 1.2em 2em;
border: none;
border-radius: 0.4em;
cursor: pointer;
margin: 10px;
}
I have even connected my iPhone to my Mac and opened the Safari Developer Tools, and I can check and uncheck to toggle different styles on the button, but the padding seems to do nothing. It's weird to me because the other styles like the background-color work fine, so I know everything is connected at least. Thanks for taking a look!
Edit: The style is just fine on an Android phone's Chrome browser, but the styling isn't applied correctly on my iPhone's Chrome or Safari browser. And I've cleared my browser cache just in case.
Here is a screenshot:
It looks to me like Safari / Chrome Mobile have some default button styles that are more specific than input [type=submit]. Perhaps the more specific styles don't specify background-color which is why yours is working.
I found two solutions, which I will link below, that both vouch for adding -webkit-appearance: none; as a solution.
CSS submit button weird rendering on iPad/iPhone
Why is my button style changing when on laptop and mobile
Hopefully this will work for you :)
Try to add this:
in the navbar.css file inside media query :
#media only screen and (max-width: 600px) {
.navbar{
flex-direction: column;
align-items: center;
}
}
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'm using wpbakery wordpress plugin. I added in design options padding and generated css code looks like:
.vc_custom_1541499756394 {
padding-top: 30px !important;
padding-right: 250px !important;
padding-left: 250px !important;
}
I need to remove padding on smaller screen sizes.
My question is, what is best practice to do that?
Simple media query like this or there is better way?
#media only screen and (max-width: 720px) {
.vc_custom_1541499756394 {
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
}
A more flexible approach would be to remove all of the styles you've added to the VC meta box and assign a class to it, pushing the required styles that way. Doing so will enable you to be specific for viewports and enable you to reuse the style across your site.
Set your Design Options like this:
And assign a style here:
Then add the required styles to the class.
Hope that helps :)