Docs

[Christopher]

Hi,

Please updte it to :

/* different header on awards pages */

.page-id-5792  .x-brand img,.page-id-5877  .x-brand img,.page-id-5960  .x-brand img, .page-id-6005  .x-brand img,.page-id-6062  .x-brand img,.page-id-6064  .x-brand img,.page-id-6066 .x-brand img,.page-id-6145 .x-brand img,.page-id-6181  .x-brand img
{
   display:none;
}

  
.page-id-5792  .x-brand img,.page-id-5877  .x-brand img,.page-id-5960  .x-brand img, .page-id-6005  .x-brand img,.page-id-6062  .x-brand img,.page-id-6064  .x-brand img,.page-id-6066 .x-brand img,.page-id-6145 .x-brand img,.page-id-6181  .x-brand img
{
   background:url(http://www.exeterbabyactivities.co.uk/wp-content/uploads/2017/02/Family-Favourite-17-362x300.jpg) top center no-repeat;
    width:362px;
    height:300px;}

I removed comma from the last sectors.

Hope it helps.

[lisacole1]

hi, sorry, that still doesn’t work

http://www.exeterbabyactivities.co.uk/lucy-flanagan-family-favourite-awards-judge-2017/

[lisacole1]

I’ve cut it down to make it more manageable but I can’t see the error anywhere, how are your eyes on it?

.page-id-6062  .x-brand img,.page-id-6064  .x-brand img,.page-id-6066 .x-brand img,.page-id-6145 .x-brand img,.page-id-6181  .x-brand img
{
   display:none;
}

  
.page-id-6062  .x-brand img,.page-id-6064  .x-brand img,.page-id-6066 .x-brand img,.page-id-6145 .x-brand img,.page-id-6181  .x-brand img
{
   background:url(http://www.exeterbabyactivities.co.uk/wp-content/uploads/2017/02/Family-Favourite-17-362x300.jpg) top center no-repeat;
    width:362px;
    height:300px;}

[lisacole1]

any ideas appreciated.
I can get it to work for individual pages but not if I want to change the header on a lot at once. I don’t want to clutter up the code with lots of individual bits if I can help it, there will be about 20 pages that need the different header.

[Jade]

Hi there,

Would you mind providing your admin details so that we can check the codes that are currently in your customizer?

Thank you.

[lisacole1]

This reply has been marked as private.

[Lely]

Hello Lisa,

What I found confusing is you’re defining an image as background for the image but then your hiding it too. That’s why we can’t see it.
Let’s focus on this page:http://www.exeterbabyactivities.co.uk/lucy-flanagan-family-favourite-awards-judge-2017/
See this:http://screencast-o-matic.com/watch/cbnj266fIh

This are the CSS I have highlighted on the screencast:

.page-id-6181 .x-brand img, .page-id-6145 .x-brand img {
    background: url(http://www.exeterbabyactivities.co.uk/wp-content/uploads/2017/02/Family-Favourite-17-362x300.jpg) top center no-repeat;
    width: 362px;
    height: 300px;
}

.page-id-6181 .x-brand img, .page-id-6145 .x-brand img {
    display: none;
}

Please update above CSS to this instead:

.page-id-6181 .x-brand, .page-id-6145 .x-brand {
    background: url(http://www.exeterbabyactivities.co.uk/wp-content/uploads/2017/02/Family-Favourite-17-362x300.jpg) top center no-repeat;
    width: 362px;
    height: 300px;
}

.page-id-6181 .x-brand img, .page-id-6145 .x-brand img {
    display: none;
}

The background should be set on the image wrapper .page-id-6181 .x-brand, .page-id-6145 .x-brand not on the image element because we already hide it.

Since you have provided login already, I did check your CSS too. There are missing semi-colons on some CSS. See attached screenshot.

Hope this helps.

[lisacole1]

You are brilliant!
Thank you so much. It is really helpful to see the screencast as well and I really appreciate you checking my css. Above and beyond the call of duty!
Fantastic support, huge thanks!

[Jade]

You’re most welcome, Lisa.

[lisacole1]

sorry! is it possible to make it responsive, client says the alternative header is too big to fit on her phone.

[Christopher]

Hi there,

Please add this code :

@media (max-width:767px){
.page-id-5877 .x-brand, .page-id-5960 .x-brand, .page-id-6005 .x-brand, .page-id-6062 .x-brand, .page-id-6064 .x-brand, .page-id-6066 .x-brand, .page-id-6145 .x-brand, .page-id-6181 .x-brand, .page-id-6197 .x-brand {
    width: 112px;
    height: 86px;
    background-size: contain;
}
}

Hope it helps.

[lisacole1]

Sorry that is not quite doing it.
I tried changing the width and height but it’s still not there.

[lisacole1]

ignore previous! it works beautifully now, thank you!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts