Good day! I’ve downloaded a version of Xway in an attempt to migrate some existing sites. Starting off small. The site isn’t hosted yet.
I have managed to connect the graphics, sort the menu - but cannot get the Freeway version’s two columns to be side by side.. I have one to the left….one to the right….but cannot find a way for them to be side by side…one is lower than the other. Each shows as a “box”.
Having a similar problem with my footer.
If I change the position to anything other than “none”, it allows side by for the columns….but everything else gets messed up.
Freeway used an old technique to do this (floated layouts + clearfix hacks).
Xway supports CSS flex layouts, which can do the same (and more) without requiring additional hacks.
We have a tutorial on flex layout, although it’s helpful to work through the introductory tutorial first. There’s also a detailed chapter on flex layout in the Xway User Manual.
To view Xway tutorials (written and/or video), choose Xway Resources from Xway’s Help menu, and click on Tutorials.
You can also see examples of flex layout in Xway templates: choose Xway Resources from the Help menu, and click on Templates for more information.
Hi Jeremy! I am pleased to say that I’ve made real progress in building (rebuilding a Freeway site) in Xway. Before I start my next…I’d be glad for thoughts on a site not yet hosted where I am having an issue with Flexbox “columns” when the page is compressed for a mobile width view.
I have many different things, but at least the way it is currently set - it works. But - when the columns stack, they seem to be too small and on the left.
Am I missing something as simple as setting different dimensions for the mobile view?
I’ve attached 2 screenshots…..one shows the wider width - the other the narrower version. I may add that changing the flex box settings from anything other than “row” doesn’t allow them to stack….they simply compress.
Your boxes do seem to be wrapping on narrower screens, so I think you’ve set the flex container to wrap.
Also: it can be helpful to set a minimum width (e.g. 300px) on flex items, so they don’t shrink beyond this value.
If you haven’t already done so, I’d recommend working through the Xway Flexbox Tutorial. Flexbox is a powerful layout method, but there are a lot of options to consider.
Generally, a flex layout should work on different devices, without needing to set different dimensions for mobile devices etc.
If you continue to have problems, send a copy of your document to support at softpress dot com, and I’ll take a look at it.
Hint: you can shrink the size of a document before sending it by choosing Empty Site Folder from the File menu. If it’s a large document (more than 20 MB when compressed into a zip archive), upload it to a file transfer service (e.g. Dropbox or WeTransfer) and send a download link.
Thanks Jeremy…made some progress. Went through the Flex tutorial again.
Found that part of my issue was that my Flex items weren’t set to “center”. They now center when the screen size is reduced.
I would like them to use more of the existing width…but perhaps that has something to do with my widths set @ 45%. If I go wider, they no longer site side by side on the page at wider widths.
It’s a small file…will sent it your way. Update..email with attachment bounced twice. Sent a link to Mediafire account…
I notice that you’ve set the main item to be a flex container. It doesn’t need to be, because it only contains one child, and that is also a flex container.
The main thing you’re missing is that you need to set the flex behaviour of flex items (children of a flex container). You’ve left this at its default setting (Initial), which means that it can shrink, but it won’t ever grow (see page 174 of the current version of the Xway User Guide). If you change this to Auto (select a flex item and choose Auto from the Flex popup in the Flex Item section of the Box Inspector), flex items will be able to grow and shrink.
The second flex item can never be wider than 45% of its parent container, because you’ve set its maximum width to 45%. Delete this value.
One other more general point is that we recommend dividing a master page into three top-level sections: header, main, and footer. The header and footer contain content that is used on all instance pages, while the main section has content that normally differs from page to page. You can subdivide any of these top-level sections (e.g. by adding additional boxes within main, or header, or footer). Having a structured layout like this makes it much easier to change things on a master page later on, and have those changes carried through to instance pages. Headers and footers will normally have Use Master Content selected on instance pages, while main sections will normally have it deselected.
The introductory Xway tutorial follows this approach, and there is a note on page 11: “Dividing a master page into sections (and subsections) is good practice for accessibility reasons, and is also a helpful way of separating content that will be shared by other pages (the header and footer sections) from content that is unique to each page (the main section). Doing this allows you to change page-specific content in one section without breaking the link between master content and instance content in other sections.”
Once again, thanks. I wondered about the two flex boxes.
I have adjusted the “left” item’s Flex to “auto”. It now scales correctly.
I have done the same with the “right” item, the text, too. If I remove the “maximum width” from this item, both items go to 100% wide, stacked, regardless of the screen width.
This right box is just a box with text, FWIW
The reason for a couple “main” sections, in perhaps my faulty thinking….was for a weather widget and Live365 player in each….that would be on every page.
It doesn’t need to be “3”. The simplest thing is to leave it at Auto, but add a preferred width (e.g. 400px) in the Width field in Dimensions. (Auto assumes that you have set a width somewhere, and max widths don’t count for this purpose.) Alternatively, you could just set it to “1” for both boxes. This doesn’t require a width. The only reason to use “3” would be if you wanted proportional sizes like “3:1” (one box is three times the width of the other).
