Responsive heading location around left-aligned image

Resolved Barth
(@bsiemens)

1 year, 10 months ago

I recently published a site that I built with the Twenty Twenty-Four theme.

How can I change the responsive text flow around an image for a phone? The linked test page demonstrates my issue.

On a medium-sized screen: I like the small, left-aligned image, with heading and text flowing from the right and then below.

On a small-sized screen: I want the heading to start below the image instead of breaking inline.

I have applied a variety of blocks (ie. group, stack, and row), and have also tried additional CSS classes.

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

George Appiah
(@gappiah)

1 year, 10 months ago

I’m supposing by “heading” you’re referring to the Site Title, and by “text” you’re referring to the Site Tagline.

Move the Site Tagline block into the same Group block containing the Site Title. Simply doing this should give you the following layout on both mobile and desktop.

I personally believe this should be the optimal layout given the square logo (instead of a rectangular banner) — and the existence of the third element (the hamburger menu). It’s also a low-effort solution, requiring no custom CSS or additional plugins. And dare I say it’s also more elegant?

But if you want different layouts on desktop vs mobile, you will need either a conditional/responsive block plugin or custom CSS code — as neither WordPress nor the Twenty Twenty-Four theme offers such controls natively.

Thread Starter Barth
(@bsiemens)

1 year, 10 months ago

Hi George,

Thanks for your guidance regarding what I think of as a Header, which I was going to review after I resolve this current issue. (I concur that your solution is more elegant.)

I will follow your lead, and illustrate my question. The first image shows the photograph sized to 240px wide, where I prefer the Heading (2014–2020) to stay on one line.

The second image shows the photograph sized to 300px wide, where the Heading and Paragraph flows from below the photograph. This is my desired effect, but with the photograph sized to 240px wide.

Can you recommend documentation that will teach me to achieve this goal with customised CSS code, if that is an option?

Thread Starter Barth
(@bsiemens)

1 year, 10 months ago

I think I resolved my issue by adding padding on the right of the heading. Thank you for your time.