0

Hey guys i have a small issue with resizing fonts according to screen size. Im using Bootstrap 3 and LESS.

here is what i have a the top of my less code:

@font-size-base:          16px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.3)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.35)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

so far so good. After that i have the following:

h1.pageTitle {
  font-family: @font-family-sans-serif;
  font-size: @font-size-h1;
  font-weight: 300;
  color: #2aace3;
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
}

h2 {
  font-family: @font-family-sans-serif;
  font-size: @font-size-h2;
  font-weight: 300;
  text-align: center;
}
h3 {
  font-family: @font-family-sans-serif;
  font-size: @font-size-h3;
  font-weight: 300;

}
h4 {
  color: #555;
  font-size: @font-size-base;
}
p, .button, li {
  font-family: @font-family-sans-serif;
  font-size: @font-size-base;
  font-weight: 300;
  margin: 0 0 0px;
  line-height: @line-height-base;
}

at the end of the LESS file i have:

    @media (min-width: @screen-sm-min) {

      @font-size-base:          22px !important;
      @font-size-large:         ceil((@font-size-base * 1.25)) !important; // ~18px
      @font-size-small:         ceil((@font-size-base * 0.85)) !important; // ~12px

      @font-size-h1:            floor((@font-size-base * 2.6)) !important; // ~36px
      @font-size-h2:            floor((@font-size-base * 2.15)) !important; // ~30px
      @font-size-h3:            ceil((@font-size-base * 1.7)) !important; // ~24px
      @font-size-h4:            ceil((@font-size-base * 1.25)) !important; // ~18px
      @font-size-h5:            @font-size-base !important;
      @font-size-h6:            ceil((@font-size-base * 0.85)) !important; // ~12px

}

Everything works as it should no problems at all. however i've added just above the media query that checks min screen size the following code:

#course-info {
  #accordion {
    .panel {
      border: none;
      box-shadow: none;
      .panel-heading {
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
        h3 {
          font-size: @font-size-h3;
        }
      }
    }
   }
}

For some reason i can't explain the H3 tag inside the #accordion code is picking up the base-font size from the top of the file which according to bootstrap laws should be for xs screen sizes, even tho i'm looking at it on a browser.

The reason i need to do this is because i'd like to resize the H3 value on that tag to something else so in the end i'd have something like:

    #course-info {
  #accordion {
    .panel {
      border: none;
      box-shadow: none;
      .panel-heading {
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
        h3 {
          ceil((@font-size-h3 * 0.85)) !important;
        }
      }
    }
   }
}

If i change the base value inside the media query the entire text of the page changes but those specific H3 tags. Can someone explain to me what is going on?

cheers, dan

dank
  • 15
  • 9
  • 22* 1.7 is ~37...revise your maths – Rachel Gallen Jun 01 '17 at 05:36
  • 16*1.35 is only nearly 22 (~21.6) so no difference from the base (22px) would be noticeable – Rachel Gallen Jun 01 '17 at 05:39
  • yes that is correct my h3 on browser size should be 38px, however on that specific h3 tag it's picking up the smaller one which is 16* 1.35 = 22px even tho i'm on a large screen – dank Jun 01 '17 at 05:41
  • if i comment out that h3 class from the styles it will pickup the correct 38px size that is set by the general h3 rules, as soon as i put the h3 rule in there it overwrite with the smaller rule. for some reason – dank Jun 01 '17 at 05:44
  • have you even set values for the screen sizes in your media queries.. it doesn't look like you have.. read some more about media queries – Rachel Gallen Jun 01 '17 at 05:46
  • because i was trying to overwrite still doesn't work even when i do important the top rule still doing it... – dank Jun 01 '17 at 05:49
  • yes it's using bootstrap brake points and it's all at the very top of my less file @screen-sm: 768px; – dank Jun 01 '17 at 05:52
  • Also: *at the end of the LESS file i have: `@media (min-width: @screen-sm-min) {@font-size-base: ...`* - this code have no effect, note the media rules are evaluated by a *browser* (while variables are evaluated by the Less compiler), so this particular piece of code simply results in an empty media query and does *nothing*. In other words, variables inside media query blocks do not affect anything but the code *in the same* media query block. – seven-phases-max Jun 01 '17 at 06:14
  • In other words, what you need is to provide *explicit* property for the said screen-size/media-query right in the said ruleset, e.g. [like this](http://less2css.org/#%7B%22less%22%3A%22%40font-size-h3%3A%20%2024px%3B%5Cn%40screen-sm-min%3A%20768px%3B%5Cn%5Cn%2F%2F%20...%5Cn%5Cn%23course-info%20%23accordion%20.panel%20h3%20%7B%5Cn%20%20%20%20font-size%3A%20%40font-size-h3%3B%5Cn%20%20%20%20%40media%20(min-width%3A%20%40screen-sm-min)%20%7B%5Cn%20%20%20%20%20%20%20%20font-size%3A%20ceil(%40font-size-h3%20*%200.85)%3B%5Cn%20%20%20%20%7D%5Cn%7D%22%7D). – seven-phases-max Jun 01 '17 at 06:41
  • For more details see https://stackoverflow.com/questions/15927805 (your Q is basically a duplicate of that one). – seven-phases-max Jun 01 '17 at 06:45
  • Thanks for that, however the font size does work across the entire site on other elements of the page. but ill look into the media query issues thanks – dank Jun 05 '17 at 03:38

1 Answers1

0

You can use em or percent for re sizing font according to screen size. em counts based on your body font size. and percent(%) is based on you screen site. Both will automatically adjust.

DP TechRocket
  • 114
  • 1
  • 1
  • 7