Billboard compatible with Source theme?

Therefore you must have something else on the page or not on the page that should be there such as the Source theme.

Best way to isolate this is to repeatedly remove Stacks, preview in Chrome, check and repeat until you have nothing but the Source stack, a Container and a Billboard with the Source theme. This will quickly isolate the problem stack.

Very odd. Cannot replicate that behaviour at all in any browser. Did Tav’s simple project file not even work as expected for you?

As in tav’s screenshot, the following css can be added for now to make it work for your page. I’ll keep investigating and make a change to the stacks if need be.

.stripped-wrapper {width: 100%}

Sidenote: not sure why you are nesting Containers in the Header. You should be able to do what is there with just 1 Container Plus stack. (Have tested Billboard in nested containers to check and this isn’t causing the issue that you are having).

@habitualshaker - Found it , it is because you have flex-wrap:wrap set on the stripped-content - this will allow its content to be wider than the browser when there is only one direct descendent div - i.e there are no others to wrap. Change that to no-wrap or initial and it obeys the browser width.

@tav Good spot.

I think that is a base utility class that @gcspoon added to one of the redundant Containers.

Why would it behave differently in Safari and Chrome/Firefox though?

Ah good man! Will sort that out.

It’s added automatically if you select the Container to be a flex container.

see above:

What I still don’t understand though is why I can’t replicate it even with the container set to flex or if I delete everything else off Garths live page. Its a bit weird for sure.

1 Like

yeah - me neither. is odd.

I think the obvious solution is just to remove flex-wrap: wrap as the default and just make it an option in the settings or via a class.
Most people will never need to use or understand flex-wrap and I think removing it is less intrusive than overriding the flex behaviour with a width:100% which could have other consequences

2 Likes

Agree.

@gcspoon - until this is in the published stack you can add the class s-flow-down to the ‘Inner’ custom class of the Container where you have set up the flex.

Thank you all so much for your time! I’ll give that a try :)

Adding s-flow-down to the custom class of the container worked perfectly! Thank you @tav, @habitualshaker and @Webdeersign!

One more quick question (please forgive me…I’m still learning how to use Source properly) for Stuart:
I’m using Joe Workman’s Equal Height stack to make tiles, and I want the content in the tile to be vertically centered…I can’t seem to get all of the content to be aligned vertically, though

Here’s the page: https://surreyschoolsone.ca/teachers/

Is there a way to do this?

1 Like

Can you not just use the Source Grid stack to create your tiles? The grid items in that are all equal height by default.

Not any more you are. Those days are over.

That’s great!

I removed the Equal Height stack but I’m not getting equal height tiles…

https://surreyschoolsone.ca/teachers/

There’s probably a setting that I’m overlooking…

Leave the Block Align setting to ‘Fill’ in the parent grid (that’s the default but you must have switched to ‘center’). Then you can use the alignment options in each grid item to set the vertical alignment.

I’d be very interested to learn how to do pure CSS nested equalisation as per many card layouts without the use of JS?

Thank you Stuart! So I’ve got the content centered now…but the turquoise tile doesn’t fill the entire space.

This is how I have it set up:
Markdown stack inside Container Plus stack (Container Plus stack has the background gradient)
Container Plus stack inside Grid Item stack
Grid Item stack inside Grid stack

How do I get the Container Plus stack to fill the entire space?

Take the content out of the Container - the container is not needed. Do this for all items. You can apply a background on each grid item (if they are all the same then you should set this up using a Container Base stack as this can then be applied to the grid items).

YOU ARE AWESOME! Thank you, Stuart! I’m still getting used to Source, but I’m loving it!

1 Like