Image with text: The image is cut off, it doesn't fit in the image frame dawn theme v15

[ctsfeir]

Hi,

I'm using the template "Image with text" from Dawn template
How can I make that the image is not cut off and the logo can be completely visible in the frame?

Thank you 

http://www.glaura.ca

conditioner bar page ( picture with table comparison )

[Hamza_takkar]

Hey Ctsfeir , our team will help you

1. Access Your Theme Code:

   • In your Shopify admin, go to Online Store > Themes.
   • Find the theme you're using and click Actions > Edit code.

2. Locate the CSS File:

   • Look for the CSS file where your image styles are defined. This is usually located in the "Assets" folder and may be named something like theme.css or base.css.

3. Modify the CSS for the Image:

   • Add or modify the CSS to ensure the image is fully visible within its container. You can use the object-fit property to control how the image is resized to fit its container.

Here is an example of the CSS you might add or adjust:

css

Copy code

/* Ensure the image is fully visible */ .image-with-text__media img { object-fit: contain; /* This ensures the entire image is visible */ width: 100%; /* Ensure the image takes up the full width of its container */ height: auto; /* Maintain the aspect ratio of the image */ }

Save Your Changes:

• After making the changes, click Save to update the file.

1. Test Your Changes:

   • Visit the page in question (e.g., the conditioner bar page with the table comparison) to ensure the image is not cut off and the logo is fully visible.

By adding or adjusting these styles, you should be able to make sure the image in the "Image with text" section of the Dawn template is fully visible without being cut off. If the issue persists, you may need to further inspect the specific CSS properties applied to the image and its container and make additional adjustments accordingly."

if you have any other works or query reach us out on our bio 👍

[ctsfeir]

thanks for the code, should i paste it like that on one line?

is it possible to get the code as i should paste it in base.css

thanks hamza 😄

/* Ensure the image is fully visible */ .image-with-text__media img { object-fit: contain; /* This ensures the entire image is visible */ width: 100%; /* Ensure the image takes up the full width of its container */ height: auto; /* Maintain the aspect ratio of the image */ }

[Hamza_takkar · Accepted solution]

here is the code as an example "

.image-with-text__media img { object-fit: contain;

 width: 100%;

height: auto;"

}

[ctsfeir]

Awesome, thanks so much hamza, do you know how to remove the border line of the picture edges ? 

I can see a border on the edges of the photo even tho there are no edges in the artwork! Any code to remove it?