I’m not sure if I should ask this question for the Foundry forums or for 1LD. It has to do with the spacing around their stack so that makes me wonder this setting should be done in Foundry instead? Maybe it could be done in Foundry and the 1LD Backdrop stack.
My question is Backdrop seems to just have a setting for a fixed “content width” but I need it to expand to the edges of whatever device it will be viewed on. Is that something that can/should be done in Foundry instead?
The Angle stack just seemed to automatically spread out to the edges of whatever device I’m using but that doesn’t seem to be the way it works with Backdrop. I would upload the file but for some reason a basic one page RW file is 83MB compressed and the size limit is 3MB.
@Kip Hi, 83MB for a one page is too much unless lots of videos . Backdrop has width option in content settings. It’s in pixels if I remember correctly. Another way is to use Blacksmith for a CSS code (site width like) or directly inject CSS code in page CSS feature in RW. Hope that helps.
A CSS example to achieve that (you’ll have to target the stack with the ID full-width-stack ; you can name it as you want) :
.full-width-stack {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
Is this part of Blacksmith? I did a search in the stacks library and don’t see one called that. Just trying to figure out where I place that info. Could I have a screen grab that shows where it goes? That might to help clear things up.
But it only has a fixed width right? I do see an option for “forced visibility to browser edges” but when I click it nothing to happen. This is under the section that says “Experimental Features” so many this is a beta feature which isn’t fully working yet.
Yeah I would really like to know why that happens! There seems to be no reason for it to be that size.
Hi, The ID is code name. What I gave you is an example of code, there’s many other way to achieve what you want. I gave you this example in case you want to use a piece of code yourself to go faster, sometimes we save time writing 6 lines of code rather than trying to configure Stacks. If you want no code just ignore it.
For the width option yes it’s a fixed value in pixels but this does not prevent the site from being responsive to each breakpoint if you place your stack in a responsive container. It is the latter which will make it responsive normally. It’s a bit complicated but that’s the Stacks principle.
I think you first need to resolve the problem of the abnormal size of the project file. Can you provide us with a photo of the nest of stacks (several if necessary to have the entire structure of your page)? This will save time. For your information, I’m in France, hence the time difference problem if we’re not in the same zone.
Okay here is the list of items on the two pages (down this post a bit.) I’ll also review the container video again. Looking back at the one page I made with the Angle stack I noticed that I put a container and margin stack inside of the angle. It seems like this most projects the container goes on the outside generally.
In fact I need your first photo « in entire » from top to bottom of stacks page. It’ll allow me to check the nested stacks. No need of the second and third pictures.
The first page is two regular size photos pulled from the web along with a masking stack. The second is a backdrop stack with a pattern background. I thought that there might have been a possibility I grabbed a high resolution version of that image so I removed it and doubled checked that is was a file that is only 483 KB. Still the RW file remains 112 MB.
Ok, two questions : Did you activate the « force visibility to browser edge »in backdrop responsive settings ; if yes can you check if it works as you want without playlister ?
Yes I clicked forced visibility so that I could experiment with the different things the stack does.
When I take out Playlister it doesn’t stretch out to the end but stops at where I set the number in the content width. Removing Playlister didn’t do anything.
I’m not quite sure what the external max-width is? Are you saying a max-width that is set inside of a container? Or the max width stack and the settings within that? Or any stack that is outside of the Backdrop?
Part of what I am dealing with when it comes to learning about the right spacing tools is that I think a lot of those spacing stacks changed a lot with Foundry 3 and I still spend most of my time in Foundry 2 so I need to keep reviewing what is different.
If you are on a different time zone now that’s fine. I’ll do some errands now that I’ve needed to get done today.
Yes I was entered in Time sleeping zone By external max-width I meant the max-width stacks which contains backdrop. Does its settings match the backdrop width settings?
Spacing tool deals with margins and paddings and breakpoints. To be honest I am very wary of successive nestings which produce what is normally the work of overlays. Here several nested stacks modify the max and min widths and heights successively. It is not impossible, as you suggest, that this could lead to a conflict that “blocks” at one point.
Here is what I would do:
copy and paste the page into a blank project and check its weight in bytes
remove all max width and spacing and start from a backdrop with only the background you want and control what is displayed then add one element at a time and control each time.
I know it’s tedious but it’s the simplest advice I can give you when you’re jet-lagged without the project file so you can see what’s happening live. Sorry I can’t do better but that’s what I would do for myself with this kind of problem.
I’m not sure what is meant by overlays. Are you saying like modals?
I wasn’t aware that this could lead to conflicts. It seemed like when I was watching videos on
Since the projects is such a rough experiment at the moment. I’m thinking about just starting fresh with a everything new especially since the file is over 100mb.
That is okay, I’ll try to get the file size down and then maybe that is something I can send back and forth. I’ve been a day behind but I’ll keep working through it today.
Stacked stacks often cause overflows, this can cause problems (not necessarily or only the “modals”). What surprises me more and more is that your file continues to “grow”, I have no idea what can cause this completely abnormal size. Have you tried on a blank project to just work with backdrop to test how it works? If you manage to have a “normal” file size perhaps you will save time by also querying 1LD although I don’t see what could pose a problem with its stack given the photos you provided us. So to be continued.
the backdrop effect relies on the overlay, edge overhangs are managed in the background, this is the “no code” problem. We notice afterwards the CSS problems for example. I don’t know if I’m being much clearer, in other words the less we complicate the stacks the less we risk bugs. I’m really sorry I couldn’t do more to help you.
Yes that makes sense to me now. I can see how the backdrop stack can already have many layers of things going on. Thanks for the clarification. That makes perfect sense.
I was able to try this today and the size of the file is now increasing in small increments as you would expect:
Starting out size: 59kb
Once I add Backdrop stack: 79kb
When I add a small website image to Backdrop: 119kb
I don’t know the exact imagery will are going to be using since we’re not that far into this project yet. Just as an experiment the size is still in the kilobytes so things seem to be going good so far.
UPDATE ON SIZE: The document is ballooning way up in size again. Though I’ve barely added anything to it the size shot from 100KB-200KB up to 110.6MB. That is almost the exact same size as the other documents I made with the Background stack. What a strange problem.
. Backdrop has width option in content settings. It’s in pixels if I remember correctly. Another way is to use Blacksmith for a CSS code (site width like) or directly inject CSS code in page CSS feature in RW. Hope that helps.
By external max-width I meant the max-width stacks which contains backdrop. Does its settings match the backdrop width settings?