I have to correct some text size. If you fx look at this page: the headlines are going out from the page on a mobile device, (or in the 'blisk' browser) so you have to scroll right to see the text.
The site has a lot of pages, and I cannot find the CSS or Sass file that is controlling the font.
Does anybody knows if I can see in the browser which document the <h2> tag is using. As I see it I cannot see it through the developer tools?
You have just one minified css
<link href="/bundles/css?v=SJ37P6CfqPJUAiVuLtUYrkvpJkXmJUlOWclWB_n1UKw1" rel="stylesheet"/>
The problem is here:
.h2, h2 {
font-size: 40px;
padding-top: 30px;
}
Since you have long words the browser try not to broke the words into multiple lines. You can decrease the font size for a certain breakpoint:
#media screen and (max-width: 640px){
.h2, h2 {
font-size: 26px;
}
}
As Alessio mentioned the error lies in the h2 part.
If you switch over to developer tools you can see the width of certain html elements (some kind of overlay). In this case the h2 element goes over the border, which results in that scrolling problem. Your text or specifically this word "Søgemaskineoptimering" is too long and too big to fit in one line (mobile view). You can either change the font-size or set a wordbreak . Alessio already explained the breakpoint approach.
Best regards,
KN
Related
I have to send a (complex) html-mail to various receivers and desperately try to bring it to work for various email clients (at least Outlook, iOS and gmail).
I now have a version that works for Outlook and iOS, but not for gmail (Android).
Short description:
There are various css styles and media queries defined in the header.
The css class conttext (see snipped below) defines the font family, font size, and so on..
The css class conttextboldblue (see snipped below) set the attributes: color: #0000FF; (blue) font-weight: bold;
The class conttext is set to the td element and works on any platform.
The class conttextboldblue is set in span in the td and works on all platforms (including GC that I use for tests) except gmail.
If I set the style inline (last row in the snipped below), it works in gmail, but all other clients lose the styles set in conttext (font family, font size and so on).
As I worte above, it's a huge and complex email and I don't want to remove all css styles and put anything inline (further, I also need media queries).
I have searched the internet and also SO and only found, that - if a css style to td is defined, all other css styles are removed in gmail... :-(
And.. that exactly seems to be the case...
Therefore my question:
- Does anybody have a solution to bring that to work also in gmail?
Thanks for any hint!
Code snipped:
<td><span class="conttext"><br>
Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
<br>
Some text <br>
</span>
<span class="conttextboldblue">This text is NOT (only in gMail) not formatted -> conttextboldblue is just ignored</span><br>
<span style="color:blue; font-weight:bold;">This text is formatted but all other clients (iOS und Outlook) lose the formats defined in conttext!</span><br>
Not all versions of Gmail are equal, and not all of them support <style> elements. In particular, if you test in Gmail (Android or iOS) with a third party email address (like an #outlook.com address for example), you won't get support for <style> and only inline styles will work there. (I wrote a blog post about Gmail CSS support here.)
Gmail clients are also known for being picky about any misformed CSS and removing entire <style> tags if they see something they don't like. For example, having a rule like #media { #font-face { … }} will get Gmail (all clients) to remove the entire <style> element that contain these rules. (But feel free to post your entire code to get detailed feedback on this precisely.)
For these reasons, it is usually considered a best practice to inline your styles in an HTML email.
Here now my findings...
In general:
Our html email contains images (with links), special formats to text (bold, blue, red) tables, bullets, internal links and has to be sent to about 12k recipient’s, whereby we do not know, on what devices they will read the email.
A few years ago, we have optimized a similar email only for desktop (Outlook). These times are over definitely - we have to expect, that more than 50% will read the email on mobile devices (this is fact).
It’s incredible complex and time consuming to create such an email, that is at least readable without problems on desktop (Outlook) and mobiles (iOS (iOS mail app) and Android (gmail)).
Noted (main) issues (to my specific html email):
Outlook need a smaller font size and a fix width for the table and also the images to look O.K.
Outlook further need special settings for bullets, that are not compatible with the mobile clients.
Outlook and iOS (and any browser, e.g. Google Chrome) respect css-stiles (set with “class=”) and media queries - whereby I have not found a way to bring this at work with gmail. For me, it seems as gmail delete all css-settings after opening the email (maybe there is a way to bring it to work, but I gave up after a few days of try and error). The only that works (for me), is to apply styles (style =) directly to the html elements. If have found some information’s that it also works in gmail, but with (massive) limitations https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
The mobile clients need a viewport entry and to set images and tables to 100%, else the email is scaled automatically to a not to read “micro font” (and the users have to zoom to be able to read the text)
Internal links work on Outlook and Android, but not in iOS (else iOS has good support for css and the behavior is, as it should be)
I have not found a real “solution” but (only) a workaround.
Viewport entry:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the style tag it set all css for outlook (width to images and table, font size and “special” settings for bullets (wrong for the mobile clients).
ul, ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}
Then I set base settings for iOS mobiles in a media query
#media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
width: 100% !important;
}
This resets the outlook special settings for all iOS clients with max width of 1024px.
Then I set css for various iOS devices - example:
/*IPhone 6/7/8: 375px */
#media screen and (max-width: 375px) {
.conttext {
font-size: 20px !important;
line-height: 22px !important;
}
.Headline0Boldleft {
font-size: 20px !important;
line-height: 22px !important;
}
.headline {
font-size: 20px !important;
line-height: 22px !important;
}
.headtext {
font-size: 20px !important;
line-height: 22px !important;
}
.conttextboldblue {
font-size: 20px !important;
line-height: 22px!important;
}
.conntextbold {
font-size: 20px !important;
line-height: 22px !important;
}
}
And then, I set the attributes for Android (gmail) in addition direct to the html elements.
Example:
<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...
In this example, I set the font color to red and bold and a border.
Note: the same is defined in classes style1 (border and padding) and conttextboldblue.
So...I set the attributes double (on time inline with Style= and onetime in the css classes).
Android (gmail) only respect the "style=", whereby iOS takes the css style with priority.
So I can define further styles (e.g. font size) for iOS in media queries.
Android (gmail) seems to apply a “usable” font size automatically.
As mentioned above, this is not a solution, but a workaround for my case.
If I would have further html mails to send out in the future (what is not the case), I would invest (a lot) more time to find a real solution...
Further hints:
Validate your html code here:
https://validator.w3.org/#validate_by_upload
Note: The tool shows double assigned styles (inline and with css) as error, but it works nevertheless
Take care, that you have the correct notation to comment lines:
CSS:
/* Your comment */
HTML:
<!-- Your comment -->
(my editor has commented lines in css as html comments, what has cost me some time until I noted that...)
Load your html email in Google Chrome, press F12 (debug mode) and check it there (especially, if you have media queries in your html).
If you have media queries and GC don’t show it, something is wrong with your code.
With GC you easily can simulate mobiles and have a look, if the media queries are applied correct.
I hope, this helps somebody...
I have a page with an emoji followed by a space and some text. For example, "👥 Friends" (character is "busts in silhouette", U+1F465). In Safari and Firefox on macOS, it renders with a space between the emoji and the following text as expected.
In Chrome, however, the space appears as if it's absent:
If I remove the space, Chrome renders the text overlapping with the emoji. It seems like the width of emojis as rendered in Chrome is less than the actual character width.
Is there any way I can get the desired appearance (a normal-width space) cross browser without resorting to an image or icon font? I've tried messing with some CSS properties like text-rendering without success.
<style>
.friends {
font-family: Helvetica, Arial, sans-serif;
}
</style>
<span class="friends">👥 Friends</span>
JSFiddle
I had the same issue, and found out that it happened on non-retina screens only.
To fix it, we applied a margin through a media-query like this:
<span class="friends"><span class="emoji">👥</span> Friends</span>
<style>
#media
not screen and (min-device-pixel-ratio: 2),
not screen and (min-resolution: 192dpi) {
span.emoji {
margin-right: 5px;
}
}
</style>
This is a pretty minimal media-query. You should probably use a more complete one like https://stackoverflow.com/a/31578187/1907212.
This is a Chrome bug (See detail here)
This is related to displaying emojis in Mac Chrome on a non-retina screen. My monitor had a non-retina screen (where the spacing / cursor position were info), but were absolutely fine on my Mac.
It's February, 2020, and this issue still very much exists (link to open Chrome bug). Chrome 88.0.4324.150 on MacOS X 10.15.7 on a 2019 16" MacBook Pro: dragging a browser window between the internal Retina monitor and an external ultrawide monitor changes the rendering of the emoji.
As an alternative to Julien's answer, instead of selectively specifying a margin-right to correct an imbalance, we can "force" the width of the actual emoji character(s) to be equal in a cross-browser way using letter-spacing.
In essence, our issue is that most characters with the Roman alphabet don't have a height-to-width ratio of 1:1, but most emojis (roughly) do have a height-to-width ratio of 1:1. This is one way of describing what we're seeing with the spacing between emojis and ANSI characters.
See example screenshot here
letter-spacing sets the horizontal spacing behavior between text characters. When paired with CSS em units, we can use this property to "force" each character/emoji to render in a roughly 1:1 box. This might need to be adjusted depending on the font or character set you use.
According to the sources below, a Roman character is often roughly 0.5 as wide as it is tall, so we can simply do:
span.emoji {
letter-spacing: 0.5em;
}
<span class="friends"><span class="emoji">👥</span> Friends</span>
<style>
span.emoji {
letter-spacing: 0.5em;
}
</style>
This method means that in browsers that render emojis correctly, we aren't adding an extra margin-right.
https://graphicdesign.stackexchange.com/a/114955
https://web.archive.org/web/20210118205344/https://www.lifewire.com/aspect-ratio-table-common-fonts-3467385
What I would do is add another span within the .friends span that contains the emoji, have it use a right margin, and not have a space after it:
.friends {
font-family: Helvetica, Arial, sans-serif;
}
.friends span {
margin-right: 10px;
}
<span class="friends"><span>👥</span>Friends</span>
That way you don't have to worry about space rendering ;)
Hope this helps! :)
Removing BlinkMacSystemFont from font-family fixed issue for me, you need to close and reopen tab to see effect.
As of (at latest) Chrome 79, this issue no longer exists.
This problem still exists on Chrome 83 on MacOS 🤨
I think I found the solution
[data-emoji] {
font-style: normal;
font-weight: normal;
}
[data-emoji]:before {
content: attr(data-emoji);
margin-right: .125em;
}
In my Web application I am using google font 'Lato'.Now Requirement is I should use 'Roboto' font for my web application.
I replace Lato font with Roboto but This reflect major change in terms of spacing in whole Web application.
Where I am doing mistake?
I cant share whole page screenshot.
Original with Lato
Disturb with Roboto
Every font-family have own letter spacing and line-height. Now you need yo set re-structure your letter spacing and line-height!
Definitely in specifiing sizes for elements. If you need to translate the site to other language, you meet the same problems. If you change some text you have the same problems. And so on.
Everyting depending on text should not have explicit sizes (width at least). So when you change te text or the font, element just enlarges or shrinks without negative effect in most cases.
The only exception is placing some set of elements inside of one raw or limiting their max-width. These can cause problems if more text appears or new font is wider. Anyway, it's not good if the whole site consists of such elements. And Roboto is not wider than Lato, so it's not your case.
Is it possible to view your webpage ?
You can also change the spacing between letters using the css property "letter-spacing"
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 5px;
}
<h1>SAMPLE</h1>
<h2>SAMPLE</h2>
I know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
I'm doing some work on a website but can't figure this out at all! For some reason the font in the nav bar on the homepage is smaller then on the rest of the site. the site is built using wordpress and I have never had this issue before!
I have been trying to use the chrome dev tools to figure it out but so far i haven't been able to find a solution. if somebody has the time to take a look and can help me figure this out I'd really appreciate it. Thanks
Howmepage: http://www.abbeyvideoproductions.com/
On the homepage you can see the font in the nav is smaller and sits further to the left of the nav bar as a result compared to any other page on the site:
Other page example: http://www.abbeyvideoproductions.com/packages/
I think there is a problem with % font-size.
Try to define the font-size and line-height with px
style.css (line 903)
.builder-module-navigation {
font-size: 13px;
line-height: 37px;
...
}
Just delete property form .builder-module-navigation li a font-size: 112.5%;
First of all, your HTML isn't valid. Don't start with a div!
You have two places with different stylesheets
post-teasers-left/style.css vs. post-teasers-right/style.css
style-home.css vs. style-pages.css
So, this would be the first place to investigate.
In your case, you have a different font-size, although it is defined as 112.5% in both cases. From MDN - font-size
Percentages refer to the parent element's font size
This means, you must look at some ancestor's font-size. When you go up the heirarchy, you will find that in one case it is font-size: 100%, and in the other case it's font-size: 1em.
To solve your problem, you can either redefine the font-size with absolute values in the nav bar as #kkern already suggested, or use the same values in both parent's font-size.