Colour transition effect on browser - html

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%;
}
}

Related

How To Change Font Color on Mobile Res

I'm having hard time trying to fix this small issue with my website, so the body text shows in white on the desktop, which is good, but when I use the smaller devices I don't want the text to show white because it collapse with the white background and you can't read the text. How can I change it to another color for mobile versions, with CSS, or HTML?
This Is How It Shows On Desktop
This Is How It Shows On Smaller Screens (Phones, Tablets, etc)
Edits from Stackoverflow (that didn't work)
CSS:
#media only screen and (max-width: 600px) {
.mob1 {
color: #ffffff;
}
}
#media only screen and (min-width: 600px) {
.mob1 {
color: #000000;
}
}
HTML:
<p style="color: aliceblue;" class="custom-article wow fadeInDown" data-wow-delay=".2s"><span class="mob1">Changed Text</span></p>
I tried to add the mob1 to the p class, didn't worked either.
Try to use media queries.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
For more details: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
try this
on the html file, if it is a p element, or whatever type of text element it is,
<p class="colourTest">TEXT</p>
in the css file:
//for screens smaller then mobile
#media only screen and (max-width: 600px) {
.colourTest {
text-color: black;
}
}
//for screens bigger then mobile
#media only screen and (min-width: 600px) {
.colourTest {
text-color: white;
}
}

Changing font-size on root doesn't affect #media queries [duplicate]

This question already has answers here:
Is is possible to overwrite the browser's default font-size in media queries using EMs?
(2 answers)
Closed 5 years ago.
I'm working in a page that has
html {
font-size: 62.5%;
}
That means 1rem = 10px instead of 1rem = 16px So far, so good.
The problem is that it doesn't affect #media queries.
/*
it should change at 600px and not 960px.
the #media ignores the 62.5%;
*/
#media (min-width: 60rem) {
.el {
background: blue;
}
}
Check this codepen to see the issue.
http://codepen.io/sandrina-p/pen/bqGZjE
I tested on a retina monitor, with Chrome and Firefox. On Safari the issue doesn't happen.
Any solution?
I found the issue.
In #media you need to use em and it will always read the default browser size, ignoring your custom font-size. The same doesn't happen with rem.
So in this case, you need to set 37.5em (600/16), and it will change the at 600px in every browser including safari.
https://zellwk.com/blog/media-query-units/
(...) the only unit that performed consistently across all four browsers is em. There aren’t any differences between em and rem with the exception of bugs found on Safari.
(...) Unfortunately, px media queries remained at 400px in the third experiment, which makes it a no-go if you intend to support users who change their browser’s font-size value.
Hence, my conclusion after these experiments is: Use em media queries.
#media screen and (max-width: 37.5em) {
.el {
background: blue;
}
}
No. It doesn't have to do anything with you html font-size or your .el font-size. Because 1rem is 16px. So you have to calculate it as per 16px.
#media (min-width: 37.5rem) {
.el {
background: blue;
}
}
This would be your 600px media queries breaks.
Try this
<div class="el">
hey there
</div>
// =========== basic template =========== //
$safeArea: 1rem;
body {
font-family: sans-serif;
}
// ======== actual codepen code ========= //
html {
font-size: 62.5%;
}
.el {
background: red;
font-size: 1.6rem;
}
/* it should change at 600 px and not 960px.
the #media ignores the 62.5%;
*/
#media screen and (max-width: 60rem) {
.el {
background: blue;
}
}
see this codepen - http://codepen.io/anon/pen/aJbxOQ

CSS target internet explorer & screen width

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

Using CSS to selectively display content, avoiding conflicts

I'm using CSS to selectively display content depending on viewport size. E.g.:
CSS:
.hires, .midres, .lowres {
display: none;
}
#media only screen and (min-width: 801px) { /* hires, desktop */
.hires {
display: inline;
}
}
#media only screen
and (min-width: 600px)
and (max-width: 800px) { /* mid res, tablet */
.midres {
display: inline;
}
}
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
.lowres {
display: inline;
}
}
HTML:
<p class="hires">Resolution: high.</p>
<p class="midres">Resolution: medium.</p>
<p class="lowres">Resolution: low.</p>
<p>This paragraph will always be displayed regardless of resolution.</p>
Which works, but only up to a point. When it comes to images, it turns out that I've neatly painted myself into a corner here. Because somewhere down the line there's something like:
CSS:
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img {
float: none;
display: block;
width: 100%;
height: auto;
}
}
Which means that in the following case:
<img src="foo.jpg" class="hires" />
the image is always displayed regardless of viewport size, because the 'display: block;' overrides (conflicts with, really) the preceding rules to selectively display the image or not.
Unfortunately 'display' has no opposite of 'none'. I can't use 'visibility' because that will still leave a gap where the hidden content used to be. I could use jQuery to show() and hide() content, but I'd rather not move part of my styling from the style sheets (where it belongs) to Javascript (where, strictly speaking, it doesn't).
Unfortunately I noticed this little snafu only now, quite a way into the project. Which means I'm an idiot. :-)
What would be the best way to deal with the above issue?
You could either wrap images in something with the class lores or use img.lowres as selector in your css, ie
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img.lowres {
float: none;
display: block;
width: 100%;
height: auto;
}
}

How to make content show/hide depending on device

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.