CSS div width issue in wide screens

Question

I am developing a website using a bought template. Everything seems to be perfect. However, I have an issue with a section of the html code where it works fine in normal screen sizes but in extra wide screen size, the div size is reduced to a strip. The images below demonstrate this:

This is how the div is in normal screens

And when the screen is extra wide, for example in devices with more than 15" screen, this is how the div looks like:

My main challenge however is that I really don't know which property is controlling this from the css file. I tried inspecting the code from chrome and the most consistent property is the box-sizing property and the value is set to inherit . Let me share the html code for this section of the div for further clarity.

 <section class="gray pt-5 pb-0"> <div class="container"> <div class="row"> <div class="col text-center"> <div class="sec-heading mx-auto"> <h2>What People say About Us</h2> <p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p> </div> </div> </div> <div class="row m-0"> <div class="owl-carousel" id="testimonials"> <.-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_property,jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Brian Inchedi</h5> <span class="small-font">Real Estate Agent</span> </div> </div> </div> </div> <.-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Irene Wambui</h5> <span class="small-font">Happy Baby Day Care</span> </div> </div> </div> </div> <.-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus. I received a customer instantly with a better offer than I wanted.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Teddy Kimani</h5> <span class="small-font">Car Sales Person</span> </div> </div> </div> </div> <!-- Single Testimonials --> <div class="item"> <div class="testimonial-box"> <i class="fa fa-quote-left"></i> <p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p> <div class="client-thumb-box"> <div class="client-thumb-content"> <div class="client-thumb"> <img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt=""> </div> <h5 class="mb-0">Margaret Wada</h5> <span class="small-font">Recruiting Agent</span> </div> </div> </div> </div> </div> </div> </div> </section>

Kindly advise as I am not that good in frontend. The css file is too big to share the code here, but I can get snipets of the sections that are used by the html section. Thank you.

Edit: Adding CSS COde Snippet

So, I have copied the code to JSFiddle and here is the link: Code snippets on JSFiddle

Answer 1

You can try to specify:

min-width: someValue

and the element won't be smaller than this value;