Grid Rows mobile responsiveness

Hey visualartspassage,

Thank you for the inquiry.

We could use a few css to adjust the width of the cells on mobile view but the items may not align correctly because the image and the content container differ in height. To solve that, you may need also apply a minimum height to the cells.

@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top 
    #wrap_all .av-flex-cells .no_margin {
        width: 50%;
        float: left;
        min-height: 445px;
    }
}

Please note that this css will affect all grid row cells across the site, so applying a unique ID or class name (Grid Row > Advanced > Developer Settings panel) to the grid row elements may be necessary so that you can directly target and adjust the style of that particular section without affecting the others.

// https://kriesi.at/documentation/enfold/add-custom-css/

Best regards,
Ismael

Hi,

Thank you for the update.

This is how the site looks on our end after adding the css code (screenshot below), we adjusted the minimum height to 480px to accommodate tablet views (e.g iPad).

Screenshot: https://imgur.com/RJ21ti2

You may need to adjust the minimum height on smaller screens using another css media query.

@media only screen and (max-width: 480px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top 
    #wrap_all .av-flex-cells .no_margin {
        width: 50%;
        float: left;
        min-height: 300px;
    }
}

This should adjust the minimum height of the cells to 300px when the screen width reaches 480px or below. If you need additional assistance, please post the login details in the private field so that we can test the modification properly.

Best regards,
Ismael

Hi,

Thank you for the info.

Looks like you adjusted the settings of the grid row element. Please make sure to use images with the same size and aspect ratio. The grid will not align correctly if one of the image is taller than the others. The content or text (name, skills) will also influence the height of the cells, so make sure to limit the content.

We adjusted the previous modification and added the following css code.

@media only screen and (max-width: 768px) {
  .responsive #top .container .av-content-small,
  .responsive #top #wrap_all .flex_column,
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 50%;
    float: left;
    min-height: 445px;
  }

.responsive #top #wrap_all .av-layout-grid-container.av-flex-cells.av-grid-order-reverse {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.responsive #top #wrap_all .av-layout-grid-container.av-flex-cells.av-grid-order-individual {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
}

@media only screen and (max-width: 480px) {
  .responsive #top .container .av-content-small,
  .responsive #top #wrap_all .flex_column,
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 50%;
    float: left;
    min-height: 300px;
  }
}

We also found an invalid code in the Quick CSS field and corrected it.

Best regards,
Ismael

Hi,

Thank you for the update.

It is possible to apply a unique class name or ID to the Grid Row element or any elements in the builder, and use those names or selector to specifically target or change the style of the element. The class and ID field can be found in the elements’ Advanced > Developer Settings panel.

Please check the following documentation for more info.

// https://kriesi.at/documentation/enfold/add-custom-css/

Best regards,
Ismael