[SOLVED overlay assistance] Need a little help please

Classic General
1

Big thanks to Rob Beattie for introducing me to the Blueprint stack from BWD :+1:

Hi, hoping someone can help me, I’m just can’t figure out how to create the example in the following website. Smart Scales, Watches and Health Monitoring Devices | Withings

Screenshot 2021-06-29 at 20.46.11
Screenshot 2021-06-29 at 20.46.112208×2002 398 KB

I really like the way the two white boxes overlay the above banner/header image. I can make something similar but when I resize the screen, the white background product placement boxes move around rather than stay positioned. I hope this make sense (yikes).

I use Joe’s Foundation, haven’t upgraded to 6 as yet.

Thank you :crossed_fingers:
Chris

2

Hi Chris,

how do you expect the layout to behave on smartphones? If you’re trying to preserve the two panels side-by-side, they’re going to be too small to read comfortably IMHO. I’d expect them to stack in some way. Or maybe think about hiding the panels below a certain breakpoint and replacing them a different way of presenting the information on small screens?

Rob

3

Fantastic, thank you, Rob; I really appreciate you replying.

I want to set it up so that the two panels adjust for tablets and smartphones. I just grabbed another screenshot from my iPhone, so two columns for PCs and tablets in landscape, and single columns for tablets in portrait and smartphones while maintaining that little bleed over the header image.

I’m usually pretty good at overcoming some areas with trial and error, but this one has me stumped. :blush:

Thank you,
Chris

Withings Smart Scales, Watches and Health Monitors
Withings Smart Scales, Watches and Health Monitors621×1104 111 KB

4

What are you doing to try and get the effect you are looking for?

You said you are using Foundation 1, but didn’t say anything about what stacks you are using and how you set them up.

Perhaps a URL to a test page of what you have tried along with a bit more information on how you tried it would be helpful.

5

I’ve not built a site in Foundation for a while but as I recall, the trick with things like this is to design the mobile view first and then adjust the columns so they ‘split’ into two when you reach the tablet breakpoint - rather than designing the two column layout and trying to make that stack at mobile.

6

Thanks, Rob. I can get a 2 column stack (currently using Grid) to move to single column for smartphones but I can’t work out how to get the top of stack in any screen mode to bleed over the header image above just that little bit as per the images shared. I really like the white box with round corners bleeding over the above image a little.

7

Thanks Doug. I’m not protective over what I use and will happy buy another stack if necessary.

8

It’s been awhile since I’ve used Foundation 1 ( Foundation 6 has been out for sometime).

I think you’ll probably need something like Target to position the boxes overtop the banner.

You would use Target to place the two column stack over the banner.

It’s always best practice to use a mobile first design.

9

I will keep trying with Target.

10

Blueprint from BWD lets you do overlapping content and might be suitable. There’s a video here that shows how this works.

2 Likes
11

Wow Rob, that looks like it could be perfect. I just checked out the overlay video. I’m looking forward to exploring this further and sending BWD some shekels. Thank you so much :blush:

Yes, the Blueprint stack from BWD saved the day :sunglasses:

2 Likes
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.