Twitter Bootstrap Question posted in

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;
}
Tags:

4

Answers


  1. 0

    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
  }
}
    Login or Signup to reply.
  2. 0

    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
    }}
    Login or Signup to reply.
  3. 0

    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
   }
}
    Login or Signup to reply.
  4. 0

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

    @media (max-width: 600px) {
html {
 font-size: 130%; // strikethrough in chrome = inactive style
 }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search