I am looking to add a hyperlink in a HTML email but only on mobile through CSS3. Is there any CSS3 property to do that?
This is not possible via CSS.
You have a couple options:
Something like <span class="mobile">The link</span><span class="desktop">No link</span> plus a #media query to show/hide the two spans on different device sizes.
Style the link on desktop via a #media query so it looks like normal text (i.e. color: #000; cursor: default; text-decoration: none;)
ceejayoz is pretty close. You just have to reverse your thinking a little bit.
If you're only putting the hyperlink on mobile/smaller screens this can be done easily with inline css and an #media query in the <head>. (Note. I would recommend sending the emails through an Email Service Provider to make sure your #media query remains untouched.)
This is the approach I would take.
CSS
#media only screen and (max-width: 480px){
a[class="link"] {
font-size: 12px !important;
color: #000001 !important;
text-decoration: underline !important;
}
}
HTML
<a class="link" href="http://yourlink.com" style="font-size: 1px; color: #ffffff; text-decoration: none;">yourlink.com</a>
I should also mention not all mobile email clients will recognize the #media query properly. Gmail on Android for example doesn't work very well when developing responsive HTML emails.
Related
I'm building out an email using mjml and the design is pretty standard and not flexible to change.
In gmail the copy becomes illegible because gmail inverts the white copy to black copy.
I want gmail to keep my intended stylings, is there a method to ensuring gmail doesn't invert anything?
I've tried:
Applying !important to all the elements I require.
#media (prefers-color-scheme: dark) {} but gmail strips media queries.
<meta name="supported-color-schemes" content="light only"> no luck.
Any help would be much appreciated.
Thank you
Moe
You can do this hack:
<style type="text/css">
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
</style>
and include dark mode media query in your CSS:
#media (prefers-color-scheme: dark ) {
.body {
background-color: #CCCCCC !important;
}
h1, h2, h3, td {
color: #9ea1f9 !important;
padding: 0px 0px 0px 0px !important;
}
}
That being said, this will only work sometimes. To style against dark mode the best you can do is style your email in a way that won't be affected when dark mode is active.
Until there is a definitive solution (there is nothing for the time being), you either have to accept the idea that dark mode will stay active, or do what you can to style against it.
Here is a resource with more info. The world of email is still not caught up with the browser, many styles are still ignored by different clients and most solutions are experimental at best.
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
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;
}
}
For some reason my text just stays the same size no matter what I do, however.. the
<div id="box"> </div>
will respond to the the device it's being viewed on.. :/
Link to my website (it's only an intro page): view-source:http://www.lux-boutique.co.uk/
And the css page: http://www.lux-boutique.co.uk/lux.css
The text which I'd like to be responsive is:
<p style="height: 12%; padding:0px; margin: 0px; line-height: 1.1em; font-color: black; color: black; text-align: center; font: normal normal normal 350% 'Palatino Linotype',serif;">LUX <br><strike>BOUTIQUE</strike></style>
Any help is appreciated :D :D
I checked your webpage and observed that you are using Media Queries for responsive text size.
What exactly is happening there is on lux.css
line 77 You have : p - 2em !important
You need to override that .
You can do two things:
Remove !important from there so other styles get applied ,
OR
Add important in media queries Overriding the style on p tag.
Ex:
#media screen and (max-width: 1020px)
p {
font-size: 2em !important;
}
If you separate your CSS from the HTML you should used media queries to make your font size responsive.
Your sites font size is set by either the visitors default browser styles or a size you set. The same font size will be used in all cases if media queries are not used.
Divs are the same however your div is simply doing as it is told (100% of whatever the screen size is).
Documentation on media queries ›
CSS Tricks showing how to use media queries for mobile sites ›
I don't understand why form width increases on Safari for iPhone. I tried to modify my CSS, and seems that "font-size" caused the problem. Any Solutions?
This is the code:
HTML:
<input type="text" id="form" class="newsletter_input" name="email">
CSS:
.newsletter_input {
border: 0px solid #fff;
background: #fff;
color: #0ce980;
font-family: 'Lato', Arial;
font-weight: 300;
font-size: 42pt;
width: 855px;
height: 100px;
margin-left: 50px;
margin-top: 10px;
text-align: center;
}
.newsletter_input:focus {
ouline: 0;
}
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
.newsletter_input {
width: 855px;
}
.newsletter_input #form{
font-size:42pt
}
}
Though it's not ideal to hardcode 855px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.