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?
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?
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.
@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.
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
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.
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.)
@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.
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.
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.
