Goran Grid Display

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

Add topic to favorites
https://proofingcom.wordpress.com/team/

With current CSS applied to this page…

1. Once clicking ‘Read More’, is there a way that the featured image then is a different image? I’m considering the featured image to be the same for all the ‘Meet the Team’ pages. Specifically the featured image that pops up on the home page.

2. Hans Bancroft Page – Title isn’t showing up? Also For each title in the grid view, is there a way to display the title differently? In other words, create another line for the individuals occupation at the company? See exampled line items for proposed titles for grid view
1. Darin Bancroft
2. Director of Environment Impact &
3. Health & Safety

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 7, 2017 at 6:54 pm
Copy link
Once clicking ‘Read More’, is there a way that the featured image then is a different image? I’m considering the featured image to be the same for all the ‘Meet the Team’ pages. Specifically the featured image that pops up on the home page.

You could use a bit of CSS that targets all the children of your Meet The Team page, if you want them all to be the same:
```
.parent-pageid-266 .hero {
    background-image: url(https://proofingcom.files.wordpress.com/2017/01/cropped-pb-roofing-header.jpg)
}
```
It does look like you have some CSS in place that is setting the height on those headers to be really tall, which you may want to adjust.

Hans Bancroft Page – Title isn’t showing up?

I actually noticed poor Hans was lacking a title when I was answering one of your other threads. When I look at your CSS, I don’t see a style for Hans. Everyone else there, and has a title, but I don’t see one for your head of security ;)

create another line for the individuals occupation at the company? See exampled line items for proposed titles for grid view

This is doable, yes :)

You’re setting those titles as the content of the before psuedoelements for those posts, like this:
```
.page-id-266 article#post-238::before {
	content: "Darin Bancroft - Director of Environmental Impact, Health & Safety";
	Font-size: 20px;
	font-weight: bold;
}
```
Try replacing that with this:
```
.page-id-266 article#post-238:before {
	content: "Darin BancroftA Director of EnvironmentalA Impact, Health & Safety";
	Font-size: 20px;
	font-weight: bold;
	white-space: pre-wrap;
}
```
white-space: pre-wrap; will let you set line breaks with the A items I’ve added in there. Just make sure there is a space after the line break or you’ll find yourself missing a letter :)
booncroft · Member · Feb 11, 2017 at 9:12 pm
Copy link
Love all these changes they work great!

So one more thing, after applying the below code…

.parent-pageid-266 .hero {
background-image: url(https://proofingcom.files.wordpress.com/2017/01/cropped-pb-roofing-header.jpg)
}

It looks at it like a featured image which is 1230×1230, is there a way to make all pages views as the default header dimensions which is 1230×576 I believe?
staff-loquaciousloon · Staff · Feb 13, 2017 at 3:06 pm
Copy link
Yep!

Scan through your custom CSS for this style:
```
.with-featured-image {
    height: 1500px;
}
```
If you remove that, you’ll stop seeing the super tall header area :)

If you needed that to remain in place for some other part of the site, let me know the specifics so we can try narrowing the style’s scope instead of deleting it entirely :)
booncroft · Member · Feb 18, 2017 at 6:40 pm
Copy link
great thanks! i think that fixed things
booncroft · Member · Feb 18, 2017 at 7:51 pm
Copy link
so i’m not sure if this is related but I’m going over the website on tablet/phone view and now noticing the featured image is getting cut off on the top on the below pages. Can you advise?

https://proofingcom.wordpress.com/roofing/

https://proofingcom.wordpress.com/roofing/

https://proofingcom.wordpress.com/home/consulting/

https://proofingcom.wordpress.com/team/paul-bancroft/

https://proofingcom.wordpress.com/team/kathy-bancroft/

https://proofingcom.wordpress.com/team/paul-bancroft-jr/

https://proofingcom.wordpress.com/team/devin-james-bancroft/

https://proofingcom.wordpress.com/team/nate-zylinski/

https://proofingcom.wordpress.com/team/lupe-idilbi/

https://proofingcom.wordpress.com/team/darin-bancroft/

https://proofingcom.wordpress.com/team/hans-bancroft/
staff-loquaciousloon · Staff · Feb 20, 2017 at 1:39 pm
Copy link
I see what you mean. The challenge with those is that the screen is getting narrower at a different rate than the header is becoming shorter – basically the window through which we’re seeing your image is changing its shape.

We can force the header to remain a certain height on smaller screens, that should help:
```
@media screen and (max-width: 1020px) {
.with-featured-image {
    height: 315px
}
}
```
booncroft · Member · Feb 23, 2017 at 5:56 am
Copy link
looks great thanks!

only question is, if you notice the featured image for the below page:

https://proofingcom.wordpress.com/roofing/

The contractor get’s cut off on the left side, is there anything we can do about that?
staff-loquaciousloon · Staff · Feb 23, 2017 at 1:57 pm
Copy link
It looks like he does get cut off a bit yeah. Try this:
```
.page-id-47 .hero {
	background-position: left;
}
```
The theme centers background images, but in this case your focal point is off to the left – so we can left align the background on this page rather than centering it :)
booncroft · Member · Mar 8, 2017 at 6:54 am
Copy link
this worked great thank you!
staff-loquaciousloon · Staff · Mar 8, 2017 at 4:54 pm
Copy link
You’re welcome!

No items found.