How to Fix Overlap of Apache EChart Title and Graph/Grid

Question

Using Apache Echarts, I've created a graph that uses title and grid but on mobile devices, the text overlaps with the grid. How do I prevent this from happening?

I've tried adding 'top' to 'grid', but this isn't responsive for mobile devices and creates a weird gap when the amount of text for the title is used. Ideally, I'd like the grid/graph to automatically move down when the title's text increases

  const options = {
    title: {
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at maximus nulla.",
      subtext:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at maximus nulla.",
      textStyle: {
        width: screenWidth-55,
        overflow: "break",
      },
      subtextStyle: {
        width: screenWidth-55,
        overflow: "break",
      },
    },
    xAxis: {
      type: "category",
      data: data.xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data.yAxis[0].values,
        type: "line",
      },
    ],
    grid: {
      containLabel: true,
    },
  };