Next.js Discord

Discord Forum

can anyone help me this

Unanswered
Cape horse mackerel posted this in #help-forum
Open in Discord
Avatar
Cape horse mackerelOP
I have a div with a paragraph that can be short or long depending on the mobile device's screen size. In order to accommodate the description within that div, the font size must be changed based on the height of that div.

3 Replies

Avatar
Yi Lon Ma
it is basic css, just use breakpoints in css and change font size
Avatar
Cape horse mackerelOP
using next js 
useEffect(() => {
  const divHeight = window.innerHeight - 345;
  const description = item?.small_description;
  const headingLength = item?.header.length;

  setDivHeights(headingLength < 50 ? divHeight + 15 : divHeight);

  if (description) {
    let fontSize;

    if (description.length < 550) {
      fontSize = 18;
    } else if (description.length < 750) {
      fontSize = 17;
    } else {
      fontSize = Math.min(
        18,
        Math.max(14.5, (divHeight / description.length) * 1.5)
      );
    }

    setCalculateFontSize(fontSize);
  }
}, [item]);
Avatar
Northeast Congo Lion
or use em height