This question already has answers here:
How to apply specific CSS rules to Chrome only?
(13 answers)
Closed 5 months ago.
For some reason Chrome shows this span unusually higher than Firefox.
As a result, I wrote the following CSS:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
The following is the HTML:
<li class="nav-item">
<a
class="nav-link"
data-toggle="tooltip"
title="Shopping cart"
id="{{ shoppingCart }}"
routerLink="/shopping-cart"
><span class="justForChrome"
>Shopping Cart<span id="counter">{{ counter }}</span></span
></a
>
</li>
While this is working in Chrome, now Firefox is showing the span to high. If I set the margin-top to 100% in Firefox developer tools, then it is perfect, but margin-top at 100% on Chrome sends the span upwards.
What can I do? I swear this was working a few weeks ago. I would expect that Firefox would not even find the span.justForChrome selector rule in the CSS
Migrating OP's solution from the question to an answer:
Whether it is the fact that I have to compile the Angular app, which
creates a new "bundled" stylesheet or if it is because I placed the
media queries at the end of the scss file, I do not know, but here are
the media queries that I used at the end of the scss file, which
worked:
#media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.selector:not(*:root),
span.justForChrome {
display: block;
margin-top: 23%;
text-align: right;
}
}
#-moz-document url-prefix() {
span.justForChrome {
display: block;
margin-top: 94px !important;
text-align: right;
}
}
Currently the site is still in beta, but here is a screenshot:
Both the words "Shopping Cart" and the number are on the "baseline" of
the navbar.
I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
Note that .chrome is a class name and you can change with other class names.
Check the following JsFiddle or snippet:
.test {color:red;}
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>
Related
Is there a way to override a css for only Safari browser?
I am using Safari version 15.1 but looking to be able to target any version.
Tried the following via codepen. But it does not override in Safari.
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}
<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>
Seen examples such as following explaining safari overrides.
But these are not overriding a css class.
is there a css hack for safari only NOT chrome?
How do I add a css line ONLY for Safari
CSS hack for Safari ONLY
https://solvit.io/bcf61b6
-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation.
Only thing I can imagine to work is to use JavaScript to target the user agent:
function detectBrowser() {
if (navigator.userAgent.includes("Safari")) {
// your code here
}
}
Here is a snippet of my CSS code for the media query:
#media (min-width: 320px) and (max-width: 480px) {
.vertical-bar{
display: none;
}
.fa-bars{
position: fixed;
left:280px;
top: 20px;
}
.fa-bars.animate{
top: -71px;
}
.fa-bars.sticky{
top: 25px;
}
}
The code works fine on both mobile chrome and Firefox but not on opera. I do not know why. Is there any special keyword for opera I'm missing to include in my CSS code? Please help me.
You have to use Modernizr, or Respond;
Just see the documentation provided in the documents if you really want to do it.
These two repositories that I have mentioned above will take care of everything
This question already has answers here:
Styling input buttons for iPad and iPhone
(6 answers)
Closed 4 years ago.
I have simple CSS for styling a button: <input class="button" type="submit" value="Join">
...
.header__form-submit .button {
background: #3371E3;
border-radius: 0 5px 5px 0;
}
...
#media screen and (max-width: 767px) {
...
.header__form-submit .button {
width: 100%;
border-radius: 5px;
}
}
It renders fine on desktop, on any browser and on mobile preview in Chrome. However, when I open this on an iPhone the button has round corners.
Chrome preview:
iPhone either Chrome or Safari:
Why is this happening? Is there a problem with styling <input /> on iOS?
Thank you
disable default operating system styling
webkit-appearance: none;
Edit: add this to your css
input {
-webkit-border-radius:0;
border-radius:0;
}
As well as the above line.
The way to go is:
<button class="button" type="submit">Join</button>
I've finished my initial code in my localhost and just migrated the files to my linode. Google Chrome doesn't seem to recognize the CSS padding settings I've placed in my main settings. Firefox and Safari does not seem to have a program rendering it.
main.main {
padding-top: 50px;
}
<main class="main">
<h1>Sometext</h1>
</main>
try use this
#media screen and (-webkit-min-device-pixel-ratio:0) {}
Please try this:
#media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
main.main {
padding-top: 50px;
}
}
I'm making a website using HTML5 & CSS3. It needs to be responsive, so I'm making use of mediaqueries. I have set the following:
#media screen and (min-width: 1024px) {
#hamburger {
display: none;
}
#desktop-nav {
display: inline;
}
}
It works fine in all browsers, except firefox (latest version). It already executes on 800 & something.
Anyone any idea?
Thanks!