I am coding email newsletter that is to be mobile compatible , My problem is that when there is any numerical value or email address it becomes blue just as anchro tag , i ste it text-decoration:none; did set its color:#33333; but that still looks bad as in attached image
Is it possible to change this blue color to black and make them without hyperlink?
use this
#media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (orientation : portrait){color:#333333 !important;
text-decoration: none;}
Here's what you should do. Since it gets converted into an anchor tag, use that to your advantage:
<a style="text-decoration:none; color:#333333;">numerical value</a>
Using empty anchor tags like this won't make it into a clickable link on most mail clients, and will allow you to control the styling on clients that convert it to anchor tags, since that anchor style will be defined by you before hand.
Related
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
I tried to declare an alternative formatting for mobile devices but the code after the opening bracket is not taken into account and I realised that the closing bracket isn't even taken into account (the color formatting is different). I declared #media screen and (max-width: 800px) and in the html code I have .
I don't know what I am doing wrong.
#media screen and (max-width: 800px){
h2 {
font-size: 24px;
}
}
I am using coffeecup just to do a simple website and the code appears as such:
Code in CoffeeCup
In the picture it shows that the closing bracket is not formatted properly.
Thanks for the help!
Your #media has no problems, it´s not highlighted because the last closing bracket is a second level bracket, it´s ok so. have you another #media in your code?
I have an HTML banner that is being applied to emails that come in to our environment from an external sender. After testing, it was revealed that the banner blocks a person from previewing a received email on the mobile device. I have zero knowledge of HTML or CSS. What I have is from piecing together from bits here and there. The current articles I am reading are telling me to use the following code:
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
I've altered my HTML to this:
<html><head><style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style></head><body><div class="mobileHide"><table style="border: 1px
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>
</tbody></table><h1></h1>
<br />
<mc type="body">
</div></body></html>
Can someone point out what I am doing wrong?
One thing I can see is a typo in your style attribute:
<div class="”mobileHide”">
...has two double-quotes. It should be this:
<div class="mobileHide">
Some desktop email clients also show email preview text, so any solution that removes the header only on mobile clients will leave desktop clients with the same problem you are trying to solve. Instead of targeting mobile clients, it makes more sense to work with the preview text directly.
To get custom preview text on your email, it has to be the first text that appears in your email's body section, even before your header.
From litmus.com:
Preview text is pulled from the first few lines of text found within an email.
So what's happening is that the email client is reading the first few lines of your email to determine what to show as the preview text, but since your header is first, the email's preview text is the gibberish from the header section instead of the marketing speak that you want it to be. The parsing of the email preview as far as I can tell is unaffected by CSS styling such as display: none, though I could be wrong about that.
What Litmus recommends you do is to add an extra, hidden element before your email header (right after the opening body tag) that contains the preview text that you want to show in the email client. You'll want to use this code:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
It's not pretty, but email HTML itself is not pretty. What this does is it makes a hidden element at the top of your email that the client will show as preview text, but that won't actually show to the end user when they open up the email.
In your situation, you might want to pull this preview text programmatically from the incoming email, then apply this element before applying the header.
Does this constitute spam or misleading behavior? Does it hurt your deliverability? Litmus says that it's fine in their experience:
Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.
I'm building an HTML Email, and would like to use #media query to display one banner for mobile and another for desktop/webmail screens. I know most email clients strip out the css found in the tag. Is there a way to put the css inline? Here's an example of the code in currently..
<style type="text/css">
#media (max-width: 1000px){
/* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
img#standardBanner{display:none !important}
img#mobileBanner{display:block !important}
}
</style>
Also is there any other way to be able to do this? I'm not having too much luck.
Thanks!
To answer your question, for a pure css solution the answer would be no it is not possible.
You could though serve the images from a server and use a scripting language like PHP to get the device information of the user and then serve the appropriate image based on that using PHP function header.
<style type="text/css">
img#standardBanner{display:block !important}
img#mobileBanner{display:none !important}
#media (max-width: 1000px){
img#standardBanner{display:none !important}
img#mobileBanner{display:block !important}
}
</style>
I have a HTML "report" page that contains amongst other things a HTML view that looks like this:
When you print preview this though, it looks a lot less nice :)
I know about CSS for printing, but what I don't understand is how my HTML is being interpreted like that - for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don't show up at all in the print preview. Also, why would the white text on black on the left not print like that?
Are there some rules for print-friendly css? Any suggestions here?
BTW - I tried previewing in both IE 10 and chrome - both pretty much did the same
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
EDIT: AN ALTERNATIVE APPROACH
Since you're looking for a way to provide readable information also on the printer you may provide specific content just for that:
in your HTML:
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
in your stylesheet:
#media screen,print
{
.blue_border {border: 1px solid #00F;}
}
#media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
#media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser
The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).
In your case, this is problematic since there is no text.
Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.
Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.
Check if your browser suppresses background colours when printing.