-
Posts
-
Hey Folks, I tried 4 or 5 different CSS tips provided in similar issues within this forum without a resolution.
I have the following page (private) with 3 columns of content below the video tab section that need to stack on iPad landscape and portrait, actually.
I’d be grateful for a fix, thank you very much!
Hi,
Thanks for providing that info. Please at this to quick css:@media only screen and (max-width: 768px) and (min-width: 1024px) { .avia-builder-el-19 .av_one_third{ width:86%!important; }}Best regards,
Jordan ShannonHey Jordan.
Thank you for your advice, however, that changed nothing.
What made you think that would work?
Hey Jordan.
I had it at the bottom of the child style.css file, but after your note, I added it to the top.
No difference buddy.
Hi,
If possible, please provide admin info so I can login and look into this issue further. It’s concerning that none of the css is working for you. Have you made sure to clear your cache a few times over?
Best regards,
Jordan ShannonHey Jordan.
Admin access was provided in my original post above.
I have deleted cache and disabled WP Fastest Cache as well.
Thanks again for your help, I appreciate it.
I have deactivated Autoptimize per your recommendation, Victoria. Looking forward to finding a fix here, thank you.
Hi,
Okay, I modified the code a bit, can you please try the following:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { avia-builder-el-19.av_one_third, .avia-builder-el-24.av_one_third, .avia-builder-el-29.av_one_third{ width:86%!important; } }Best regards,
Jordan ShannonHey Jordan, thanks for the help.
I added the above code and notice in Landscape on iPad, only the 2nd and 3rd boxes are stacked, leaving the first box standing alone.
And in Portrait, all 3 are still side-by-side instead of stacked.
We’re almost there! What edits should I perform to get it working for all boxes on both Landscape and Portrait?
Hi marketingagency,
There is a dot missing in front of the first selector in the code above and adjusted it a bit more, please remove that code and try this one:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { #top div .flex_column.avia-builder-el-19.av_one_third, #top div .flex_column.avia-builder-el-24.av_one_third, #top div .flex_column.avia-builder-el-29.av_one_third { width:90%; margin-left: 4%; } }If you need further assistance please let us know.
Best regards,
VictoriaThanks, Victoria, but no go.
I’ve added your code and they don’t stack, on landscape or portrait.
Not sure what to do as I cannot publish this page until I can find a fix.
Thank you, Jordan.
I have added your original code below, at the top of the child theme css file.
@media only screen and (max-width: 768px) and (min-width: 1024px) { .avia-builder-el-19 .av_one_third{ width:86%!important; }}You have full access should you need to tweak anything.
I appreciate your time with this.
Hi,
Thank you for the update.
There are some invalid css modifications in the style.css file. We edited those and added a few more. Please remove browser or do a hard refresh prior to testing the page.
Best regards,
IsmaelHey, Ismael, thank you for your help. Looks like it fixed the issue.
However, now the topmenu has been made too wide and overlaps the logo on desktop.
Also, every single contact form on the right sidebar has now been pushed to the bottom of every page.
Please let me know what changes you made so I can get these fixed asap.
Thank you!
Hi marketingagency,
I tested on different screen sizes and wan not able to see the issue. Can you please tell us when it is happening?
Best regards,
VictoriaHey Victoria.
I made the fix myself.
I am still having issues on another part of the page, however, but I made a separate thread for that.
Thank you.
- The topic ‘3 Columns not stacking in iPad Landscape’ is closed to new replies.