-
Posts
-
Hello!
I have a page with 3 columns with icon boxes that does not look right on ipad portrait view (768×1024) and on galaxy tab s2 portrait view (1536×2048) and Nexus 7 landscape view (960×600).
From an earlier ticket for another site, I applied the following code in Quick CSS which fixed most other problems on the page related to the 3-column setup:
@media only screen and (max-width: 1025px) {
.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%;
}
}One section is still displaying all 3 columns instead of stacking them– screenshot and link are below. It looks fine on landscape (wide view), it’s only a problem in portrait (narrow) view.
Can you help me fix this?
Thanks in advance for your help!
Hi Julie!
The below CSS should make the 3 column width expand to 100% on iPad
@media only screen and (max-width: 768px) { div.av_one_third { width:100%!important; } }I think the code you have added earlier is conflicting with this one and unable to have any effect. please remove the code you added earlier and try the above to make the 3 cols 100% wide in ipad.
Regards,
Vinay KashyapHi Vinay,
Thanks for the help. Unfortunately, when I remove the other code and add this, the 1/3 icon boxes still do not stack and are not lined up right, and the icon list elements above are not aligned right either.
Screenshot links are below. (I put the code I had before back since this fix made other parts worse.)
Any other ideas?
Thank you so much for your help!
Hey!
Ok please add the original code back…. we would like to take a closer look and fix it for you please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.
Best regards,
Vinay KashyapHi Vinay,
Admin access info is below. All I need is for the row with the icon boxes to stack on those tablet views instead of displaying horizontally– everything else is perfect.
Thank you so much for your help!
Hi!
We are working on your ticket please wait while we update the results here soon.We removed the equal height feature from the 1/3 columns options and added the below code in quick css. With equal height on the columns won’t collapse…
/* 3 Columns collapse */ @media only screen and (max-width: 768px) { .fullwidth-in-tab.av_one_third{ margin: 0; margin-bottom: 20px; width: 100%; }Best regards,
Vinay KashyapHi Vinay,
This is great, thank you so much!
I did not know that about the equal height setting, thanks for letting me know that was the issue– I just found that setting and it is very handy, but I guess it won’t always work.
Thanks again for your help!
Hey!
You are most welcome!
The equal height settings work in responsive mode but they collapse only in devices that are smaller than tablets.
If you are interested we have put together some info about enfold theme please feel free to check it out here – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)
Best regards,
Vinay Kashyapso I tried the solution above but it does not seem to be working for collapsing the 1/3 columns on tablets. Is there a new way to do it in the latest Enfold?
Hi anthonygq,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardSorry it is not up on the internet yet. I am building it on my own local development box but basically I am using 3 of the 1/3 columns and have set it to equal height. However I want it to stack for tablets like it does for mobile phone devices. Currently it just stacks on phone devices as mentioned above.
- You must be logged in to reply to this topic.