-
Posted in : TheBlogger
-
Hello again.
I’m trying to make the featured images in the 1st Full + List layout smaller. I find them way too big for my taste but anything I do to try to resize them, screws up everything else. The entry-header and the expert is no longer aligned right.
I can’t figure it out. I’d appreciate any help. I’m so close to finishing my site and I want to eager to get posting again. Just these couple things to figure out.
I can’t believe it. But I figured it out. Took me all day but I manage to do what I wanted to do.
Hi, What was the different from our custom css code. How did you manage it ?
ThanksI’m quite an amature when it comes to CSS, so forgive me if I don’t explain it well.
This first code here made the image smaller and a 3:2 crop. I’m not sure if it’s 100 percent perfect 3:2 but its pretty close, good enough for me.
@media screen and (max-width: 991px) {
.blog-list .featured-image {
width: 38%;
padding-top: 26%; }
}I’m not sure if I needed to media query or not, but it seemed like it didn’t work without it.
Now while that made the images smaller and cropped the way I wanted, when I resized, it still went to square. I believe the problem I was having was the media queries, not having have max and min defined.
@media screen and (min-width: 992px) {
.blog-list .featured-image {
width: 38%;
padding-top: 26%;}
}Once I did that, it worked the way I wanted.
Now I wanted the excerpt to show and I did that by using this code:
.blog-list .entry-content {display:block;}
I did other padding and margin adjustments to make it look good but on mobile it didn’t look so good. So I did this and made the featured image full width when the page is reized to 600px using this code:
@media screen and (max-width: 600px) {
.blog-list .featured-image {width:100%; padding-top: 67%;}
.blog-list .hentry-middle {width: 100%; padding: 1em 0em;}
}And this worked quite out really well. This only major compliant I have is the image quality is pretty poor and I’m not too sure why. But it’s not a major deal.
I still have some little kinks here and there work out but it’s pretty much done. I’m just trying to get the post date inline with the categories on the blog list but not on the first full post. However, I don’t think it’s possible without modifying the PHP files and I honestly don’t really want to do that. But for some reason, I still think its possible to do with some custom CSS because the “entry-meta below-title” div class is still there even when I hide the below meta data, but the actual metadata content isn’t there. So I don’t know. I made a post about that that anyways. http://www.pixelwars.org/forums/topic/how-to-move-below-title-meta-data-above-title-except-for-first-post/
Anyways, I’m it’s not 100% correct way of doing things, but it works and I guess that’s all that matters. If you have any suggestions, I’d be glad to hear them.
You must be logged in and have valid license to reply to this topic.