I have been testing my web page on different devices an the text appears bolder on devices with higher device pixel ratios (iPhone, for example). I have tested this on the chrome emulator as well : The text looks perfect at DPR 1 and appears much bolder at DPR 2.
At DPR 1
AT DPR 2
Is there any way to fix or reduce the effect? Any help would be appreciated.
HTML:
<div class="section" id="section3">
<h1>Projects</h1>
</div>
CSS:
/*to fix safari bold font*/
h1, h2, h3, h4, h5, strong, b {
font-weight: 400;
}
#section4 h1,#section3 h1 {
visibility: hidden;
position: absolute;
font-family: Graphik-Semibold, Roboto;
font-weight: 600;
margin: 0;
top: 3.7%;
}
This is the most relevant code, rest is aligning and media queries for font size.
#media only screen and (max-device-pixel-ratio: 2) {
b {
font-weight: 600;
}
}
#media only screen and (min-device-pixel-ratio: 2) {
b {
font-size: 400;
}
}
You might need to change some of the numbers though to get the result you want this is just an example.
There isn't really any other way to do this that I know of because font-weight is really always different even if the number is the same. Plus it's not really that big of a difference on the DPR 2.0
It looks good :)
Related
I am using Generate Pro theme of Genesis and the biggest con about this theme is the size of the heading when seen in the Mobile. Also the Font.
As the users are shifting more on mobile, is very important for me to make my site look beautiful in Mobile.
What do I mean?
How Title Looks in the Mobile
As you can see it is taking up all the above(up-the-fold) content only for the heading.
All my Content shifts low and I have to scroll for seeing it. Which BTW nobody likes.
Also the Font-Looks Very Bad, it is really light in colour and most of the people have to focus high to see it.
I changed the font with the help of Google Font Plugin but still, the size of H1 is non-changeable, I tried Google Font and also tried changing code font-size in the WordPress but nothing helped. The code I tried changing looks like this.(Below)
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
line-height: 1.2;
margin: 0 0 20px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
Using #media CSS, you can do things like this:
#media screen and (max-width: 780px) {
h1 {
font-size: 25px;
}
/* More CSS */
}
As Chris mentioned, you can use media queries to make your styles have different behaviors depending on the size of the screen. Here are some examples:
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Also, making more specific classes you will make the style has more importance. For example:
body .title h1 {}
will have more importance than:
body h1
or
h1
So I've started using Boostrapp and imideately i tried it on my large screen and it looks like it's zoomed out. On tablet and lap top it's fine resolution 1280 but on 1960 it's just zoomed out.
Before using boottrap i solved this problem with em units and just making font size larger for example 105% for media screen 1600, 110% for media screen 1900. And all my buttons, forms, headers adjust. But that doesn't work in bootstrap.
So my question is how do people handle large screens with bootstrap without writing 1000 lines of code for each screen size.
Use the grid system to your advantage
https://getbootstrap.com/examples/grid/
Here's how they do it: they make your own media queries on top of any frameworks they may have.
You can view my website as an example: calumchilds.com. I use the vw measurements, which means once the screen width exceeds a certain width (on my site, I set it to 2100px - the code is at the end of the answer if you are interested), the text sizes are based on the viewport width, using the measurement vw. For example, my <h2> is normally 32px on a normal-sized screen, but on large screens, the text size is 4vw. You can use the vw measurement for buttons, forms, whatever.
Just experiment with the sizes using either your own screen or Google Chrome Dev Tools (I used the latter.) If you have any questions, feel free to comment below.
#media screen and (min-width: 2100px) {
h1 {
font-size: 5vw !important;
}
h2 {
font-size: 4vw !important;
}
h3 {
font-size: 3vw !important;
}
h4 {
font-size: 2vw !important;
}
h5 {
font-size: 1vw !important;
}
h6 {
font-size: 0.5vw !important;
}
body, p, button, .button, .topnav a, label, input, textarea, .socialmediaprofiles a, .social-media {
font-size: 1.75vw !important;
}
.topnav a {
padding: 16% 32%;
}
button, .button {
padding: 0.5em 1em !important;
border-width: 0.2vw !important;
}
}
Bootstrap already added media queries inside the library. To get it work follow the bootstrap guide. Like use the proper grid class for each container (col-lg-12, col-md-12, col-sm-12). For each UI elements Bootstrap has proper style class. For any change if you want to modify anything, try to create some file like bootstrap.override.css to override the css class or styles. Finally better to start with reading the bootstrap guideline.
I can set my <p> tags to a certain text size. But when It's set i want to be my <h2> to be 20% bigger.
Is this even possible? If yes, could you guys please help me a little bit on my way?
This is what i tried:
h2, .h2 {
font-size: #font_size + px * 25%;
Thanks in advance.
Armando
Yes, you can use rem units for this.
The rem unit looks at the font size of the html or root element. So if you define your html unit size, you can scale your other font sizes based on that.
It looks like this:
html { font-size: 10px; }
body { font-size: 1.2rem; } /* 12 px */
h2 { font-size: 2rem; } /* 20px */
More information can be found here:
http://snook.ca/archives/html_and_css/font-size-with-rem
Keep in mind this is supported from IE9 and up:
http://caniuse.com/#search=rem
I'm trying to code a responsive design email-- I've combed through here and couldn't find anything that exactly helped. I'm really not seeing any part of my #media query coming through-- the images are staying at the size I coded in the #media query, and not resizing back in browser. The mobile style for the fonts I've coded also aren't sticking. Here's some of the code:
<style type"text/css">
body {background-color: #e5e5e5}
p {
font-size: 13px;
font-family: verdana;
line-height: 21px;
color:#4B5460;
}
a {
font-family: verdana;
font-weight: bold;
text-decoration: underline;
color: #4B5460;
}
.footer_link {
font-weight: normal;
text-decoration: none;
color:#0c5bba;
font-size: 11px;
}
#media screen and (max-width:480px) {
.graf_font {
font-size: 16px;}
}
.reg_button {
max-width:200px;
}
.mobile_hide {
display: none;
}
.chiclets {
max-width: 100px;
}
.snapshot {
max-width:75px;
}
}
</style>
Let me know if you need more code-- I'm a beginner with this, so I know I'm missing something glaring!
Thanks!
It looks like you have an extra closing bracket.
.graf_font {
font-size: 16px;} /* <-- remove this bracket */
}
Also check to make sure the email client your in even supports media queries.
https://litmus.com/help/email-clients/media-query-support/
Max-Width is not fully supported for email. I have found using percentages to be a useful alternative (e.g. width=80%). If you can make images take up a certain percentage of the screen or table cell on mobile images instead of being a particular pixel width it may be more successful. If you still aren't having success, try adding !important after your CSS.
Also, you'll want to style your text inline, as a lot of that will get stripped by different email clients.
I would also suggest that you check out https://litmus.com/community. It is a newly free source with a lot of up-to-date info on email design and people who know a lot more about email design than me.
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}