Responsive Screen Width - Support | Kriesi.at

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

Author

Posts
February 19, 2016 at 10:16 pm #586338
tgolas
Participant
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, 8 months ago by tgolas. Reason: Made dev site page private
February 20, 2016 at 8:33 pm #586523

tgolas
Participant

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
Keymaster
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
Participant

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
Keymaster
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
Participant

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

February 22, 2016 at 9:06 pm #587451

Yigit
Keymaster

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.