I am trying to display a long quote wider horizontally and couldn't find how to do it, current html and css scripts are attached below. I basically want the text to be displayed wider than the current one. I am a beginner in web development and building a website for my family business, any help is appreciated.
.custom-width-from-the-ceo
{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.con-width
{
max-width: 100px;
}
.blockquote p
{
margin-bottom: 0;
}
<section class="vh-100" style="background-color: #eee;">
<dizv class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-9 col-xl-7">
<div class="card" style="border-radius: 30px;">
<div class="card-body p-5">
<div class="text-center mb-4 pb-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-quotes/bulb.webp"
alt="Bulb" width="100">
</div>
<figure class="text-center mb-0" >
<blockquote class="blockquote custom-width-from-the-ceo">
<p class="pb-3-new">
<i class="fas fa-quote-left fa-xs text-primary"></i>
<span class="lead font-italic">
Kao was founded in Istanbul in 1995 by an idealistic and dynamic team with thirty years of experience in machinery, electronics and metrology.
With a strong R&D team and modern production lines, Kao has been able to create remarkable products in terms of the technical specifications, ergonomics, aesthetics and the durability.
Kao has been producing metrological test devices with measurement precision beyond world dtandards and extremenly user-friendly interfaces in the field of metrology
As Kao-Metrology, we aim to colloborate with industrialists to contribute to creating a more efficient and powerful metrological systems for a reliable future.
Therefore, we see every product we develop as a helper that opens the door to new possibilities.
Please don't hesitate to share your thoughts on our products and technologies you encountered on our website.
Wishing for every tomorrow to be brighter than today...</span>
<i class="fas fa-quote-right fa-xs text-primary"></i>
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
From the CEO
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="vh-100" style="background-color: #eee;">
<dizv class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-12">
<div class="card" style="border-radius: 30px;">
<div class="card-body p-12">
<div class="text-center mb-4 pb-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-quotes/bulb.webp"
alt="Bulb" width="100">
</div>
<figure class="text-center mb-" >
<blockquote class="blockquote custom-width-from-the-ceo">
<p class="pb-3-new">
<i class="fas fa-quote-left fa-xs text-primary"></i>
<div class="wider-text">
<span class="lead font-italic">
Kao was founded in Istanbul in 1995 by an idealistic and dynamic team with thirty years of experience in machinery, electronics, and metrology. With a strong R&D team and modern production lines, Kao has been able to create remarkable products in terms of the technical specifications, ergonomics, aesthetics, and durability. Kao has been producing metrological test devices with measurement precision beyond world standards and extremely user-friendly interfaces in the field of metrology As Kao-Metrology, we aim to collaborate with industrialists to contribute to creating a more efficient and powerful metrological system for a reliable future. Therefore, we see every product we develop as a helper that opens the door to new possibilities. Please don't hesitate to share your thoughts on our products and technologies you encountered on our website. Wishing for every tomorrow to be brighter than today...
</span>
</div>
<i class="fas fa-quote-right fa-xs text-primary"></i>
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
From the CEO
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
I have created a wider text class inside the text-center and then put the same text as a separate member and this solved my issue.