Format my web app to become Mobile Friendly

Anvil Q&A
1

Dear team,
What I’m trying to do:
I am building a web app for people to advertise their cars for sale. . It looks pretty on my laptop and tablet, but the view is not friendly on smaller mobile phones, especially the

What I’ve tried and what’s not working:
So far, i’ve come up with the app as shown in the clone. It includes a column-panel that houses the search box, and a repeating panel to display the cars with the following CSS:

Code Sample:

.anvil-role-2-cols > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3%; /*adjust as needed*/
}
@media screen and (min-width: 768px) { 
  .anvil-role-2-cols > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3%; /*adjust as needed*/
    overflow-x:auto;
}

Clone link:
(Anvil | Login)

Any suggestions on how to properly format my code so as to make it mobile friendly will be highly appreciated. Thank you for your time.
Julius

1 Like
2

Forms, DataGrids, Links, and Column Panels have a wrap_on property, which defaults to 'mobile'. Other settings may be more appropriate in your case.

If you’re lucky, that’s all you may need to adjust.

3

Thank you for your prompt reply. How do I deal with formatting repeating panel for
mobile?

4

Forum and doc Search may really help you here. A search for “wrap_on” turned up this, among others:

1 Like
5

I’ve just done one these and it’s really pretty on mobile now. I used wrap from tablet down and it’s really effective and has done well on user feedback.

6

I think i have the repeating panel working. My current challenge is how do I make the search box on mobile appear as it does on tablet or pc? The current view is a row for each component(textbox,label)

7

Thank you for your reply. Could you kindly elaborate further?

8

If I get chance, I’ll take a look at your clone this morning. :innocent:

9

Okay, had a look. On your outlined card and col panel where the search is, flick wrap to tablet, then take your fixed widths out of the form code and it’s lovely.

1 Like
10

Thank you so much for your replies. It’s looking much better now.

1 Like
11

Happy days! So glad to have helped.

1 Like