Hi there,
It seems like both layouts are already identical. Is there something that I’m missing?
Hi Alvind,
Thank you for the quick reply. They’re nearly identical but not quite. If you scroll all the way down on both pages and compare, you’ll see the differnce.
Hi there,
on the problem page:
1. set the left & right padding of the .archive .site-content to 40px to match the Container Padding on the good page.
2. .archive .custom-category-grid set the Left and Right Padding to 0 and set the grid-template-columns to grid-template-columns: 1fr 1fr;
Hi David,
Thank you very much! This worked like a charm! There’s just on tiny thing with line height, I believe. I can’t figure it out. Every thing is identical except for the author’s name below the featured image. It’s maybe a couple of pixels off its position on the good page. I can’t seem to know why.
Theres line-height differences in both the title and the author name
The custom archive has a H2 Entry tile and the line-height is inherited from the themes typography H2 Archive, which is set to 1.25 returning a line height of 25px ( 20px fonts size * 1.25 )
And the author name uses this CSS to set its line-height to 5px
.archive .custom-category-grid .entry-author {
font-size: 14px;
line-height: 5px;
}
On the other page the Entry Title is a P tag with a 20px font size so it inherits the themes body typography with a 1.5 line-height so its line-height is 30px.
And the author name headline block has a line-heigh set to 0px
Thank you again! Awesome. This a bit embarassing, but I’ve tried my best to make them match (same line height and zero margins/padding) but I can’t make it happen for some reason. What would you advice me to do?
-
This reply was modified 2 years ago by
dukearmi.
ying
(@yingscarlett)
Sorry what is not matching? They look the same to me, other than the headline of author name has 40px margin-bottom while the archive author name has the default p margin which is 21px.
But they are visually identical.
Let me know if I miss anything!
They’re nearly identical but not quite. If you scroll all the way down on both pages and compare, you’ll see that the post title is farther down below the featured image compared to the good page (homepage).
Please have one last look! I think it’s really simple but can’t figure it out on my own.
Leo
(@leohsiang)
Looks like you are already adding this CSS:
.archive .entry-title {
margin-top: 5px;
}
Maybe try 2px instead?
Thank you! It looks pretty decent now. I apprecite your help 🙂
