Responsiveness issue on small window width

Xway
1

Hi,

It’s time for the next dummy question of the day.

I have defined a web page in three parts (header, main, footer) Flexbox. In the header and footer, I have only text. When I reduce the width of the browser window, the text in these two parts is reduced and increases the number of lines to appear in its respective box (all is fine and ok :+1:).
My main part is flexbox, composed of three parts: a paragraph, a flexbox with 12 items each containing a paragraph (like a business card, 1st line in bold, the paragraph after normal) and below a flexbox containing two paragraph items. Here when I reduce the width of the browser window, the items reorganize but below a certain width (probably around 350-400px, I don’t have a pixel ruler :grin:) the text no longer reduces and goes out of the field of vision on the right.
I’ve tried a bit of everything and there I have to admit that I’m struggling. Any idea to get back on track?

Here’s a snapshot of my innate talent for drawing and conceptual graphic representation:

1
11920×2560 155 KB

2

Do any of the boxes in the main section have minimum widths that prevent them from shrinking beyond 350-400px?

Alternatively, do you have a flex container that is set to not wrap?

3

Unfortunately nope for both. I’ll start from scratch following tuto again tomorrow, I obviously missed something, but what? That is the question :face_with_monocle:

4

If you publish your page and share a link, that might give us some clues.

5

Hi Jeremy,

Thanks for the proposal but I test with Mampro locally. I wait the final release to test online (on my site test).

Using percentages for sizing (max-width 100%) helped me out of trouble with the boxes :+1: All is fine now with the display on mobile devices.

While testing flexboxes, I think I might have found a bug with navigation menu. I installed a navigation menu that turns into a hamburger below 600px. I have two pages: home (Accueil in French) and contact. When I preview in Safari by reducing the window width, the hamburger menu appears correctly (I’ve left it on the left), and the name of the current page (centered) is displayed. However, when I switch pages, it always shows “Accueil” as current page name and never “contact”. I deleted this menu and rebuilt it, samething occurs.

6

If you send me your Xway document (message me a file-sharing link), and some steps to recreate the problem, I could take a look at it.

Ditto for the flexbox problems.

1 Like
7

Hi Jeremy, link sent. Thank you very much for your support.
The steps for the nav bar menu issue are simple : install it in header below brand (like in tuto), add one page, make the links in nav bar and shrink… The problem appears in the file linked (don’t know if it’s syntactically correct).

8

Hi Bruno,

Sorry it’s taken me a while to look at this.

The reason Xway shows Accueil in the hamburger menu bar for any page is because it’s a link to the home page rather than the title of the current page. This is controlled by the Keep Home in Menu Bar checkbox. Apple do something similar on their website: there’s always an apple icon which links to the home page. If you don’t want this to happen, you can deselect Keep Home in Menu Bar.

If you’d like the current page to be highlighted in the menu (whether it’s a hamburger menu or full menu), as happens with the Softpress website, there are ways to do this in b8, but I would avoid using them for now because we’ve made it easier in 1.0.

I didn’t notice any problems with small window widths.

1 Like
9

Hello Jeremy,
Thanks for your explanations. No worries about the delay, these are just tests. I fixed the flexbox issue by using percentages instead of fixed values ​​for the width.I follow your advice and I look forward to Xway 1.0, this year’s trick or treat looks formidable. One more press of the button for pedestrians :+1:

1 Like