Screen resolution UI

Hello all, In localhost and sandbox, application is looks like perfect in my laptop but some elements are overlapping with each other in others laptop due to different screen sizes and resolution also, while zooming in and out elements are overlapping with each other. I have made this application responsive by using layout grid. Is there any way to fixed it out? In my laptop it looks like, l In others laptop,      
1 answers

It looks like your cards have a fixed width, a layout grid shrinks its content to the minimum possible size. When giving a fixed width to elements, this minimum size increases, so it won’t look good on smaller screens.

You could use a flex layout to determine how many cards can fit in a row. This way, the screen size doesn’t matter because the cards will always fill the container based on the screen width.


You can achieve this by following these steps:

  1. Use a list view to display the cards.
  2. Use List Style ‘No Styling’ to remove all default styling of the list view
  3. Add a custom class to the listview, e.g. ‘card-grid’
  4. Add the following SCSS to your custom styling:
    .card-grid {
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 100%;
          max-width: 250px;
          padding: 8px;

    The max-width and padding of the ‘li’ can be anything you want, based on your preferences of the width of the card and space between the cards.


Hope this helps!