I am currently in the process of updating my research lab's website using a Jekyll framework with Bootstrap. However, I have encountered an issue where the font size grows slightly whenever I navigate to a new page or refresh the current one, before returning to its normal size. This inconsistency creates a jarring user experience. You can view my work in progress at rigglemanlab.github.io, and the problematic page can be found at rigglemanlab.github.io/members. The code for this site is available on github.com/benlindsay/lab_site.
Despite referencing solutions from similar posts such as this one, where it was recommended to add the following CSS:
body > div {
font-size: 1.4rem
}
I attempted different variations of the solution by trying em instead of rem, using html instead of body > div, and setting the @font-size-base variable to either 1.4em or 1.4rem. Unfortunately, none of these attempts resolved the issue. How can I improve the rendering of my website for a smoother user experience?