This question already has an answer here:
Is there any way to change the text size of <h1> tag when it goes on extra small or small screen size?
Because <h1> has its own default size which is normal for medium size but very large for small and extra small.
I want to change that size when it goes to small screen size or extra small screen size.
You can create a custom .css file (for example: site.css) and then use @media to create different behavior on different screen size. To override the h1 class in bootstrap, you have to include your custom css after the bootstrap. Below is the example of h1 in site.css:
h1 {
/* Extra small devices (phones, less than 768px) */
font-size: 10px;
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
font-size: 12px;
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
font-size: 16px;
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
font-size: 18px;
}
}
This is the @media rules which bootstrap currently use, the official docs can be seen in here.
It's just a basic example that shows how you can write your own CSS rule while you are using bootstrap or any other design framework.
for media query visit this CSS-trick
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<style>
/* My rule */
h1{
font-size:12px;
}
</style>
<div class="container">
<h1>Here is the heading</h1>
</div>Try this code..
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
{
font-size: 100px;
}
@media screen
and (min-device-width: 320px)
and (max-device-width: 700px)
{
font-size: 25px;
}
}
</style>
<h1>My big company!</h1>
</html>
i hope it will help..
You can use Media Query for small screen size that will apply css for h1 only on the specified width. For example, See below code. You can modify it according to your needs. This code will go inside your styles.css file.
@media only screen and (max-width: 480px) {
h1 {
font-size: 18px;
}
}
For more info on media queries, visit Css Tricks. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
