Making an image fit on mobile

Question

Hi guys, Just wondering best way to make an image fit on a mobile as it does on the browser version? Any ideas/codes? Thanks!

SemiColonWeb · Accepted Answer

Hello, You can simply add the Class to the Tag to make it responsive and fir the Screen: https://getbootstrap.com/docs/4.5/content/images/ . Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

lemon94 · Answer

I just tried, but it hasn't seemed to work! Could you double check and advise please? Thanks again!

Semicolon Web · Answer

Hello,

We have checked out the codes on your Website and the issue is there because you are adding the Image inside a .row DIV which is not required. Simply remove the .row DIV and add your image directly.

This should work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

lemon94 · Answer

Done! This now works perfect on mobile. Thank you!

However I do have one more question regarding this, relating to the browser. Is there a way to allow the current image on the site to fill up the whole section? As in, it stops almost halfway. I would like to have it almost centered/filled up the whole middle bit on the page

Semicolon Web · Answer

Hello,

The Image is not filling up the whole section are you are using the .col-lg-7 Class which is from the Bootstrap Grid: https://getbootstrap.com/docs/4.5/layout/grid/ . Simply replace this class with .col-12 and this will allow the Image to fill up the entire section. Please ensure that you double check the codes to avoid any unexpected issues.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

lemon94 · Answer

Done! That worked great! I assume this combined with the previous mobile fitting code, will mean it works fine across all size browsers/devices, too?