- This topic has 7 replies, 2 voices, and was last updated 1 year, 7 months ago by
Tom.
-
AuthorPosts
-
June 3, 2019 at 1:43 am #918236
Hasan
On archive pages, I am displaying my posts on 4 column in desktop view, which is shown as single column on mobile view automatically, which is perfect!
How can I display the posts in 3 column on the archive pages for the medium screen only?
Thanks!
June 3, 2019 at 9:12 am #918714Tom
Lead DeveloperLead DeveloperHi there,
Give this a shot:
@media (max-width: 1024px) and (min-width: 769px) { .generate-columns-container .grid-sizer, .generate-columns-container article { width: 33.33333%; } }
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 4, 2019 at 6:24 am #919457Hasan
Thanks Tom, but this is not working. Showing the posts on 2 columns instead of 3: http://prntscr.com/nxiedi
June 4, 2019 at 8:50 am #919737Tom
Lead DeveloperLead DeveloperSorry about that – can you try the updated code?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 4, 2019 at 12:15 pm #919948Hasan
Thanks Tom! The updated code worked fine!!
I am modifying the code further to also make the large phones into 2 columns instead of 1, with the following code:
@media (min-width: 415px) and (max-width: 768px) { .generate-columns-container .grid-sizer, .generate-columns-container article { width: 50%; } }
It split it into 2 column alright, but now there is no space between the columns like it normally shows for the other layouts: http://prntscr.com/nxn2ei
Please suggest how to fix that!
June 4, 2019 at 4:05 pm #920092Tom
Lead DeveloperLead DeveloperTry this:
@media (min-width: 415px) and (max-width: 768px) { .generate-columns-container .grid-sizer, .generate-columns-container article { width: 50%; } .generate-columns-activated .generate-columns-container { margin-left: -20px; } .generate-columns-container > * { padding-left: 20px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 4, 2019 at 11:51 pm #920257Hasan
That worked perfectly after adding !important after the two new lines! π
Thank you so much for the awesome support!
June 5, 2019 at 9:03 am #920838Tom
Lead DeveloperLead DeveloperNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.