Goran Grid display

booncroft · Member · Feb 7, 2017 at 5:36 am
Copy link

Add topic to favorites
Okay regarding the below page…

https://proofingcom.wordpress.com/team/

CSS Questions

1. Grid View: With current CSS…Featured images are overlayed on top of some of the text. How can we fix?

2. Is there a way to push content around so that the images, buttons and text all lines up up and looks clean? So far most of it does, but there are a few still that need work.

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 7, 2017 at 5:31 pm
Copy link
Hi @booncroft!

1. Grid View: With current CSS…Featured images are overlayed on top of some of the text. How can we fix?

It looks like you’re using some CSS to move the images from above the text to below it, and the image/button needs to be a bit lower on some screen sizes.

You could try replacing the style you have for the read more link now with these:
```
@media screen and (min-width: 1020px) {
    .page-id-266 .more-link {
        margin-top: 250px;
    }
}

@media screen and (min-width: 1230px) {
    .page-id-266 .more-link {
        margin-top: 325px;
    }
}
```
2. Is there a way to push content around so that the images, buttons and text all lines up up and looks clean? So far most of it does, but there are a few still that need work.

min-height might be helpful here. If you set a minimum height for your titles (the ones you’ve added with CSS) and for the first paragraph of the summary, things should line up a little better. Give this a try:
```
@media screen and (min-width: 1020px) {
    .page-id-266 .entry-summary p:first-child {
        min-height: 200px;
    }
    .page-id-266 article:before {
        min-height: 80px;
        display: block;
    }
}
.page-id-266 article:before {
    display: block;
}
```
That should line up everyone except for Hans, because he doesn’t have the same kind of title the others do :)
booncroft · Member · Feb 11, 2017 at 7:56 pm
Copy link
oh boy sorry I’m not good at reading CSS and I think i overwrote the CSS you provided onto of CSS that pushed the images below the text, now it’s above. Can you help me fix please?
booncroft · Member · Feb 11, 2017 at 8:23 pm
Copy link
After a 2nd look i think it the pics are fine and now below the text but still it’s hitting the paragraph. I may be still butchering or not applying the CSS correctly. I apologize I’m not the best at this.

Can you advise further?
booncroft · Member · Feb 11, 2017 at 9:10 pm
Copy link
HA! NEVERMIND, LOOKS GOOD TO ME NOW. Does it on your end?
booncroft · Member · Feb 12, 2017 at 7:56 pm
Copy link
The only thing left now is that Hans could be lined up a little better with Darin, if you see what I’m saying? Can you help here?
staff-loquaciousloon · Staff · Feb 13, 2017 at 3:13 pm
Copy link
Ah, looks like you had a tiny bit more to write about Darin than the others, so his bio goes beyond our minimum height a little.

Try finding this style from earlier:
```
.page-id-266 .entry-summary p:first-child {
        min-height: 200px;
    }
```
and increase the 200 to 216

That’ll increase the spacing on the others as well, but it should still look good :)
booncroft · Member · Feb 18, 2017 at 6:58 pm
Copy link
cool looks good now thanks!
staff-loquaciousloon · Staff · Feb 20, 2017 at 1:19 pm
Copy link
You’re welcome! :)

No items found.