Help w grouping text and photo together (or locking their spacial relationship)?

Hello! My website (allthethingsbyautumn.com) has password: allthethings

On my homepage, I have 2 text boxes that say: 1. "Your guide to" and 2. "Living mindfully by limiting toxic load" that wrap over my main photo. Dependent on the width of the browser being used, the text goes over the photo in a way that is hard to read - see attached photo examples.

Is there a way to group the text boxes with the photo box or essentially lock their relationship to each other so that this variability isn't possible and always looks like the wider width attached photo (with easier to read text) regardless of the browser width?

On 3/27/2024 at 5:37 PM, allthethingsbyautumn said:

Dependent on the width of the browser being used, the text goes over the photo in a way that is hard to read

Hi @allthethingsbyautumn this is happening because your text box is too narrow. When there isn't enough room in the text box horizontally, the text wraps and moves onto the next line. 

Try dragging your text box wider, so when the browser resizes, your text box width can remain wide enough for your text to fit in the box. 

Let me know how it goes!

Hi @melody495 - thank you so very much for taking the time to reply to my post! I'm really glad you identified this as the issue because this highlights another issue I have with my homepage... I would ideally love the text box to start way further left so there is less dead space on the left which is also the solution you're suggesting,.. that the text box goes wider. However, I can't drag the text box over any more as I can't figure out how to make the grid expand further left. Is there a solution for that?

On 3/31/2024 at 2:55 AM, allthethingsbyautumn said:

I would ideally love the text box to start way further left so there is less dead space on the left which is also the solution you're suggesting,.. that the text box goes wider. 

Hi @allthethingsbyautumn I actually would suggest extending your textbox to the right! Sorry for not being descriptive in my previous response. This way you don't affect your design, whilst allowing a more suitable responsive design for different screen sizes.

On 3/31/2024 at 2:55 AM, allthethingsbyautumn said:

However, I can't drag the text box over any more as I can't figure out how to make the grid expand further left. Is there a solution for that?

You could actually move the textbox to right up against the edge of the screen, but that is probably not what you are looking for.

The space left and right of the grid space is determined by the margin of your website. This margin is normally scaled with the screen size. May I ask what screen size your screenshot was taken from?

You have the option to adjust the margin of your site, so that there is less/more space on the left and right side of the grid. You can adjust it here, this effect is site-wide. Site Styles -> Spacing -> Site Margin

It looks like your current site margin is 4vw.

This is so helpful, thank you @melody495!

I wound up adjusting per your initial recommendation so now the two blocks (text and photo) don't overlap - see attached photo. You've been so helpful I really appreciate it!

I think my site is all set and done now (I checked spacing and layout on all devices - large screen, computer, ipad and cell!) but if you have any interest in taking a peek I'd love to know if you have any suggestions or if it's good to go! allthethingsbyautumn.com password: allthethings

On 4/3/2024 at 3:28 AM, allthethingsbyautumn said:

This is so helpful, thank you @melody495!

I wound up adjusting per your initial recommendation so now the two blocks (text and photo) don't overlap - see attached photo. You've been so helpful I really appreciate it!

I think my site is all set and done now (I checked spacing and layout on all devices - large screen, computer, ipad and cell!) but if you have any interest in taking a peek I'd love to know if you have any suggestions or if it's good to go! allthethingsbyautumn.com password: allthethings

I see your screenshot is fine. What is problem here?

No problem! Was just curious if there was any feedback or suggestions.