CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Behan
John Behan

Reputation: 584

Text not resizing properly with Bootstrap 3

I'm almost finished building the portfolio assignment for Free Code Camp but I've hit a bit of a wall.

The page is at - http://codepen.io/jjmax/full/avdVBE/

The only custom code I have for headings is:

h1, h2, h3 {
  font-family: 'Ovo', serif;
  text-shadow: 4px 4px 4px #a3a3a3;
}

h1 small {
  color: #007ea7;
  font-size: 45%;
}

When I resize the screen the h1 heading at the top of the page resizes properly, but the h2 and h3 headings do not. This is most noticeable in the Contact section of the page.

I've tried a few different things but can't figure this out.

Upvotes: 1

Views: 772

Answers (2)

Ivaylo Getov
Ivaylo Getov

Reputation: 83

Are you sure that those elements are supposed to change size? In bootstrap.min.css, the only headings affected by a @media breakpoint are <h1> elements that are inside .jumbotron elements (which is the case for the one at the top of your page).

If you want your <h2> (or any other elements) to change, you'll have to manually add the @media breakpoints to your custom stylesheet:

@media screen and (min-width:XXXpx) {
    h2 {font-size: xxx}
}

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

Try this font-size: 4vw;. I have changed font-size only in contact section you can do the same for other section as well.

.contact h2 {
    line-height: 3em;
    font-size: 4vw; //changed this
    text-shadow: 2px 2px 2px black;
}

Demo Here

Upvotes: 1

Related Questions