Aligning images on mobile

[AT1]

Hi there

I have added some images on my website that are left aligned with text wrapping around them. If i add them as anything below 350px wide they aren't 100% width on my iphone end up having a small amount of text wrapping around them and looks awful and you can't read it properly on mobile.

How can i add left aligned images with text wrapping around on desktop but have them centred on mobile?

Thanks

[tjoyce]

Hello @AT1 - Can you give us a preview link so we can shoot you back some code to drop into your page?

[AT1]

Hey

Yeah so this page for example: https://www.startsmartltd.com/our-team 

The first image of the man is floating left with text wrapping but on mobile (im viewing through iphone 7) the text wrapping is not ideal so would be good to have it centred with text underneath.

Thanks!

[tjoyce · Accepted solution]

@AT1 - perfect. There are several ways you can do this.

The best way (but a little more work) is to assign a class to the column holding the image - something like "mobile-image-fix". Then you would add the following css to your css file and every column that has this class, will be fixed.

@media screen and (max-width: 767px){
    .mobile-image-fix img {
        width: 100% !important;
        float: left;
    }
}

The next way you can do it is (in chrome) right click the image and hit "inspect element". You will be taken directly to the image code in the console. Then look at the closest span parent id and start making a list in your css and separate them using commas. something like this: 

@media screen and (max-width: 767px){
    #hs_cos_wrapper_widget_153365506807746_ img,
    #hs_cos_wrapper_widget_dsiodsoi_ img, 
    #hs_cos_wrapper_widget_90439f9009_ img{
        width: 100% !important;
        float: left;
    }
}

changing out the id of the parent element. See the screenshot below

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[AT1]

Perfect! I'm going to use the first method. Tested in out and it's great. Thanks so much for your help.