Column to Mobile 1024 Laptop Screen

Hey annameis,

Thank you for the inquiry.

Make sure that the Row Settings > Row Screen Options > Fullwidth Break Point settings is set to the second option (Tablet), then add this css code to adjust the breakpoint to 1024px.

@media only screen and (max-width: 1024px) {
  .responsive #top #wrap_all .flex_column.av-break-at-tablet,
  .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

Please replace the css rule inside the css media query with the following.

.responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
    height: auto;
    overflow: hidden;
}

We just set the height to auto and overflow property to hidden.

Best regards,
Ismael

Hi,

Thank you for the update.

You have to move the css rule inside the css media query.

@media only screen and (max-width: 1024px) {
  /* move the css code here */
}

Please remove the previous the css modifications, then replace it with the following code:

@media only screen and (max-width: 1024px) {
   .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
       margin: 0;
       margin-bottom: 20px;
       width: 100%;
       display: block;
       height: auto;
       overflow: hidden;
   }
}

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike