Change Logo on Mobile + Optimize Color Box Image and Gallery Images for Mobile

Dear Nikko,
Many thanks for the reply.
Here is the filter code:

add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
if(wp_is_mobile() )
{
$logo = "...address of new logo ";
}
return $logo;
}

I can confirm that the filter does NOT work. (Link to image as seen on mobile + link the image that should have been visible.)
Might it not work because of a caching plugin? I’ve got WP Rocket installed and activated.
Credentials below if you want to look.

I’ll test out the CSS you suggest and report back.
Thank you, Nikko!
Cheers,
Tim

Nikko,
I’m also not having any luck with the code you’ve given me for home page image.
I’ve done the following:

/* Shrink the color box on the home page on mobile horizontal */
@media only screen and (max-width::320px) {
  #top.home #av_section_1 {
    background-size: cover !important;
    background-attachment: scroll !important;
    height: 200px !important;
    border: 2px solid red !important;
  }

  #top.home #av_section_1 .container {
    height: 200px;
  }
}

As you can see, I’ve tried targeting a smaller device (max width 320 px) and I’ve tried adding a border to check and see if the code is actually communicating with the DIV… which it isn’t.
This is one of the things I struggle the most with: very hard to target specific elements in the Enfold theme with CSS. I wish it were easier.
That said, I’m probably not doing something right. What’s the trick?
Please advise.
Thank you.
Tim

Nikko,
Apologies for the many replies…
I’ve found a way to control the color box on the mobile. Here is the code:

/* Shrink the color box on the home page on mobile portrait */
@media only screen and (max-width:320px) {
  #top.home #av_section_1 {
    /*background-size: cover !important;*/
    background-size: 100% auto !important;
    background-attachment: scroll !important;
    height: 200px !important;
  }
  #top.home #av_section_1 .container {
    height: 200px !important;
  }  
}

Strangely, the mobile logo is back… don’t know why.

Not luck increasing the sizes of the gallery images with the CSS that you gave me. Other ideas?
Thank you.
Tim

• This reply was modified 6 years, 7 months ago by hypergolica.