I have this basic css style.
What am i trying to do is to make the text responsive(fonts), i know i have to use ems / rems to do that ( i choose rems with a fallback to px not sure if it's right but you can see in the code how i did, the px i'm not sure if i set it right), the formula i used was font size divided by 16px.
Now we have a relative font size for h tags i think.. but still if i would like to resize the browser doesn't do any magic. Can you help me understand how to make the fonts responsive using rems or something else, using rems/other on setting margins, paddings, line-height? a complex example and explanation is welcomed :-d thank you very much for your time.
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #000000;
position: relative;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100%;
min-width: 0;
}
html,
body {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
margin: 0 0;
margin: 0 0;
}
h1 {
font-size: 3px;
font-size: 3rem;
}
h2 {
font-size: 2.25px;
font-size: 2.25rem;
}
h3 {
font-size: 1.5px;
font-size: 1.5rem;
}
h4 {
font-size: 1.125px;
font-size: 1.125rem;
}
h5 {
font-size: 1px;
font-size: 1rem;
}
h6 {
font-size: 0.875px;
font-size: 0.875rem;
}
Here is a comparison between the sizing units: http://www.narga.net/understanding-font-sizing-in-css-em-px-pt-percent-rem/
This should get you pointed in the right direction.
Related
The h1 font-size percentage isn't changing the text size according to the screen and just stays at 20px. Am I missing something?
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
Try using this instead.
font-size:2em;
Ems are a more appropriate relative size unit for text. Also, without seeing your html structure, it's hard to know if there isn't some other element obstructing this font-size change.
I have very simple element on page - it's a quantity balloon for basket, which I'm unable to set properly. Not only the font is dramatically different, but its vertical position differs significantly for a small element like this:
I've tried some solutions from stackoverflow (e.g. to set line-height -1 from font size), but no luck. Here is the code:
HTML:
<span class="basket-qty">6</span>
CSS:
.basket-qty {
display: block;
text-align: center;
background-color: #C1637D;
color: #fff;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
font-weight: 500;
border-radius: 15px;
width:15px;
height:15px;
}
JSFiddle: https://jsfiddle.net/e563tgdn/
Could it "just" be Font Rendering? Do css-setting like this help to normalize?
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-text-size-adjust: 100%;
I have defined my Font-size as 98% in the body, just as follows:
body {
color: #6B6B6B;
background-color: #262626;
font-family: arial, sans-serif;
font-size: 98%;
line-height: 1.32;
text-align: center;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
The problem now, how can I make my h1 a bit bigger? and h2 big as well?
I tried:
h1 {
font-size: 120%;
line-height: 1;
}
But I don't think this is right, do I need to use px or em for my headers?
Using % is valid CSS.
You can have
h1{
font-size:150%;
}
You can use em what is able to scale your font. For example:
h1 {
font-size: 1.2em;
line-height: 1;
}
is equal to 120% of current font size.
Here you have useful article about font sizing.
Base on #verbose-mode comment, you can avoid the h1 and h2 elements to be selected by using the :not selector:
body {
color: #6B6B6B;
background-color: #262626;
font-family: arial, sans-serif;
line-height: 1.32;
text-align: center;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body *:not(h1):not(h2){
font-size: 30%;
}
You can see this fiddle.
I have the following example Jsfiddle where i've posted all 12 columns and the required css. the next piece of code i think it's the one that's causing the problems. In the live example you will notice that these two columns at less than 320px screen width will break the container and scrollbar will appear. I've tried fixing this problem but i didn't find a solution so far. Anyone around who can help me out ?
<div class="col-mb-2 col-8 col-dt-5"><p> </p></div>
<div class="col-mb-2 col-2 col-dt-8"><p> </p></div>
Update:
Added a picture to see the portion of the problem
so you need to write media query
#media (max-width:312px) {
.col-dt-5, .col-dt-8{padding:0px 2px !important}
}
(max-width:312px) means, the width of the scree is 312px or less
I think the problem is with this class:
.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em; /* <--- this is the problem */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif
}
you need to remove left and right padding:
.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em 0px; /* updated */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif;
}
I tried box-sizing but not worked.
view this: DEMO
Currently Im using the below css for all of my text. However it is changing my form text on my blog (which I don't want it to do.) How can i set a new style for this blog-sidebar-form. I just want to center the text and make it bold, etc.
http://jeffreydowellphotography.com/blog/
p {
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", ``"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 300;
max-width: 550px;
color: #4d4d4d;
text-align: left;
line-height: 175%;
letter-spacing: 1px;
word-spacing: 0px;
margin-top: 20px;
}
You should probable do something like this for the blog.
So you can overwrite the base style.
p {
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", ``"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 300;
max-width: 550px;
color: #4d4d4d;
text-align: left;
line-height: 175%;
letter-spacing: 1px;
word-spacing: 0px;
margin-top: 20px;
}
p.blog {text-align: right/*and other code*/}
<p class="blog"> This paragraph will be right-aligned. </p>/*you should give all the p in your blog the blog element*/
Good luck with it.
Give the form a class, or if it is the only form, I think you can just put form. From there, I believe you can give a negation pseudo class:
:not(form){text-align:center; font-weight:bold; /*any other css you would like to enter. make sure you copy the entire line. this is a comment so you can delete it.*/}
Or maybe you could affect the inputs of the form:
form input{ text-align:center; font-weight:bold; }
I hope they work.