Text overlapping image on mobile - not alway though

New Member

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:

Screen Shot 2019-10-09 at 8.39.43 AM.png

 

Here is the text overlapping:

Screen Shot 2019-10-09 at 8.39.21 AM.png

CSS
Reply
0 Upvotes
3 Replies 3
Advisor

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

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Platinum Partner

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;

  }

}

Did this post help solve your problem? Help the community and mark it as a solution.
Krystina Gillenwater
We help B2Bs on HubSpot turn visitors into quality sales opportunites.
HubSpot Platinum Partner Logo HubSpot Platinum Partner Agency
Book 15 Minutes with Krystina »
Top Advisor | Gold Partner

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;
}