Homepage caption box width

Technical Q&A
1

How do I adjust the width of the caption box. It’s too wide and it cuts into an image to the right of it.

image
image1194×846 160 KB

2
  1. @tzyz75 You can add line break after CDW in theme editor
  2. Or you can use custom css :
    .image-with-text__text–caption {
    max-width: 400px;
    }
3

Thank you for the quick reply. How do I add the line break?

4

Hey @tzyz75

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
p.image-with-text__text.image-with-text__text--caption.caption-with-letter-spacing.caption-with-letter-spacing--medium.caption-with-letter-spacing {
    width: 55% !important;
}
}
</style>

RESULT:

image
image1631×658 138 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

5

That worked perfectly! Thank you. Any way to change the CDW letter color to red/

6

I managed to screw it up. I changed the caption text style to subtitles and now it’s too wide again

7

@Moeed My home page looks bad now. Please help! My image on the right is getting cut off

8

image
image1825×768 208 KB

9

hii @tzyz75

Your image is being cropped because the section is likely using Adapt to first imageoff or is set to a fixed height like Small Medium Large which forces cropping.

Go to:

Online Store Customize Home page Hero/Image banner section
Then

Change Section height to Adapt to image
Or disable any Crop image to fill setting
Make sure the image alignment is set correctly e.g., Right or Center
If that doesn’t fix it your theme is probably using:
object-fit: cover;
In that case, change it to:
object-fit: contain;