Responsiveness: Screen size less than 320px and Galaxy fold.

[the-shivam-gupta]

Ionic version:

[x] 4.x [ ] 5.x

Current behavior:

https://github.com/ionic-team/ionic-framework/assets/109647722/4f3ce322-ffbe-46ab-b054-ea7240b36a5c

Expected behavior:

• The text and the toggle button must be visible for screen sizes less than 320px and Galaxy fold.

Steps to reproduce:

• Changing the display grid to flex and set flex-wrap for automatic content fitting across all screen sizes.
• Adding a gap between the buttons and aligning it at the bottom.

Related code:

display: flex;
justify-content: center;
flex-wrap: wrap;
row-gap: 30px;

Expected Output

https://github.com/ionic-team/ionic-framework/assets/109647722/278c817e-735e-4334-82c5-af05576249da

insert the output from ionic info here

[Shauryaditya]

Would like to contribute to this

[liamdebeasi]

Thanks for the issue. Bugs for the Ionic Framework website should be reported on https://github.com/ionic-team/ionic-site, so I am going to transfer this. I've alerted the team that manages the website.

[jaredcbaum]

Thank you for the detailed issue with videos and description!

@Shauryaditya This repo handles some legacy features of the ionic framework site, but the bulk of the code is in an internal repo. I do appreciate the offer to implement fix, but a team member of Ionic will have to submit a PR.

[jaredcbaum]

A fix has been deployed and will be live shortly.