Text overlapping image on mobile - not alway though

SOLVE
HectorMKW
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
0 Upvotes
2 Accepted solutions

Accepted Solutions
Krystina
Solution
Key Advisor | Diamond 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
A B2B Revenue Operations (RevOps) Firm.
HubSpot Diamond Partner BadgeA Diamond Solutions Partner
Book 15 Minutes with Krystina »

View solution in original post

tjoyce
Solution
Recognized Expert | Platinum 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;
}

View solution in original post

3 Replies 3
Kevin-C
Recognized Expert

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

0 Upvotes
Krystina
Solution
Key Advisor | Diamond 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
A B2B Revenue Operations (RevOps) Firm.
HubSpot Diamond Partner BadgeA Diamond Solutions Partner
Book 15 Minutes with Krystina »

View solution in original post

tjoyce
Solution
Recognized Expert | Platinum 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;
}

View solution in original post