Changing the mobile breakpoint for content columns - Support

Tagged: breakpoint, breakpoint content, columns, content, mobile

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
December 3, 2024 at 5:12 pm #1472790

bonsaimedia
Participant

Hi,

It’s possible to edit the breakpoint for the mobile menu. But is it also possible to change the breakpoint of the content/ columns? By default, enfold sets the breaking point at 767pixels. But i would like to change that, for example, to 1100 pixels.

I would like to change it at 1 place (in CSS/javascript/functions for example). Not for each column seperately because that’s too much work each time.

December 3, 2024 at 5:53 pm #1472801
Guenni007
Participant
there is the option to break on 989px too

in this case if you choose 989px the columns will have an extra class on flex_column: av-break-at-tablet

the ruleset to handle repsonsive break is on default:
```
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all .av-break-at-tablet .flex_cell, 
  .responsive #top #wrap_all .flex_column.av-break-at-tablet {
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }
}
```
so if you like to change it on one page only and for columns you can use in combination with the page ID
```
@media only screen and (max-width: 1099px) {
  .responsive #top.page-id-49045 #wrap_all .flex_column.av-break-at-tablet {
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }
}
```
if you like to influence only a specific column group – use a custom class for that.
December 3, 2024 at 6:04 pm #1472802

Guenni007
Participant

BUT: in this case the order options are not influenced on that. And do their job on 989px. Additonal css settings are necessary then to obtain the wanted results.

December 3, 2024 at 6:18 pm #1472804
Guenni007
Participant
so what i would do : give the section containing those columns a custom class – f.e.: break-at-1100
choose on first column the break at : 989px ( to have that one class set and to use all benefits of ordering after break )
you can choose reverse order or individual position – put this to your quick css ( now no page ID is needed – all will be done by the custom class)
```
@media only screen and (max-width: 1099px) {
    .responsive #top #wrap_all .avia-section.break-at-1100 .flex_column.av-break-at-tablet {
        margin: 0;
        margin-bottom: 0px;
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }
    .responsive #top #wrap_all .avia-section.break-at-1100 .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .responsive #top #wrap_all .avia-section.break-at-1100 .av-break-at-tablet-flextable.av-mobile-columns-flex.av-columns-reverse, 
    .responsive #top #wrap_all .avia-section.break-at-1100 .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex.av-columns-reverse {
        flex-direction: column-reverse !important;
    }
}
```
see: https://webers-testseite.de/responsive-sizes/
December 4, 2024 at 8:48 am #1472849

Rikard
Keymaster

Hi,

Thanks for helping out @guenni007, did that answer your question @bonsaimedia?

Best regards,
Rikard

December 4, 2024 at 9:08 am #1472854

bonsaimedia
Participant

Hello, yes thank you! We were thinking in this solution ourselves but we were actually hoping that just by adding 1 piece of CSS we could create something that would work for all columns in the entire website, instead of adding separate classes and doing it “one by one”. That takes more time and is less manageable.

Thanks so much for your response and thinking along!

December 4, 2024 at 10:28 am #1472871
Guenni007
Participant
Well you have to remove all custom classes from that snippet above and if you like to influence even those standard column settings as 767px break
try instead:
```
@media only screen and (max-width: 1099px) {
    .responsive #top #wrap_all .flex_column {
        margin: 0;
        margin-bottom: 0px;
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }
    .responsive #top #wrap_all .av-column-wrapper-individual.av-mobile-columns-flex {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .responsive #top #wrap_all .av-mobile-columns-flex.av-columns-reverse, 
    .responsive #top #wrap_all .av-column-wrapper-individual.av-mobile-columns-flex.av-columns-reverse {
        flex-direction: column-reverse !important;
    }
}
```
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.