Default title cutting off as well as image on smaller screens

Hello @lindagibson

Thanks for reaching out! It looks like there are two separate issues here, one for mobile view and one for desktop view.

For mobile, there seems to be some custom CSS manually setting the width of the entire content section. So if the screen is smaller than 700px any content is going to overflow, not just Draw Attention.

This is the CSS snippet we’re seeing on the page:

#content {
    width: 700px;
    margin: 30px auto;
}

You can either take that out or add a media query to make this code run only when the screen size is larger than 700px.

So that the new snippet looks like this:

@media (min-width: 700px) {
    #content {
        width: 700px;
        margin: 30px auto;
    }
}

For the desktop view, it looks like the title is just too big, you can either use CSS to shrink it or adjust the width of the left column using the following CSS:

@media (min-width: 700px) {
  #hotspot-17571.layout-left .hotspots-image-container{
    -webkit-flex: 0 0 35%;
    flex: 0 0 35%;
  }
  #hotspot-17571.layout-left .hotspots-placeholder{
    -webkit-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 35%;
  }
}

And, if you need help customizing the CSS, we have a guide to help out – https://wpdrawattention.com/document/customizing-draw-attention-css/

Let me know if that helps!