Assigning width percentage to image with text section in the Canyon/Dawn theme

Online Store and Theme Development
1

Short description of issue

When using image with text in the Canyon/Dawn theme and no overlap mode, I am not able to display the whole image

Link to Shopify Store

Still under development

Reproduction steps

Create a section with a slightly bigger image and sufficient text with 5-6 bullets on the right side.
Choosing Desktop Image width as small, medium, or large will still not fit the image.

Additional info

I have tried small, medium, large size of image with no overlap. It has not helped. This is a generic issue. I know the feature is not supported. I am looking for workarounds.

Would like to know what specific changes in code are required to make this work. Please let me know the file to change and the specific change to be made in it.

What type of topic is this

General discussion

2

I was provided the following solution:

Here’s the custom CSS code that will prevent image cropping and ensure the full image is always visible:

.image-with-text__media img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}

.image-with-text__media–adapt {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

To implement this:

  1. Go to the theme editor

  2. Click on an individual Image with text section

  3. Scroll to the Custom CSS field

  4. Paste the code above

  5. Click Save