Hero image

[Steffen Rasmussen]

Hi Bill,

Sorry to be back again, but i have a last problem, but in the same issue.
I´m working on detsættersinespor.dk og http://www.fundamentet.org/wordpress
You gave me a css-code last time i asked to hold the files regardless of screens.

It works perfect on my screen. See the first two screenshots.

However, on one of my screens, and the screen of the person i´m doing the site for,
the text dissapears from the hero image. See 3rd attachement.

Any advice? 🙂

Attachments:

1. 

   Skærmbillede-2015-02-17-kl.-15.14.02.png
   

2. 

   Skærmbillede-2015-02-17-kl.-15.13.32.png
   

3. 

   laage.png
   

[Bill Robbins]

Good Morning Steffen,

Great question. The snippet there is for the smaller hero size. Since the second site is using the normal size, the additional styling isn’t being applied to it. You could change the snippet to this:

#hero-section {
	background-size: contain;
	background-position: center top;
}

and I think that will cause it to apply to all sizes of the hero. Let me know if you run into trouble.

Take care,
Bill

[Steffen Rasmussen]

Hi Bill,

Sorry, i put in the code and it still doesnt work yet – maybe we misunderstood eachother, due to the third screenshot being wrong. If we can´t make it work i´ll just center the text on the images, so it won´t dissapear. I can´t keep disturbing you 😉

If you look at the first screenshot, with the white/grey hero-image, you can clearly see the footsteps on the left and the text next to it.
If you look at the other screenshot, with the same image, just in red color: then you see that the foot and the text is almost gone. It´s the same site, just a different under-site. But if i opened up the same site, with the grey/white picture on my computer and then the other computer, the difference is still the same.

I attached a picture i just took of a screen so you can see that on her computer the things dissappear even though it looks perfect on mine.

P.S. If you go to http://www.fundamentet.org/wordpress and go into “holdet bag” (staff) then you see that there is 9 staff-members, so it should be in three lines. No matter what i do, the 3rd line will only contain one staff-member and puts the others in a new line. any idea why?

Attachments:

1. 

   IMG_5218.jpg
   

[Bill Robbins]

I think we may be getting closer. On the page that you sent that last screenshot of, we need to make the hero section taller on really large displays. It looks ok on smaller ones on my end, but in large browser windows it’s getting cut off. Try this and see if it make a difference:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 1200px) {
   
   	#hero-section.small-height {
   		height: 60vh;
   		background-size: contain;
   	}
   
   }
   

3. Update your settings.

Let me know if that gets us closer,
Bill

[Steffen Rasmussen]

Yes, yes! It finally works. All my headaches are gone 😉
Thank you! Did you have time to see at the last question? then it´s ready to go online!

Quote: P.S. If you go to http://www.fundamentet.org/wordpress and go into “holdet bag” (staff) then you see that there is 9 staff-members, so it should be in three lines. No matter what i do, the 3rd line will only contain one staff-member and puts the others in a new line. any idea why?

[Bill Robbins]

Glad that worked for you. Give this a try for your staff:

.page-template-page-staff-list-php #content article.staff:nth-child(4n),
.tax-staff-group #content article.staff:nth-child(4n) {
	clear: none;	
}

Have a great weekend,
Bill

[Author]

Posts