Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 11, 2018 at 2:25 pm #1020318
    Levante Golf

    Hi,

    I currently have 2 columns (see page link below – at the top of this page) which I´ve set to break on tablets at a screen width of 989px or lower as this is the largest number available in column screen options.

    I need to make this break point at a custom value larger than 989px. Could you provide me with the css code which would do this only for these 2 columns please?

    Many thanks in advance

    October 12, 2018 at 10:35 am #1020668
    Levante Golf

    Hi guys,

    I´ve found this code which has worked but I need to know how to apply it just to the columns with a specific css class or just to a specific colour section and not to every column on the site:

    @media only screen and (max-width: 1400px){
    .responsive #top #wrap_all .av-break-at-tablet-flextable, .responsive .av-layout-grid-container.av-break-at-tablet {
    display: block;
    }

    .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;
    }
    }

    Many thanks and best regards

    October 13, 2018 at 3:43 am #1020926
    Levante Golf

    Hi,

    Does anyone have any info on this please?

    Many thanks

    October 14, 2018 at 12:19 pm #1021190
    Vinay

    Hi,

    Sorry for the late reply, Turn on custom CSS class name support for ALB elements

    Advanced layout builder

    Add a custom class name “custom-break-point” to the 2 columns and use the below CSS snippet.

    Feel free to change the break point by changing the value of the max-width in the below code to suit your design.

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

    Best regards,
    Vinay

    October 15, 2018 at 6:47 pm #1021710
    Levante Golf
    This reply has been marked as private.
    October 16, 2018 at 6:09 pm #1022299
    Victoria

    Hi ProTravelGolf,

    Adjust the code like this

    

@media only screen and (max-width: 1200px) {
.responsive #top #wrap_all .flex_column.custom-break-point, 
.responsive #top #wrap_all .custom-break-point .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
}
#top .flex_column_table {
     display: block; 
     table-layout: none; 
}
}

    Best regards,
    Victoria

    October 17, 2018 at 8:52 am #1022632
    Levante Golf

    Victoria,

    Thanks that worked a treat!

    Best regards

    October 17, 2018 at 12:34 pm #1022728
    Levante Golf

    Victoria,

    Sorry I have now found that this part of the code:

    #top .flex_column_table {
    display: block;
    table-layout: none;

    is causing problems on another page that I have so it would appear that this part of the code isn´t only being applied to the columns with css class “custom-break-point”. Is there a way of only applying this part of the code to columns with this css class?

    Many thanks again for your great support

    October 18, 2018 at 9:20 am #1023211
    Nikko

    Hi ProTravelGolf,

    Try putting those columns inside a Color Section then just add a Custom Css Class to the section.
    Hope this helps.

    Best regards,
    Nikko

    October 18, 2018 at 9:30 am #1023221
    Levante Golf

    Nikko,

    They are already inside a colour section. How would I adjust Victoria’s code to apply it only to these columns and colour section?

    Many thanks

    October 18, 2018 at 3:03 pm #1023377
    Nikko

    Hi ProTravelGolf,

    I have checked it and it doesn’t have a Custom Css Class assigned to it yet, though it has an ID, but I would suggest using Custom Css Class so you can use it multiple times on the same page.
    Then you can change it to this code:

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

  #top .my_section_class .flex_column_table {
     display: block; 
     table-layout: none; 
  }
}

    just replace my_section_class to the class name you assigned.

    Best regards,
    Nikko

    October 18, 2018 at 6:47 pm #1023564
    Levante Golf

    Nikko,

    That´s brilliant and exactly what I needed. All working perfectly now!!

    Thanks so much again for your awesome work!!

    October 18, 2018 at 8:48 pm #1023636
    Nikko

    Hi ProTravelGolf,

    Glad that we could help :)
    Feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Column fullwidth break point larger than 989px’ is closed to new replies.