La communauté HubSpot est disponible en français.

Text overlapping image on mobile - not alway though

Nouveau membre


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!


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

0 Vote / Votes

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.



0 Vote / Votes
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;