Archived topic
Blog mobile view
3 replies · Started by vast on November 16, 2020
The Customizer is currently configured to display posts as columns. The number of columns set is 4 at the moment.
The CSS below is to display the blog posts with a white background. This shows the intended layout on a PC for example.
.generate-columns-container,.site-content{padding-top:40px;padding-right:0;padding-bottom:100px;padding-left:20px;justify-content: center;}.generate-columns-container>article{text-align:center;color:#2c3e50;padding:10px;margin:20px;border-radius:20px;background-color:#ffffff;}.one-container.archive .post:not(:last-child), .one-container.blog .post:not(:last-child),.entry-meta{padding-bottom:10px !important}
When viewing the blog posts on a device other than a tablet or mobile, the view is distorted and the stylesheet does not take effect.
The suggestions and the CSS selectors used in previous posts https://generatepress.com/forums/topic/display-2-column-on-mobile-2/ and https://generatepress.com/forums/topic/2-columns-format-as-at-768/ don't seem to apply.
Is there a specific CSS selector for mobile and tablets?
Hi there,
There are no mobile / tablet specific CSS Selectors. Unless your CSS is wrapped in a Media Query they should apply across all devices unless there is some other CSS overriding that.
Can you share a link to your site where i can see the issue?
Thanks David. It's not wrapped in a media query.
Your hint at media queries did however narrow it to a minification issue. It seems that a preceding media query did not include a closing }. The solution was to include the the additional curly parenthesis.
Interestingly, it seems that some minification services strip the additional parentheses. It's something to keep an eye out if anyone else runs into a similar issue.
Glad to hear you found the issue!
