- This topic has 10 replies, 3 voices, and was last updated 7 months, 2 weeks ago by
David.
-
AuthorPosts
-
June 11, 2020 at 1:28 pm #1324203
Arved
Hi, I have an issue with the columns on the ipad in landscape orientation. The three column layout creates troubles for the events manager calendar widget.
How can I force 1 column design even up to 1025px screen?
Thank you!
ArvedJune 11, 2020 at 4:04 pm #1324320Leo
StaffCustomer SupportHi there,
Can you try this CSS?
@media (min-width: 1025px) { .site-content { display: flex; flex-direction: column; } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 11, 2020 at 4:34 pm #1324350Arved
Hi Leo, thanks for your quick reply!!
I switched the min to max (so on laptop I get the three column design, just on ipad the column), and it did half of the trick. So it displays vertical now but doesn’t use the full width of the screen on the ipad and therefore still messes up the calendar, now in column view.
Tried to add width: 100% !important; but no change.
Would you have any other idea?
Thanks,
ArvedJune 11, 2020 at 4:52 pm #1324363Arved
Basically I am trying to tell the website to behave like on a mobile phone until 1025px.
June 11, 2020 at 4:55 pm #1324364Leo
StaffCustomer SupportIs my code still added?
Can you added in so I can see the issue and make some tweaks?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 11, 2020 at 4:59 pm #1324366Arved
added again, sorry. swapped min for max. if you need min for testing, let me know.
June 11, 2020 at 11:51 pm #1324575Arved
Hi Leo,
I had to remove your css again in the morning so we can work on the website properly. Did you have a look?
Thanks,
ArvedJune 12, 2020 at 2:47 am #1324743Arved
To make it more clear: I am trying to change the mobile breakpoint to 1025 or even higher.
June 12, 2020 at 7:22 am #1325001David
StaffCustomer SupportHi there,
how about this responsive method.
This will set the sidebars to a min width of 300px, and the main content to 600px.
If there is room to accommodate sidebars in a row it will do so – if not they will wrap to a new full width row:@media(min-width: 769px) { .site-content { display: flex; flex-wrap: wrap; } /* Set minimum width of all columsn to 300px */ .site-content .sidebar, .site-content .content-area{ flex: 1 0 300px; margin: 10px !important; } /* Set main content min width to 600px */ .site-content .content-area { flex-basis: 600px; } .inside-left-sidebar, .inside-right-sidebar { margin-left: 0 !important; margin-right: 0 !important; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 12, 2020 at 8:13 am #1325217Arved
Hey David,
that’s a beautiful solution, much better than what I had thought of. Thank you!
Wish you a nice weekend.
Best,
ArvedJune 13, 2020 at 3:31 am #1326065David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.