Hi @tav, is your Billboard stack compatible with the Source theme, or is it Foundation-specific?
I’ve used it many times before without issues, but I’m using it on this website (https://surreyschoolsone.ca) and it works fine in Safari but the width of the text doesn’t resize when I view it in Chrome…any idea why?
If it doesn’t work with Source, does anyone know of another stack that does the same thing that works with Source?
Thanks in advance!
I have used Billboard in several Source sites without any issues. I just checked again on Chrome and they are fine and also your site works fine for me.
The container (or part of it) is not scaling down to the browser width and is overflowing off the right hand side (and so Billboard is fitting to that width).
It does the same in Firefox (the container overflows the browser width). As is often the case, Safari applies an implicit 100% width to things and so it does not show the problem
If I apply a width:100% to the stripped-wrapper div then it adheres to the browser width in Chrome and Firefox (and so Billboard fits to the correct width).
Perhaps @habitualshaker could take a look at the container, thnx.
That totally makes sense…thanks @tav!
@habitualshaker is there any way to fix this? :)
I’m not sure what you’ve done settings wise to cause that because now I’ve had a chance to test it the problem does not occur.
It all works fine in all browsers
Hi Tav, it still looks the same to me (i.e. it’s still not resizing in Chrome)…strange…
(I’ve got the latest version of Chrome)
My project is definitely resizing in Chrome and FF for me but your published page is not.
Works on my pages 2. A fresh Source page with just a Container Plus with a Billboard set to base width or a custom width, works fine in Chrome for me.
@gcspoon Maybe try a republish all files and a Chrome browser clear.
Weird…republished all files, emptied cache, and still doesn’t work for me on the published site…
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.
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
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 :)
