CMS Development

AT1
Miembro

Aligning images on mobile

resolver

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

1 Soluciones aceptada
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Aligning images on mobile

resolver

@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

id.png


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.

Ver la solución en mensaje original publicado

0 Me gusta
4 Respuestas 4
tjoyce
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Aligning images on mobile

resolver

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

0 Me gusta
AT1
Miembro

Aligning images on mobile

resolver

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!

0 Me gusta
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Aligning images on mobile

resolver

@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

id.png


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.

0 Me gusta
AT1
Miembro

Aligning images on mobile

resolver

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