Items on same line

[DavidKing]

I have been using Freeway for years and am finding the transition somewhat difficult to get into my old brain! I have completed the tutorial and using that recreated the lead pages I want for the site I run. I have mastered the floating of pictures in a line (well nearly) but not text. I want something similar to the page on the Xway site below.

I have got two of the three Exhibeo files in line but cannot get the third to do the same. For the titles I want each over the top of each gallery but cannot get that to float in the same way as shown below.

[simonmanning]

That part of the Xway page is done using flex-display. It’s not currently directly supported in Xway but it’s relatively straightforward to do. The combination with an Exhibeo gallery makes it a bit more complicated but I think I’ve found something that works.

First insert a box and give it a meaningful name in the inspector, I used flex-galleries, then insert the text cursor into that box and press the insert box button three times.

Select one of those three boxes and change the width to 33%, then insert the text cursor into the box and enter your title, e.g. Gala and centre the text. Hit return to get a new line and insert your Exhibeo gallery. Next select your gallery item and choose Align Center under Margins and Alignment. Repeat for the other two boxes.

Finally, you’ll need to add some CSS markup to the page to add the flex. Select the Page Inspector and show CSS Markup, then paste the following code: (Replace flex-galleries if you used a different name for that first box)

#flex-galleries {
  display: flex;
  flex-direction: row;
}

You won’t see the flex in Xway’s page view so it might look something like this:

When previewed it should look something like this:

[DavidKing]

Thank you for that Simon. I will try this tomorrow. I have got the galleries in a line now by using Flex Box and also the titles underneath but I think what you are suggesting is probably better. Will come back when I’ve had a go. I think I am starting to understand what is happening at long last!

[DavidKing]

I have now tried the advice Simon gave me and has worked perfectly although I have changed the width to 25% to bring in a fourth gallery on the same line. Only addition is in order to make the whole page flex for phones etc I have had to add ‘display /flex’ and 'flex-flow/wrap in extended properties. The screenshot shows the test outcome. I should now be able to push forward and build a page containing multiple Exhibeo files which can be added to as time progresses.