How I create the resizable <h1> element on the getboostrap.com homepage for Bootstrap 3: http://getbootstrap.com/getting-started/
I know I can use tools like fittext.js but theirs adjusts by using CSS media queries it seems.
You can put your <h1>tag in a Jumbotron.
The default h1 font-size is 36px. You can use media queries to make it bigger:
#media screen and (min-width: 768px) {
h1.resizable {
font-size: 63px;
}
}
You can add the resizableclass to any h1 tag and it will make it bigger if the screen width is at minimum 768px.
From their CSS
#media (min-width: 768px) {
.bs-masthead h1 {
font-size: 100px;
}
}
.bs-masthead h1 {
font-size: 50px;
line-height: 1;
color: #fff;
}
Related
Can the width or height of the browser screen be used to determine the transition, or animation of a tag's opacity (css)? If so how?
For example as the width of the browser screen gets bigger, fonts become more clear.
Any resources are appreciated, thanks!
For example this html
<div class="header">
<h1>Example title</h1>
</div>
Then use #media breakpoint to give each browser view size a differtent css.
/* first, give a default font-size (for a view less then 768px) */
.header h1 {
font-size: 20px;
}
/* from 768px upwards */
#media (min-width: 768px) {
.header h1 {
font-size: 24px;
}
}
/* from 992px upwards */
#media (min-width: 992px) {
.header h1 {
font-size: 28px;
}
}
/* from 1200px upwards */
#media (min-width: 1200px) {
.header h1 {
font-size: 36px;
}
}
I would like my Bootstrap layout to not act responsive when the width is 768px or smaller. You can view my current application HTML / CSS here, https://codepen.io/anon/pen/xXdYNa. I have had to make some changes to some of the standard Bootstrap styles so it might make things a bit more tricker.
Does anyone have any tips on how to achieve this by using CSS overrides, similar to what I have done here:
#media (min-width: 768px) {
.main {
padding-left: 250px;
padding-top: 89px;
}
}
Thanks!
How about just giving .container-fluid a min-width with 768px?
EDIT:
Adding the following worked for me:
.container-fluid {
min-width: 768px;
}
.main {
padding-left: 250px;
padding-top: 89px;
}
A min-width in combination with removing the media query which is around your .main should work.
https://codepen.io/anon/pen/EwmEXr
#media only screen and (max-width: 768px) {
.main {
padding-left: 0px;
padding-top: 0px;
}
}
I have this HTML and CSS code for a webpage. I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. However, this code isn't really working. (I didn't include all the other CSS parts of this code, but please ask for it if needed!)
My attempt to resize margins due to the width of the screen:
#media (max-width: 1100px, min-width: 800px) {
body {
margin-right: 20px;
margin-left: 20px;
}
#media (max-width: 750px, min-width: 501) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
</style>
</head>
<body>
<header>
<h1>Blog</h1>
<ul> <!-- Menu Tabs -->
<li>Home</li>
<li>Art</li>
<li>Music</li>
</ul>
</header>
</body>
Thanks, I would really appreciate your help!
You are missing a closing brace around your first media query. Also, you have some extra bits in your media queries making them invalid. The way media queries work makes the min-width parts you were trying to add unnecessary. The following code, at large screens, creates a 20px left/right margin. When the threshold of 750px is hit, 5vw kicks in, and so on.
/* Invalid:
#media (max-width: 1100px, min-width: 800px)
*/
#media (max-width: 1100px) {
body {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px, you could create a default margin in your CSS which will be overridden by your media query rules. Then, you can begin your media queries at a narrower screen size.
/* default size */
body {
margin-left: 20px;
margin-rights: 20px;
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
https://jsfiddle.net/5vez3rdc/
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I have header text overlaid on an image. The issue is that on higher resolution desktop screens (e.g., > 1600px) the header only takes up a small section of the image width. I want the header text to take up ~90-100% of the available width regardless of the res.
http://www.dailyspiro.com
<div class="container-fluid">
<div class="col-md-12 landing-container">
<img src="images/pig.jpg" class="main-image" width="70%">
<div class="uvp">
<h1>Spread Compassion & Track Your Impact</h1>
<button class="join-button">Join Now</button>
</div>
</div>
</div>
.uvp {
padding: 5px 5px 5px 14px;
width: 70%;
background: rgba(66,51,51,.77);
margin: -119px auto 0px auto;
display: block;
text-align: left;
}
.uvp h1 {
color: #fff;
font-size: 247%;
margin-top: 12px;;
}
.landing-container {
padding: 0;
margin: -15px auto 0 auto;
text-align: center;
}
.main-image {
z-index: -1;
position: relative;
}
If you want the header take up ~90-100% of the available width space for higher resolution desktop screens (e.g., > 1600px), style the header accordingly using specific Media Queries.
You can use Media Queries, Some media queries for Standard Devices are:
/* Large screens ----------- */
#media only screen
and (min-width : 1600px) {
/* Styles */
/* Set your font-size here */
}
CSS:
/* Large screen above 1400px */
#media only screen and (min-width: 1400px) {
body {
.uvp h1 {
font-size: your larger size here;
margin-top: your larger size here;
}
}
}
Note: you have double (;;) semicolon in your above margin-top marking.
use cssmediaqueries
CSS Media Queries are a feature in CSS3 which allows you to specify
when certain CSS rules should be applied. This allows you to apply a
special CSS for mobile, or adjust a layout for print.
#media only screen and (max-width: 1633px) and (min-width: 1400px) {
.uvp h1 {
color: #fff;
font-size: 247%; //use your desired bigger font size
margin-top: 12px;;
}
}