Hi everyone, I've encountered an issue with adjusting font sizes based on screen size. My framework is Bootstrap 3 and I'm using LESS.
Here is the initial part 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
Following that, I have the following styles defined:
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, within the media query for small screens, this adjustment is made:
@media (min-width: @screen-sm-min) {
@font-size-base: 22px !important;
@font-size-large: ceil((@font-size-base * 1.25)) !important;
...
}
The issue arises when adding custom styling just above the media query:
#course-info {
#accordion {
.panel {
...
h3 {
font-size: @font-size-h3;
}
...
}
}
}
Unexpectedly, the H3 tag inside #accordion is inheriting the base-font size from the top of the file instead of the adjusted value. This appears to be a bootstrap behavior misalignment between expected and actual screen size rendering.
I am striving to configure specific adjustments like so:
#course-info {
#accordion {
.panel {
...
h3 {
ceil((@font-size-h3 * 0.85)) !important;
}
...
}
}
}
However, altering the base value impacts the entire page's text except those specific H3 tags. Can anyone shed light on what might be causing this discrepancy?
Cheers, Dan