I am trying to add a custom style for only internet explorer but it needs to be different for different screen sizes.
To only target IE I'm using this.
#media screen\0, screen\9 {
.site-logo{
max-width: 150px;
}
}
To then add a browser width I've tried this but it doesn't work:
#media screen\0 and (min-width: 59.6875em){
.site-logo{
max-width: 300px;
}
}
This may be easy but I cannot figure it... thanks in advance
You can use the property IE hacks instead
#media screen and (max-width: 59.6875em) {
.site-logo {
color: red\9; /* IE6, IE7, IE8, IE9 */
/* or this */
color: red\0; /* IE8, IE9 */
/* or this */
color: red\9\0; /*Only works in IE9*/
/* every browsers */
color: red
}
}
<div class="site-logo">text</div>
Changed min to max for demo purposes
Related
I need to define specific style-sheets, only for chrome IE Tabs. Is there a way around?
You could use media query to make specific css styles in different browsers. You could check my simple sample below:
/* IE10+ specific styles go here */
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
div {
background-color: aqua;
}
}
/* Chrome 29+ specific styles go here */
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
div {
background-color: red;
}
}
<div style="width:200px; height:200px"></div>
The div will have different colors in IE and Chrome. For more detailed information, you could refer to this thread and this thread.
This code does not only work on the Safari. How do I solve it?
html {
overflow-x: hidden;
}
Overflow-x: hidden does not work properly.
According to the version which you use, try thoses css hack on this website : https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/
It solve me lot of css problems.
Safari 7.1 and newer:
_::-webkit-full-page-media, _:future, :root .safari_only {
prop:val;
}
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
prop:val;
}
}}
/* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { #media {
.safari_only {
prop:val;
}
}}
/* Safari 6.1-7.0 */
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
.safari_only {(;
prop:val;
);}
}
I am trying to achieve a basic task where you hover over a link and it transition into a colour and visa-versa. The problem I am having is that whenever I change the size of the browser, the text affected responds a lot slower. I added a media query where it changes the percentage of the font depending on the browser size so I am assuming this has something to do with it. I created a jsfiddle to show you the problem. Thanks
http://jsfiddle.net/mexicanbandit/vbc25Ly2/
html {
font-size: 100%;
}
/* Medium screens ($mediumscreens) */
#media (min-width: 40rem) {
/* line 26, ../sass/screen.scss */
html {
font-size: 112%;
}
}
/* Large screens ($largescreens) */
#media (min-width: 64rem) {
/* line 33, ../sass/screen.scss */
html {
font-size: 120%;
}
}
I set border property in select element.
select {
border: 1px solid #0f0;
}
IE7 doesn't support select styling. So now my requirement is to remove that style from all IE versions (7,8,9...) and make the dropdown as default. But this property works in above IE8. There is any css-only solution for this.
Note: I have specific IE class in html tag. can I use that in css like
.ie select {}
You can use the below css hacks to specify IE restricted features. Hope those may help you! Give the red color border for all the browsers and set ne color for the IE browsers.
/* IE 11( Specific ) */
#media all and (-ms-high-contrast:none) {
#selector {
color: #FFFFFF;
}
}
/* IE 10( specific ) */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#selector {
color: #FFFFFF;
}
}
/* IE 9( specific ) */
#selector {
color: #000000; /* Ingeneral, for all browsers */
color: #FFFFFF \0/IE9; /* Only for IE 9 */
}
/* IE 8( specific ) */
#media \0screen {
#selector {
color: #FFFFFF;
}
}
/* IE 7( specific and below version ) */
#selector {
*color: #FFFFFF;
}
Cheers :)
There are specific CSS hacks for IE, you can try those if you want like this:
CSS
select {
border: 2px solid #0f0; /* for all browsers */
border: 2px solid #000; /* IE8 and below */
*border: 2px solid #000; /* IE7 and below */
_border: 2px solid #000; /* IE6 and below */
}
Hacking your CSS may seem a quick fix for getting your styles to work across browser types, however, you should really be using conditional statements from within your HTML. e.g.
<!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->
I'm looking for a way to show/hide content for an email newsletter based on the device the customer is opening the email on.
I've currently got this snippet of code in the head section:
#media only screen and (max-width: 480px) {
#mobile { display: block; } /* show it on small screens */
#normal { display: none; } /* hide it elsewhere */
}
#media only screen and (min-width: 481px) {
#mobile { display: none; } /* hide it elsewhere */
#normal { display: block; } /* show it on large screens */
}
Along with:
<div id="mobile">content</div> or <div id="normal">content1<div>
This works fine if I was using it for web, I can scale my browser window and content appears/disappears based on the width of the window, but as soon as I send a test through our email system it works fine on mobile but breaks down on desktop (Gmail).
And because this is an email I can't utilise javascript so it all needs to be html/css.
Anything I'm doing wrong or missing?
I feel your pain. Showing and hiding content in html email newsletters was eluding me for ages!
/* Hide on Desktop */
.hide-desktop {
/* non-gmail */
display: none;
/* gmail */
font-size: 0;
max-height: 0;
line-height: 0;
/* outlook */
mso-hide: all;
/* optional, required only if you're using padding */
padding: 0;
}
#media (max-width: 480px) {
.hide-desktop {
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
}
}
/* Hide on Mobile */
#media (max-width: 480px) {
.hide-mobile {
display: none;
max-height: 0;
}
}
NOTE: Don't forget to inline the .hide-desktop rule, that is outside of the media query.
So using media queries and a number of hacks we can do a bullish hide all for desktop and then undo it media queries. Inversely, because mobile clients have decent support for media queries, we can hide the mobile content with media queries alone. The outlier, gmail, just gets the desktop view – which is unfortunate but still useable.