I'm making a bootstrap website. Everything is working smooth on all the screen sizes but the heading(h1) remains fixed size. It is too big for small screens. How can I fix the bootstrap h1 or headings in general.
You can use #media for this
#media screen and (max-width: 768px) {
h1{
font-size:14px;
}
}
That means less than 768px the h1 tag font size will be 14px.
Like this you can set for all pixel you required.
That is my solution. Fully responsive bootstrap headings
#import "bootstrap/scss/functions.scss";
#import "bootstrap/scss/variables.scss";
#import "bootstrap/scss/mixins.scss";
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.h1#{$infix} { font-size: $h1-font-size!important; }
.h2#{$infix} { font-size: $h2-font-size!important; }
.h3#{$infix} { font-size: $h3-font-size!important; }
.h4#{$infix} { font-size: $h4-font-size!important; }
.h5#{$infix} { font-size: $h5-font-size!important; }
.h6#{$infix} { font-size: $h6-font-size!important; }
.display-1#{$infix} {
font-size: $display1-size!important;
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2#{$infix} {
font-size: $display2-size!important;
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3#{$infix} {
font-size: $display3-size!important;
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4#{$infix} {
font-size: $display4-size!important;
font-weight: $display4-weight;
line-height: $display-line-height;
}
}
}
best use the bootstrap sass in your own sass, keep it DRY and maintainable
#import "../bootstrap-sass/bootstrap/variables";
#media screen and (max-width: $screen-md-max) {
h1 {
font-size:14px;
}
}
Related
Trying to update CSS so that the headline adapts and becomes smaller when viewing mobile. Might be missing something or there's some other CSS that controls it but not sure where.
I've tried looking up various code, but testing it locally, still not getting desired result.
HTML
<div class="col-12 col-md-auto cta-headline">
<h2><span class="cta-headline">SIGN UP!</span></h2>
</div>
CSS
.cta-headline {
color: $white;
font-weight: 800;
font-family: "Gilroy", "Helvetica", Helvetica, arial, sans-serif;
font-size: 25px;
letter-spacing: 3px;
margin-bottom: -15px;
margin-top: -20px;
#media only screen and (min-width: 450px) and (max-width: 959px) {
.cta-headline { font-size: 10px;
}
}
}
I'd like the text to just scale appropriately down when viewing mobile compared to desktop.
Are you using Sass? Because CSS you shouldn't be nesting media queries inside the class. Just move the media query to its own line and it should work.
The min & max width is also redundant, it's much better to just remove the min and keep the max. If the width goes below 450px, create another media query where the max width is 450px
.cta-headline {
color: $white;
font-weight: 800;
font-family: "Gilroy", "Helvetica", Helvetica, arial, sans-serif;
font-size: 25px;
letter-spacing: 3px;
margin-bottom: -15px;
margin-top: -20px;
}
#media only screen and (max-width: 959px) {
.cta-headline { font-size: 10px; }
}
Trying to figure out how to use underscores. Before, to make typography responsive font for different screens, I would usually write different media queries as follows:
#media screen and (min-width: 480px) {
html{
font-size: 18px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1rem;
}
etc..
}
#media screen and (min-width: 700px) {
html{
font-size: 14px;
}
h1 {
font-size: 0.5rem;
}
h2 {
font-size: 1.3rem;
}
etc..
}
Using underscores, how do I change the parent font-size so the child elements can have an rem size?
I tried adding the font-size as it seems to be the parent element (?)
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: Merriweather, sans-serif;
font-size:20px;
font-size: 1rem;
line-height: 1.5;
color:red;
}
What would be the best approach for this?
You almost got it. If you use rems the only thing you need to control all your fonts depending on the viewport is to change the font size of the root element lets say html:
html {
font-size: 12px;
}
p {
font-size: 1.1rem;
}
.footer {
font-size: .9rem;
}
#media (max-width: 767px) {
/* now the basis for all the font sizes set in
rems is 10px. For example, font-size for p is 10*1.1 = 11px.
Previously it was 1.1*12 = 13.2px. */
html {
font-size: 10px;
}
}
Also you could use so called fluid typography and combine it with the previous approach to get responsiveness (fonts will scale upon each resize attempt, not only after passing certain limits):
html {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
It scales font size for html in 14px - 26px range depending on the viewport sizes 300px - 1600px.
PS. besides, here
font-size:20px;
font-size: 1rem;
you first set 20px and then rewrite it with 1rem, so it didn't have any effect. You may want to remove font-size: 1rem;. It will set font size equal to 20px for parent element (body), but also it will do so for other elements given there (inputs, buttons etc.) Approach involving html element is a common one and it is cleaner.
I made a site here. It works great on all screens except mobile where the slogan is too large. So i added a mobile css definition for the slogan "Always coding and brewing up something good" but on my phone it does nothing? I am using bootstrap but only with the grid and responsive elements. The css I applied is the below in question is:
#media (max-width: 480px) {
.grabber{
font-size: 12px;
}
}
You defined in your stylesheet.css a following order of styles:
#media (max-width: 480px) {
.grabber{
font-size: 12px;
}
}
.grabber{
color: #3498db;
font-size: 2em;
font-family: 'black_roseregular', Arial, sans-serif;
}
and due to processing css-rules consequentially latest font size style applied to .grabber will be font-size: 2em;. All you need is to swap these statements like this:
.grabber{
color: #3498db;
font-size: 2em;
font-family: 'black_roseregular', Arial, sans-serif;
}
#media screen and (max-width: 480px) {
.grabber{
font-size: 12px;
}
}
I want to make a link appear when the screen is a certain width, like the iphone display use #media queries. But on a desktop version, to no longer have that link displayed, i.e. 960px.
I have tried using the display:none declaration, but that didn't work for me, which is why i'm here.
Below is my html along with the css i am using. If there are any confusions, please let me know.
Note that this is just test html/css for my current project.
<section id="blog_rwd">
<h2>The Blog Starts Here!</h2>
<span id="link"><h3>Acumatica</h3> </span>
<article class="article_rwd">
<h3>Article</h3>
<p>"Lorem ipsum dolor sit amet,"</p>
</article>
<aside class="aside_rwd">
<h3>Aside</h3>
<p>"Lorem ipsum dolor sit amet,"</p>
</aside>
</section>
#charset "utf-8";
/* CSS Document */
body {
background-color:#CCC;
}
h1, {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.625em;
}
h2 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.25em;
}
h3 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
#blog_rwd {
width:60.714285714285714285714285714286%; /*Assume the native width of browser window is 1680px */
margin:0 auto;
padding:0.98039215686274509803921568627451%;
background-color:#D2EEEB;
}
#blog_rwd #link {
width: 50px;
display:inherit;
}
#blog_rwd .article_rwd {
width: 78.431372549019607843137254901961%;
float:right;
padding-right:0.49019607843137254901960784313725%;
background-color:#E3FDF8;
}
#blog_rwd .aside_rwd {
width:17.647058823529411764705882352941%;
float:left;
padding-left:0.49019607843137254901960784313725%;
background-color:#A5F1EA;
}
#blog_rwd p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.875em;
}
#media screen and (max-width:480px) {
#blog_rwd {
float: none;
width: 92.431372549019607843137254901961%;
background-color:#FFB3B3;
}
#blog_rwd #link {
display:block;
}
}
#media screen and (max-width:830px) {
#blog_rwd #link {
display: none;
}
}
#media screen and (max-width:830px) {
#blog_rwd .aside_rwd{
float: left;
width: 98%;
background-color:#95C9E8;
margin-top:5px;
}
}
#media screen and (max-width:830px) {
#blog_rwd .article_rwd{
float: left;
width: 98%;
background-color:#B0E6C6;
margin-top:10px;
}
}
#media only screen
and (max-width : 480px) {
/* Styles */
#link {
display: none;
}
}
This should definitely work. If you post an example I might be able to see why it's not working.
I have just checked your code and it is working as you describe anyway?
http://jsfiddle.net/n2Y6T/
The link disappears when the browser window goes to less than 480px.
This should work: the link is first hidden, and when the browser is a certain width (27 em, in this case), the link will be displayed as inline-block.
.link a {display:none}
#media (min-width: 27em) {
.link a {
display:inline-block;
}
}
I have seen this question on SO:
What are the most common font-sizes for H1-H6 tags
with this being the recommended font sizes fo H tags:
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
Is there a 'best practice' for these for mobile phones? -say iphone screen size?
The font sizes in your question are an example of what ratio each header should be in comparison to each other, rather than what size they should be themselves (in pixels).
So in response to your question "Is there a 'best practice' for these for mobile phones? - say iphone screen size?", yes there probably is - but you might find what someone says is "best practice" does not work for your layout.
However, to help get you on the right track, this article about building responsive layouts provides a good example of how to calculate the base font-size in pixels in relation to device screen sizes.
The suggested font-sizes for screen resolutions suggested from that article are as follows:
#media (min-width: 858px) {
html {
font-size: 12px;
}
}
#media (min-width: 780px) {
html {
font-size: 11px;
}
}
#media (min-width: 702px) {
html {
font-size: 10px;
}
}
#media (min-width: 624px) {
html {
font-size: 9px;
}
}
#media (max-width: 623px) {
html {
font-size: 8px;
}
}
Based on my comment to the accepted answer, there are a lot potential pitfalls that you may encounter by declaring font-sizes smaller than 12px. By declaring styles that lead to computed font-sizes of less than 12px, like so:
html {
font-size: 8px;
}
p {
font-size: 1.4rem;
}
// Computed p size: 11px.
You'll run into issues with browsers, like Chrome with a Chinese language pack that automatically renders any font sizes computed under 12px as 12px. So, the following is true:
h6 {
font-size: 12px;
}
p {
font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.
// How unpleasant of a surprise.
I would also argue that for accessibility reasons, you generally shouldn't use sizes under 12px. You might be able to make a case for captions and the like, but again--prepare to be surprised under some browser setups, and prepared to make your grandma squint when she's trying to read your content.
I would instead, opt for something like this:
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.75rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
}
p {
font-size: 1rem;
}
#media (max-width: 480px) {
html {
font-size: 12px;
}
}
#media (min-width: 480px) {
html {
font-size: 13px;
}
}
#media (min-width: 768px) {
html {
font-size: 14px;
}
}
#media (min-width: 992px) {
html {
font-size: 15px;
}
}
#media (min-width: 1200px) {
html {
font-size: 16px;
}
}
You'll find that tons of sites that have to focus on accessibility use rather large font sizes, even for p elements.
As a side note, setting margin-bottom equal to the font-size usually also tends to be attractive, i.e.:
h1 {
font-size: 2.5rem;
margin-bottom: 2.5rem;
}
Good luck.
The whole thing to em is, that the size is relative to the base. So I would say you could keep the font sizes by altering the base.
Example: If you base is 16px, and p is .75em (which is 12px) you would have to raise the base to about 20px. In this case p would then equal about 15px which is the minimum I personally require for mobile phones.