Hi all, I have two questions regarding the Bento stack:
My first question: I want to have Bento items covering the whole window without gaps. I chose pictures 800 px wide and 500 px high and complement them with colored squares 300 px wide and 500 px high in some of the rows. This works fine in Medium and Large (see iPad screen in picture #1), e. g. in the first two rows, where I have two pictures and one coloured square each in every row, adding up to (responsive) 1100 px width and of course 500 px height of each row.
Now, when I try to build a Bento composition in Small, taking one picture with 800 px width and 500 px height and one coloured square with 300 px width and 500 px height, I would expect them to line up to a (responsive) composition of 1100 px width and 500 px height.
Edit: Problem solved: As long as one of the items has a wrong size, the whole composition can fail. After controlling all the items, the page appears just as I wanted in all screen sizes (see pictures #1 and #2).
The matching URL is: https://staging.lengyel.de
My second question: Concerning the underlying 'grid', I set up 8, 11, 19 and 19 columns for XS, S, M and L screen sizes and 16 rows to have enough reserved space for the 16 objects I am juggling with. This works without Advanced Sizing (pictures #3 and #4). But why do all Bento items disappear, when I select Advanced Sizing (pictures #5 and #6)?
