Next.js Discord

Discord Forum

can anyone help me this

Unanswered
Cape horse mackerel posted this in #help-forum
Open in Discord
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

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]);
Northeast Congo Lion
or use em height