Feature Boxes Rendition Issue on Smaller devices

Question

We are using the feature box code snippet from the Canvas Template on the url :

https://biosimcovex.biosimilia.com/ (Please scroll down to see three boxes : FAQ, Buy and Research)

While they seem to appear well on larger devices, when the browser is resized to mobile width or when browsed on the phone, the images appear larger than they are whereas they should actually render smaller.

Here is the code we currently have :

                    
                        
                            
                                [
![attachment](~/Content/images/homeimages/IMG-20210828-WA0008.jpg)
](~/Pages/Content/FAQ)
                            
                        
                    

                    
                        
                            
                                [
![attachment](~/Content/images/homeimages/IMG-20210828-WA0009.jpg)
](~/Products)
                            
                        
                    

                    
                        
                            
                                [
![attachment](~/Content/images/homeimages/IMG-20210828-WA0010.jpg)
](~/Pages/Content/Research)

Could you please let us know what we might be missing?

Thanks for your prompt help.

SemiColonWeb · Accepted Answer

Hello,

We have just checked this out and the Featured Boxes appear to be scaling correctly according to the Column Size. Images are sized at 100% width according to their Container Width. You can simply change the col-sm-4 col-lg-4 Class to a Smaller Column Size: https://getbootstrap.com/docs/5.1/layout/grid/ according to your needs to make your Images scale smaller.

Hope this Helps!

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