Currently, I am in the process of working on a Shopify website and I am faced with an issue regarding the scaling of images to match the size of the text. Here is what it looks like at the moment: Image depicting the discrepancy between image and text sizes
Below is the code snippet that I am currently using.
<div class="bulky-img-section-right">
{%else%}
<div class="bulky-img-section">
{%endif%}
<div class="image-sub-section">
<img class="is-image" src="{{section.settings.image-link | img_url:'master'}}" alt="{{section.settings.image-link}}" />
</div></div>
CSS
.bulky-img-section
{
display: flex;
flex-direction: row;
width: 100%;
}
.bulky-img-section-right
{
display: flex;
flex-direction: row-reverse;
width: 100%;
}
.image-sub-section
{
width: 50%;
padding: 3rem;
}
I appreciate any help or guidance provided. Thank you.