Changing fullwidth break point for columsn

Hey laptophobo,

Thank you for the inquiry.

Did you select a page to display as footer, or are you just using the default footer columns? If you are using the default footer columns, you can use this css code to adjust the breakpoint.

@media only screen and (max-width: 500px) {
  .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }
}

@media only screen and (min-width: 501px) {
  .responsive #top #wrap_all #footer .av_one_fourth {
    margin-left: 6%;
    width: 20.5%;
  }
}

Best regards,
Ismael

Hi,

Thanks for the update. Could you post a link to where we can see the actual elements please?

Best regards,
Rikard

Hi,

Thanks for the update.

Please edit the footer page, move all of its content inside a color section, use “footer” as the color section’s custom ID attribute value in the Advanced > Developer Settings panel, then use the same css code above. This should adjust the breakpoint of the columns inside the color section.

Best regards,
Ismael

Hi,

) now collapse into 1 column and are reduced to 20% in width.

You may need to change this css code a bit to adjust the width of the columns and make sure that it doesn’t collapse into a single column.

@media only screen and (min-width: 501px) {
  .responsive #top #wrap_all #footer .av_one_fourth {
    margin-left: 6%;
    width: 20.5%;
    float: left;
  }
}

Replace it with:

@media only screen and (min-width: 501px) {
  .responsive #top #wrap_all #footer .av_one_fourth {
    margin-left: 6%;
    width: 20.5%;
    float: left;
    clear: none;
  }
}

We just added the float and clear css properties.

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard