Archived topic
I want to display the post in 2 columns on mobile and 3 on tablet
5 replies · Started by Chetan on February 19, 2021
I want to display the post in 2 columns on mobile and 3 on tablet
and also tell me how can I differentiate it on Archives and on Single Post cuz when i add any css it also affects the single page
.separate-containers .inside-article {
padding:0px;
}
.post-image-above-header .inside-article .post-image {
margin-bottom:0px;
}
.entry-title {
padding-bottom: 15px;
padding-left:15px;
padding-right:15px;
}
.entry-summary:not(:first-child), footer.entry-meta {
margin-top:0px;
}
h2.entry-title {
font-size:20px;
text-align:center;
}Hi Chetan,
Set it to 4 columns in customzier > layout > blog.
Then add this CSS:
/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
width: 33%;
}
}
/*mobile*/
@media (max-width: 767px) {
.generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100 {
width: 50%;
}
}In order to make CSS only targets archives, add this selector before your other selectors: .archive
I did as you said and it worked but in some of the archive pages the gaps are not proper
Image has the resolution of 720x1280
Like in the below image
And this one is proper
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Site Name
Edited CSS here :)
/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
width: 33%;
}
}
/*mobile*/
@media (max-width: 767px) {
.generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100 {
width: calc(50% - 5px);
padding-left: 10px;
}
}