reduce the font size on tablet and mobile
ashehzadgec opened this issue · 1 comments
ashehzadgec commented
Hy there
I tried to reduce the font size by using media queries but could not find a way to do it.
const createBlotterText = () => {
const text = new Blotter.Text(textEl.innerHTML, {
family : "'Playfair Display',serif",
weight: 900,
size : 150,
paddingLeft: 100,
paddingRight: 100,
paddingTop: 100,
paddingBottom: 100,
fill : 'white'
});
function myFunction(x) {
if (x.matches) { // If media query matches
createBlotterText.size = 60;
}
var x = window.matchMedia("(max-width: 768px)");
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
};
I tried different version of this media query in java and css but failed to do so. Any help will be highly appreciated.
alejandroserrat commented
I make the font size responsive depending of the windowWidth with this line:
size: (360 * window.innerWidth) / 2560
If the widow measures 2560 width the size will be 360px and else the corresponding size according to the window width.
You can try this option too:
size: window.innerWidth > 768 ? 150 : 60
If the window width is greater than 768 the font size will be 150 else 60