Archived topic
Display posts in two columns on the mobile interface
3 replies · Started by notphucthinh on April 6, 2020
If I modify directly from within the file all.min.css
@media (max-width:767px){.hide-on-mobile{display:none!important}.mobile-grid-50{float:left;width:50%}.mobile-grid-100{clear:both;width:100%}}
After I changed
@media (max-width:767px){.mobile-grid-100{clear:both;width:50%}}
https://www.dropbox.com/s/998ycrm6lj0argb/01.png?dl=0
But if I override it with additional custom CSS instead of in all.min.css file
https://www.dropbox.com/s/mfyscjk5y0ls457/02.png?dl=0
Please help me. Thanks very much!
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
It's not a good idea to modify all.min.css
Let me know :)
Thank you, but I solved the problem without having to modify all.min.css. Because I understand all modify directly from the all.min.css file will disappear after the parent theme is updated to the new version.
And here's my CSS code if someone needs it, just add the following CSS code to the child theme, Code Snippets or Additional CSS.
@media (max-width: 767px) {
.mobile-grid-100 {
clear: both;
width: 50%
}
.separate-containers .site-main>.generate-columns-container {
margin-bottom: 0;
margin-right: 10px;
}
.generate-columns-container>* {
padding-left: 10px!important;
}
}
@media (max-width: 768px) {
.content-area {
width: 100%;
}
}Sorry for my bad English. Have a nice day.
Glad you've figured out and thanks for sharing :)
