Full screen image on home section of 1 page website *Solved*

Classic
1

I’m just finishing a one page website that I wanted to build in Joe Workman’s Screens but decided it is too content heavy for that approach. Instead I have built in Foundation with BWD MagicGellan2 and MagicMarker stacks.

However, I would like just the Home Page (more accurately the Home section) to be a full screen banner image i.e. behave like a screens page and perfectly fit all screen sizes.

Any ideas on the best way to achieve this? I have tried putting a screens page in but it’s not working too well.

2

If you use a Sections Pro stack, there’s a setting to make it a proportional height (which you can set to 100% browser height), that should do the trick. Then you can either add an image stack or choose an image for the background. Sections Pro also integrates perfectly with the magicgellan stuff as well.

1 Like
3

Thanks - this is what I’m trying currently but not with any success. Only just started however so maybe need to look a bit deeper

4

Tough to tell without seeing your setup but maybe double check that the proportional setting is height, not width. I think it defaults to browser width…

5

Think I need a break - I was using a sections box stack. maybe not the same capability. Will update

6

I think that could work too, but it brings a host of other layout options (which I can’t describe accurately off the top of my head as I’m not at my RW comp). I would think Sections Pro would be the simpler route, though.

1 Like
7

Done it! Sections Pro stack. Pete Northfield also recommended the Impact stack from Joe Workman which looks like a very good solutions also - and of course has other strengths. Thanks for the input!

2 Likes
8

I was just going to recommend Impact. But looks like Pete beat me to it… :slight_smile:

1 Like
9

One issue I am experiencing. When I get down to iPhone SE size, a large white space appears above the full page image (the image is set as a background child stack in Sections pro). Above this size it’s fine. First screengrab is iPhone 8 size and all is good. Second is SE size and ‘padding’ appears at top and (off screen) a small amount of padding below. I have played with the flexible height settings but to no avail. Any ideas?

00
00361×818 385 KB
17
17322×609 228 KB

10

One question about Impact - when you add content can you add more than one stack directly (in this case I would like a logo image, a header and a Facebook link) or do the additional elements need to be added with Target?

11

What are your image settings? Is it set to ‘contain’ maybe? Contain will resize the image so it’s width fits on the screen (but landscape images may end up being too short on ‘portrait orientation’ screens). Cover will enlarge the image until it fills height and width. This may cause cropping but will get rid of white space…

12

It’s a Stacks drop zone so you can add as much content as you want. If you use Target inside of it, you can position the content wherever you want.

13

Great - that’s what I thought. Essentially, the drop zone has one set of positioning controls for that Zone shence to add multiple positioning you can use target. Cool.

14

No it’s set to ‘Cover’. As I say this cropping only happens at the smallest of iPhone screen sizes.

15

Problem solved: the banner image supplied by client is a bit too ‘letterbox’ (approx 10x6 ratio). I have replaced with a 10x8 ratio image and all is well.

1 Like
16

Actually above solution was not good enough - a white space appeared on anything smaller than desktop _below_the banner! Very frustrating - solved eventually by putting the Impact stack (which I have started using) inside a 1 column stack with a background colour the same as the 1 column stack below. This has effectively covered the white space below the impact banner.

17

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