Text overlapping image on mobile - not alway though

[HectorMKW]

Hello,

I have and image that has a float left but on mobile the text overlaps the image. But it doesn't do that always, just sometimes. When I refresh the page it goes back and forth. 

Thanks for any insights! 

https://www.weaddvalue.com/cloud-team

Here is a screenshot of how it should look:

Here is the text overlapping:

[Krystina · Accepted solution]

I would use media queries to remove the float and set a display value of block for the image at mobile screeen sizes. You may also want to set the width to 100% and height at auto. Ex.:

@media (max-width: 400px) {

  .image-class {

    float: none;

    display: block;

    width: 100%;

    height: auto;

  }

}

[tjoyce · Accepted solution]

You could also use this piece of CSS code:

.hs-content-name-virtual-team .hs_cos_wrapper_type_rich_text img {
  display: block; 
  width:100% !important;
}

[Krystina · Accepted solution]

I would use media queries to remove the float and set a display value of block for the image at mobile screeen sizes. You may also want to set the width to 100% and height at auto. Ex.:

@media (max-width: 400px) {

  .image-class {

    float: none;

    display: block;

    width: 100%;

    height: auto;

  }

}

[Kevin-C]

Hey @HectorMKW 

Can you try and document a reliable way to reproduce this error in an expected way? Including browse, browser version, computer type, etc

If not could you get a screen shot of the css styles when the error does occur? Specifically on the image, its surrounding P tag and the P tag with the copy.

Thanks