Ideal-banner-size-or-ratio-3-questions


(Peter Schmitz) #1

I want to use a picture for the banner in Foundry that consist of a drawing and text, right beside it. I want this drawing and text staying always in the middle of the banner.
I already use the stack Margins and Vertical. But I don’t get the settings right for the mobile break.

3 questions:

  • what is in general the ideal size or ratio between height and width?
  • what are the best settings for the break points?
  • what is the best setting for the Layout of these stacks: fill, fixed size, float or flexible?

(LJ) #2

Not quite sure what you mean. Do you have an image and a separate text stack which you want to centre in the image? In which case you could try Joe Workman’s target stack. Do you have a link?


(Peter Schmitz) #3

I did try to work with a seperate text and image stack, but that didnot work the way I want. So now I have a image with the text in it.

The site is being tested on: https://www.denkkracht.nl/TESTSITE/ – site is in Dutch : )


(LJ) #4

OK I see what you mean. Basically the image isn’t keeping it’s exact ratio across all screen sizes - although it is quite close.

I would have thought that putting the image in a supplied Foundry Image stack at full size with no margins / padding etc would work. If not, then you need to get some advice from Elexir - Adam’s very helpful in my experience.

There is an older thread on this general subject here: The sizing of (Responsive) headers/banners


(Peter Schmitz) #5

@LJ Thx for replying. I tried to do what you suggest, but putting the Image stack inside the banner doesnot work.
But I got rid of all the other stacks and placed the image as background image in the Banner stack itself. That brings the solution closer.

So thx for the hint : )


(Stuart Marshall) #6

You should really separate out these components as opposed to fixing them in an image. If I were you I would have a background image that only contains the opaque owl (possibly with the owl centered as opposed to at the right). I’d then add a 2 column stack and put your full coloured owl image in the (smaller) left column and the 2 text elements in the (larger) right column. These would then stack nicely on mobile. And you’d need to vertically centre the content within the banner too


(Peter Schmitz) #7

@habitualshaker Thx for the tip.

Alas, it doesnot work properly. See the image of the preview.

What should be the settings of the Banner stack?
Can I use the Margins-stack to get it right?

Voila_Capture%202018-09-12_01-51-22_PM


(Stuart Marshall) #8

Foundry’s Banner is a bit restrictive in terms of height settings (as you can only set a height in pixels). You would definitely want to increase the height for mobile based on the image above. Are the owl and text in two separate columns? Not sure why they are not stacking if so.

Edit: And have you ‘paired’ your nav bar with the Banner? i’d not do that if i were you. Just have it sat below

To be honest I would probably use BWD’s Section Pro and/or SideBar to create this type of Banner.


(Peter Schmitz) #9

I cannot find BWD right away. You maybe have a link?


(Stuart Marshall) #10

Sorry. It’s Big White Duck https://www.bigwhiteduck.com/

These stacks are way more complex to use but they do provide the user a lot more control in terms of being able to achieve their desired end result in terms of layout.

(I should say that I do use Foundry and you can definitely get close to doing what you describe with only Foundry stacks.)


(Adam Shiver) #11

@psmiles I replied to your post on the Foundry forum as well. Now that I see your URL, which wasn’t included in the Foundry forum thread, I can recreate that banner for you I suspect. Post up a ZIP file containing your background image, and your owl image separately and I’ll take a look.


(Peter Schmitz) #12

The zip isnot allowed on both fora : )

So hereby:


(Adam Shiver) #13

Here’s a quick example that I knocked together. Give it a look. This layout is pretty powerful in that you can adjust a lot of different things at the various breakpoints, making it very flexible to what you’re trying to achieve.

Download: https://d.pr/f/dXBQy1

Anyone interested in how it is setup, feel free to grab the ZIP file too and have a look. :slight_smile:


(Peter Schmitz) #14

@Elixir Thx!

I will have a look at it on friday. Other obligations now.


(Adam Shiver) #15

Ok. Sounds good. Figured you needed it straightaway since you posted both here and on the Foundry forum. Let me know if it gives you a better idea of the direction to go. I didn’t style the text really or set the inner width of there banner. You could also set the background to be locked, which might look cool as well. Anyway, have fun.


(Peter Schmitz) #16

Sorry, but it has too many possibilities - so couldnot check them all now. But I keep u posted! : )


(Adam Shiver) #17

Ah, no need to check them all out. Just let me know if it displays in my example properly now for you. :wink:


(system) #18

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