Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 19, 2016 at 10:16 pm #586338
    tgolas

    Hello – I’m pretty sure you’ve addressed this somewhere, but my searches haven’t turned up an answer.

    I’d like to change the screen width at which the mobile view kicks in. When I drag-resize the page, the two columns stack at about 750px wide. I’d like them to stack at 800 instead, so that they display better on an ipad mini.

    Thanks for your help.

    • This topic was modified 8 years, 9 months ago by tgolas. Reason: Made dev site page private
    February 20, 2016 at 8:33 pm #586523
    tgolas

    Follow up: I did find a way to do this, but think it may not be the most elegant solution. If there is a simpler/better way, please let me know.

    I added this to custom css and it worked.

    /* #Mobile (Portrait)
    ================================================== */

    @media only screen and (max-width: 800px) {

    .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ }
    .responsive #top { overflow-x: hidden; }
    .responsive .boxed#top, .responsive #top.boxed .stretch_full ,
    .responsive.html_boxed.html_header_sticky #header,
    .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; }
    .responsive #top .flex_column_table_cell{display: block;}
    .responsive #top .flex_column_table{display:block;}

    .responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left:0;
    padding-right:0;
    float:none;
    }
    .responsive .units, .responsive .unit {
    margin: 0;
    }

    .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: 100%;
    }

    .responsive #top #wrap_all .av-flex-cells .no_margin{
    display: block;
    margin: 0;
    height:auto !important;
    overflow: hidden;
    padding-left:8% !important;
    padding-right:8% !important;
    }

    .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    }

    .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{
    padding-left:0% !important;
    padding-right:0% !important;
    }

    .responsive #top #wrap_all .flex_column:empty{margin:0;}
    }

    February 22, 2016 at 3:50 pm #587216
    Yigit

    Hi!

    Please try using following code instead

    @media only screen and (max-width: 800px) {
.flex_column { width: 100% !important; margin-left: 0 !important; }}

    Best regards,
    Yigit

    February 22, 2016 at 7:47 pm #587418
    tgolas

    Thanks for your help, Yigit. This code didn’t do the trick – the 2 columns displayed side-by-side on mobile. I’ve reverted to the long solution for now.

    February 22, 2016 at 8:01 pm #587427
    Yigit

    Hey!

    It will work if you use the code as following :)

    @media only screen and (max-width: 800px) {
.flex_column { width: 100% !important; margin-left: 0 !important; }
.flex_cell {
    width: 100%!important;
    margin-left: 0!important;
    display: block;
}}

    Regards,
    Yigit

    February 22, 2016 at 8:07 pm #587431
    tgolas

    Perfect! Thank you! (And thanks for the CSS lesson.)

    February 22, 2016 at 9:06 pm #587451
    Yigit

    Hi!

    You are welcome!
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Responsive Screen Width’ is closed to new replies.