Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 14, 2016 at 12:26 pm #699071
    Gammelbys15

    Hi

    I have a lot of grid rows on my website and I want to have them all displayed below each other on tablets. They are already displayed below each other on smartphone and tablet portrait, but not on landscape, is that possible?

    Cheers, Ann

    October 16, 2016 at 1:06 pm #699573
    Rikard

    Hey Gammelbys15,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 1024px) {
#top #wrap_all .av-flex-cells {
    width: 100% !important;
}
}

    Thanks,
    Rikard

    October 17, 2016 at 8:21 am #699817
    Gammelbys15

    Hi Rikard

    I tried the CSS, but there is no result, but the grid row content are still displaying like the desktop version and not below each other like on smartphones.

    October 18, 2016 at 8:00 am #700430
    Rikard

    Hi,

    Ok, please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    March 30, 2017 at 10:23 am #769396
    adrianvanwyk

    Hi

    I am having the same problem, on the 2 pages added to private I would like them stock stack on tablet view

    page_id=2464 – is set up using a colour section
    page_id=2792 – is set up using a grid row

    thanks
    adrian

    April 2, 2017 at 6:02 am #770501
    Rikard

    Hi Adrian,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
.page-id-2464 .flex_column_table_cell, .page-id-2792 .flex_column_table_cell {
    display: block !important;
}
}

    Best regards,
    Rikard

    April 4, 2017 at 11:11 am #771654
    adrianvanwyk

    Hi

    thanks both pages still do not stack on tablet view

    April 6, 2017 at 7:22 pm #773420
    Victoria

    Hi adrianvanwyk,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css, you can try it to make your grid look much better in landscape mode on tablets.

    
#top .no_margin.av_one_third {
  padding: 10px 20px !important;
}
.toggle_content {
    padding: 8px 10px 10px 10px;
    margin: 0px 0 5px 0;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Add your Desktop Styles here */

.hr.hr-invisible.avia-builder-el-32, .hr.hr-invisible.avia-builder-el-38 {
  height: 0px !important;
}

#top .no_margin.av_one_third {
  padding: 0 10px !important;
}

.toggle_content {
    padding: 8px 10px 10px 10px;
    margin: 0px 0 5px 0;
}

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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