Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 31, 2018 at 1:05 pm #1004079
    Birdster

    Is there any way to remove the inbuilt setting for columns becoming full width on smaller screens? I have found other threads asking the same question, but none of the solutions seem to work for me. I was hoping the code below would solve it, but it may not because all my columns are nested in coloursections?

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
display: block;
margin: 0;
height: auto !important;
overflow: hidden;
padding-left: 1% !important;
padding-right: 1% !important;
width: 50%;
float: left;
}}

    ps: i am currently testing this by simply resizing the google chrome window on my desktop – is that a valid way to test the code?

    Ideally I would want to add an extra dropdown option when selecting the mobile breaking point in the avia layout, edit column, screen options tab; as currently the only options are 767px or 989px.

    September 1, 2018 at 1:00 pm #1004337
    Vinay

    Hey Birdster,

    It’s not clear what you are trying to do but is this what you are trying to achieve?

    Columns

    Yes, you can test the responsive sites in google chrome by resizing it. Please note that some elements or styles may look a little different in other browsers but the difference really depends on the code.

    Best regards,
    Vinay

    September 2, 2018 at 1:42 pm #1004631
    Birdster

    Not really, instead of 4 desktop columns becoming 2 mobile columns, i want 2 desktop columns to remain as 2 columns on mobiles.
    i have tried adapting the code in the enfold docs to work for my layout, and although the first 2/5 column did remain as 40% width, the second 3/5 column did not.

    That is why i was wandering if it possible to remove the column mobile breaking point altogether?

    September 2, 2018 at 5:34 pm #1004675
    Mike

    Hi,
    Is this going to be for the homepage only?
    I recommend adding a custom class or ID to each column element to have better control, but here is an example of overriding the column brake points for your page now:

    
@media only screen and (max-width: 768px) { 
#top.home .flex_column.no_margin.av_two_fifth {
    width: 40% !important; 
    float: left !important; 
}
#top.home .flex_column.no_margin.av_three_fifth {
    width: 60% !important; 
    float: right !important;
}
#top.home .flex_column.no_margin.av_two_fifth.avia-builder-el-11 {
    width: 40% !important; 
    float: left !important; 
}
#top.home .flex_column.no_margin.av_two_fifth.avia-builder-el-14 {
    width: 40% !important; 
    float: right !important;
}
}

    note that for your two 2/5 middle columns I used the element classes, but these change every time you update the page, so while it works as an example, you really should add custom classes.
    Also you will want to add some padding, but this should be a good starting point for you.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.