How to add an image as an accent/embellishment to titles?

Site URL: https://salamander-vuvuzela-ctjp.squarespace.com

Can you provide some guidance?

I am trying to add an image (part of the logo) to section titles for design purposes.

However, at certain breakpoints it moves and looks bad. For example, on a laptop and phone, it may look correct. But on a tablet, it looks bad. It seems that elongating the text box isn't the fix. 

I’ve attached images and a quick video to review.

Password for site: ebiker 

Thank you for your time!

Justin

39 minutes ago, Justin G said:

It seems that elongating the text box isn't the fix. 

It would fix the text stacking but you would have to adjust the horizontal alignment of both the image and text. 

4 minutes ago, Ziggy said:

It would fix the text stacking but you would have to adjust the horizontal alignment of both the image and text. 

@Ziggy, thank you for the reply. I either misunderstand you or it's not working for me. If I make adjustments, either way ( x or y axis) it still doesn't look right at many breakpoints. I assume I would need to "fix" the title and image with CSS.

What do you think?

Does this not work?

https://quillfish-tangerine-4c2a.squarespace.com/ebike?password=test

3 hours ago, Ziggy said:

Does this not work?

https://quillfish-tangerine-4c2a.squarespace.com/ebike?password=test

Sorry for the late reply, @Ziggy. Yes, that performed much better.

I'll have to try again.

Thank you!

8 minutes ago, Justin G said:

I'll have to try again.

Both image and text are vertically centered, horizontally left aligned, and both have blocks that are as wide as possible.

9 hours ago, Ziggy said:

Both image and text are vertically centered, horizontally left aligned, and both have blocks that are as wide as possible.

Thanks for helping. It is working better, but now I don't have any padding on the left side of the section (as seen in the screenshot. I may just have to do something different for now.

Thank you for your time!

6 hours ago, Justin G said:

Thanks for helping. It is working better, but now I don't have any padding on the left side of the section (as seen in the screenshot. I may just have to do something different for now.

Why not just reinstate the gutter rather than having the image against the edge of the screen? You had it looking good on mobile before, that didn't need to change.

On 11/19/2024 at 3:23 AM, Ziggy said:

Why not just reinstate the gutter rather than having the image against the edge of the screen? You had it looking good on mobile before, that didn't need to change.

Good question. No matter what I did (or did not do) the gutter on the left decreased. 

I took another route for now as I determine what's going on.

Thank you for helping out, @Ziggy!👍