Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 16, 2015 at 10:31 pm #554038
    avwebmaster

    Hi,
    I am currently staging out our website and noticed that the div class “flex_column av_one_fifth” becomes a one column layout on 750px and below which is too wide I believe. Is there a way to make 3 one fifth, then 2 then 1 on very small screens just like how Bootstrap behaves?
    Attached are screenshots from our staging. Please advise. Thank you. Screenshots

    December 17, 2015 at 8:07 am #554248
    Rikard

    Hi avwebmaster,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    December 17, 2015 at 3:57 pm #554447
    avwebmaster

    Hi Rikard,
    I will replicate the issue on our prod site but might take a bit. I am busy setting up the staging. I will advise as soon as I can. Thank you.

    December 17, 2015 at 4:56 pm #554497
    avwebmaster

    https://www.audienceview.com/grid-row-1-col/

    Hi,
    I’ve recreated the issue on our prod site. Please advise how can we achieve something like Bootstrap were we can set the number of columns on tablets and mobiles. Reason I brought this up is because we do not want the users scroll too much when they view the columns on tablets and mobiles.

    December 19, 2015 at 4:23 am #555338
    Ismael

    Hi!

    Please add this in the Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 33%;
    float: left;
    margin: 0;
}
}

@media only screen and (max-width: 767px) {
.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: 49%;
    float: left;
    clear: none;
}
}

    Adjust the values as needed.

    Cheers!
    Ismael

    December 21, 2015 at 5:33 pm #556058
    avwebmaster

    Thank you very much!

    December 22, 2015 at 7:15 am #556356
    Rikard

    Hi,

    Glad we could help :-)

    Regards,
    Rikard

    January 5, 2016 at 4:44 pm #560009
    avwebmaster

    Hi Rikard,
    What if I only want the media query to be applied to a specific page?
    I tried:
    .page-id-xxxxx .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin
    but it also affects the rest of the pages.

    Please advise and thank you.

    January 6, 2016 at 7:28 am #560341
    Rikard

    Hi,

    Try something like this instead: 

    .page-id .container .av-content-small {
/*code*/
}

    Best regards,
    Rikard

    September 13, 2018 at 12:33 pm #1009356
    Birdster

    Just wandering if AVwebmaster ever got the code to only be applied to a specific page?

    Just that Rikard’s last post didn’t work for me, and i can’t find the correct way to make this code specific to a page or a colour section container.

    Any help would be greatly appreciated.

    September 13, 2018 at 5:33 pm #1009539
    Victoria

    Hi Birdster,

    It has to be

    
 .responsive #top.page-id-xxxxx .container .av-content-small {
    /* your code*/
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    September 14, 2018 at 11:04 am #1009861
    Birdster

    Working perfectly, Thanks Victoria.

    September 15, 2018 at 8:19 pm #1010241
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Need help: Enfold columns – making them responsive (flex_column av_one_fifth)’ is closed to new replies.