I am putting several Exhibio components in a row, but when I do this, the image of my Bloxx gallery stack turns sideways on the page. Goes from landscape to portrait, unless it was in portrait, in which case it stays the same. I can get around this by choosing a different image to start, always in portrait, but it is not always the best for me.
Also, when viewing on the phone, the row of component images is distorted, the first most distorted, the second less, the third not much.
And one other question. Is it possible in this situation to add titles to the components. It seems I cannot add a line of text under the component in a way that it stays with it. My workaround is to duplicate the first image and add a title to it, which works.
All said, I am happy with the way I was able to put together the site. The flexibility of the Exhibeo galleries is not as apparent as maybe it should be, a surprise when trying out the different versions.
Would you be able to send us your Xway document, or a cut-down version of your Xway document, so we can investigate?
I’ve looked at your site, and scanned the source code on the home page, but it is easier for me to see what is happening (and suggest solutions) if I have an Xway document to look at.
I think one way to avoid the problem of the component (stack) boxes shrinking and distorting horizontally on narrow devices (e.g. phones) might be to allow the component (stack) boxes to wrap onto successive lines (e.g. choose Wrap in the Flex Container section of the Box Inspector).
I won’t have time to look at this before next week, but I’m happy to take a look if you send your document (or a cut-down version) to support at softpress dot com.
To create a cut-down version of your document:
Duplicate the document by choosing Duplicate from the File menu
Remove some of the pages from the duplicate document (keeping the home page and one or two others)
Empty the Site folder by choosing Empty Site Folder from the File menu.
You may be able to shrink the duplicate document further by closing and reopening it, then resaving .
Compress the document as a zip file when you’re ready to send it. If the zip file is larger than around 10 MB, you may need to send it via a file transfer service (Dropbox or WeTransfer etc.)
I don’t think we need any of the images separately from the document.
Thanks for sending your document. I notice that it uses a flex container to hold the galleries, but it is slightly complicated because there are two flex containers within the outer container that hold the first gallery and the second/third galleries. There are also some empty boxes that seem to be intended to act as spacers.
The first thing I would do is to delete the spacer boxes - there are better ways to create space. Then, unless there is a special reason for having two inner flex containers, I would also remove these. You can do this using cut and paste: cut the first (black and white) gallery box and paste it after the box that previously contained it. Then cut the other two gallery boxes and paste them after the first gallery. Then delete the now-empty flex containers that previously contained the galleries. You should now have a single flex container with three gallery boxes inside it.
The next thing to do is to create some space. You can put some space around all the gallery boxes by adding some padding (e.g. 30px) to their parent flex container. You can also put some space between them by setting a column gap (e.g. 30px) on the parent container. Try previewing this using Safari’s Responsive Design Mode to see how it looks on a phone (search for Responsive Design Mode in the Xway User Guide if you’re not already using it). You should find that the gallery boxes scale evenly, although you might notice that the middle gallery becomes stretched vertically, because Stretch is the default Align Items setting for flex containers. If you don’t want this to happen, change Align Items to a different value. You can do this on the flex container, or you can change the align value for that single item: select it and and change Align in the Flex Item section of the Box Inspector.
You might also want to prevent the component boxes from shrinking too much on narrow devices - so they don’t become hard to read or tap on. You can do this by setting a minimum width (e.g. 150px). If you do this, you should also set the flex container to wrap (choose Wrap from the Wrap popup in the Flex Container section). When you’ve done that, set a row gap of 30px so there is some space between the boxes when they are wrapped. Check that everything previews correctly before continuing.
Now for the remaining question: how can you add some text that displays in front of the component boxes? To do this, you need to put each component box in a separate wrapper box:
Add three empty boxes after the component boxes.
Cut and paste the component boxes into the empty wrapper boxes, so that they are each in a separate wrapper.
If you previously set a minimum width, set that on each of the wrapper boxes.
Select one of the component boxes, and insert a box after it.
Set the box you added to have absolute position (choose Absolute from the Position popup in the Style section of the Box Inspector).
Give this absolute box offsets of 10px (left, right, top, bottom).
Type some text within the box, centre-align it (to match the current image text), and use top and bottom margins to add or remove space between the text paragraphs. Another thing you can do here is to insert a line break instead of a carriage return between “Stack” and “#1” (choose Line Break from the Insert menu). This keeps the lines together as a single paragraph.
Insert the following CSS property in the Extended Properties section of the Box Inspector (for the box containing the text): pointer-events (Name), none (Value). This prevents the text box from intercepting clicks that are intended for the component box behind it.
Do the same with the other boxes.
One thing that is quite difficult with HTML text is to scale it so that it resizes when its parent box shrinks and grows (as naturally happens when you add text to an image). I don’t think that should matter too much in this case, because if you set a minimum width of 150px on the wrapper box that contains the component box, the text can reflow when it needs to do this. If you find that you do need to resize the text on narrow devices, there are ways of doing this (feel free to ask).
Some general advice:
Keep things simple: don’t use more flex containers than you really need.
Don’t use empty boxes to create space. There is usually a better way of doing this. These include: padding (on a parent container) and margins, along with column gap and row gap on flex containers.
Choosing Wrap on a flex container is a good way to create a flexible layout!
Hi Jeremy,
Yes, the extra container s were for spacing, and also some from failed attempts to add titles, and then not deleting them.
I did as you suggested and all the spacing and display issues are gone. This will be helpful as I add more content in the future.
I didn’t try to work with the text issue yet. Not sure if I want to change what I am doing.