CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-size
ducin
ducin

Reputation: 26487

bigger font on mobile devices using twitter bootstrap

I want to make bigger fonts for my content for my app, where CSS is based on twitter bootstrap 3. I've already tried solution from this question but it gets overriden by bootstrap itself, I tried:

@media (max-width: 600px)
html {
  font-size: 130%; // strikethrough in chrome = inactive style
}

This is how I'm loading my CSSes (bootstrap files are fetched from bower):

    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-theme.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">

What can I do to make fonts bigger for max-width devices?

edit: adding !important doesn't change anything. I can see that bootstrap is overwriting font from following CSS:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

Upvotes: 1

Views: 447

Answers (4)

AnnieMac
AnnieMac

Reputation: 862

You're missing braces around your media query, it should read

@media (max-width: 600px) {
html {
 font-size: 130%; // strikethrough in chrome = inactive style
 }
}

Upvotes: 0

DavidG
DavidG

Reputation: 119186

You are missing braces around your media query. Without these braces, the media query won't actually apply to anything subsequent.

@media (max-width: 600px) 
{
    html {
        font-size: 130%; // strikethrough in chrome = inactive style
   }
}

Upvotes: 0

StudioTime
StudioTime

Reputation: 24019

Try this, it should work but be sure to include the code after the bootstrap CSS

@media (max-width: 600px){
  html {
    font-size: 130% !important; // strikethrough in chrome = inactive style
  }
}

If it's being overwritten by body then use:

@media (max-width: 600px){
  body {
    font-size: 130% !important; // strikethrough in chrome = inactive style
  }
}

Upvotes: 1

Michelangelo
Michelangelo

Reputation: 5958

Try setting the font on the html and the body and load your css after the bootstrap CSS.

@media (max-width: 600px){
    html, body {
      font-size: 130%; // strikethrough in chrome = inactive style
    }}

Upvotes: 0

Related Questions