How do we handle this in Xway? I want to change the style of some things at certain breakpoints. Do I have to code this now?
Billy
Hi Billy,
Xway focuses on creating flexible web pages that display well on any device. This is in contrast to Freeway’s approach of allowing you to create different designs for different breakpoints, but is closer to the approach that most modern websites take. Another way to design flexibly is to make use of CSS flexbox, which allows boxes to be distributed across the page on wide screens but stack vertically on narrower screens. Xway doesn’t support this directly yet (we’re working on it) but you can add flexbox properties using the Extended Properties section of the Box Inspector.
The next version of Xway will have support for menus. These provide a user-defined breakpoint for the point at which menu bars collapse into hamburger menus.
If you want to use breakpoints (as in Freeway) you can do this manually using CSS Markup in the Page Inspector, but it is hard work and liable to error (e.g. if a box ID or style name changes).
I’m using Flexbox and that is working. I just want to center align some text at 768px.
Billy
Here’s one way you could do that. If you have a heading (h1 in this example) that you want to be centred on screens that are narrower than 768 px, you can cause it to be centred by adding the following code in the CSS Markup section of the Page Inspector:
@media screen and (max-width: 767px)
{
h1 { text-align:center }
}
Alternatively, if you want it to be centred on screens that are at least 768px wide:
@media screen and (min-width: 768px)
{
h1 { text-align:center }
}
Will that center the box or the text within it?
Flexbox is already centering the box. I want to center the text.
Billy
Can I do it in the extended att. of the text box? I know I can center align but the media size is the issue.
It will centre the text (text-align), but it presupposes that the text you are centring is a heading (h1). If you want to centre a non-heading, or limit it to headings that are within one particular box, you would need to change the style selector.
The following code will centre any h1 heading that is within a box called item2. As I mentioned previously, this will break if you later rename item2. It is possible that in future we will provide a way to reference boxes within markup that is independent of what they are currently named.
@media screen and (max-width: 767px)
{
#item2 h1 { text-align:center }
}
No. You can add style properties using the Extended Properties section of the Box Inspector (Extended Attributes is for HTML attributes rather than CSS properties), but there isn’t any way in this section (at present) to specify that properties should only be applied at a particular breakpoint.