Streaming live at 10am (PST)

Responsive Layout Help!

Hey, I’m trying to create a responsive banner on my site. The first image is what I’m after with the skates overlapping the blue background, however, once I reduce the browser size the skates shrink too much and I end up with a strange layout. Any ideas? I believe this is something to do with ‘Position’ but have been unable to work it out. Thank you!

Welcome to the community @William_Richards!

My first thought based on the affect is to recommend setting the blue section to position: relative and the image to position: absolute so you can more easily control the position and sizing of the skates within the hero. This will take the image “out” from the document flow and prevent it from shrinking with the column it’s placed within.

That said, it’s going to be hard to recommend a specific solution to the issue without taking a closer look—would you mind including your read-only link?

@mikeyevin thank you I’ll give that a try. Here’s the read-only link:

I recorded a quick video below for you to check out that should help illustrate how I’d go about setting up a similarly styled hero:

It’s worth noting that you’ll want to adjust your values for each of the smaller breakpoints, but I was running out of time so I wasn’t able to touch on those adjustments.

If you have any questions, feel free to reach out :metal:

Thank you so much Mike! Really appreciate it :slight_smile:

1 Like

Hey @mikeyevin! Hoping I could pick your brain again with a newbie question on this, please. So I’ve been attempting to adjust the size and position further to the left as shown in the screenshots. However, with the settings we created before this now leads to the image cutting off as the browser size is reduced. Any help would be amazing and thanks again for sending the previous video over! Will

I took a quick peek at your project and it looks like you figured out the issue by setting the object position to the bottom left.

If you run into any other problems, don’t hesitate to reach out!