Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1020318

    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

    #1020668

    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 . (Purchase code hidden if logged out) , .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

    #1020926

    Hi,

    Does anyone have any info on this please?

    Many thanks

    #1021190

    Hi,

    Sorry for the late reply, Turn on custom CSS class name support for ALB elements
    https://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) /# (Purchase code hidden if logged out)(Purchase code hidden if logged out)

    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

    #1021710
    This reply has been marked as private.
    #1022299

    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

    #1022632

    Victoria,

    Thanks that worked a treat!

    Best regards

    #1022728

    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

    #1023211

    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

    #1023221

    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

    #1023377

    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

    #1023564

    Nikko,

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

    Thanks so much again for your awesome work!!

    #1023636

    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

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

The topic ‘Column fullwidth break point larger than 989px’ is closed to new replies.