Home Page Video and Photo on mobile

Good Morning. I was unresponsive in the previous topic: Home Page Video and Photo

After I added this code my site was left with a blank stripe on all mobile pages. How to Fix?
I want to stay with the CSS code that hides the video from my mobile home page.

Code:

@media only screen and (max-width: 767px) {
.sydney-hero-area #wp-custom-header {
display: none;
}
.sydney-hero-area .header-image,
.sydney-hero-area .header-inner {
display: block;
}
}

Hi,

Please post a link to your website, to the page where you have that issue, so I can check.

Kind Regards,
Csaba

Website:

Hi,

You can remove the white space from below the header image, by setting the image’s height to auto instead of a fixed size of 900px how you have it now, with this Custom CSS:

.header-image {
    height: auto;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

It works! Now how do I hide the photo on the other pages of my site? It’s showing up on all the tabs, I want to just leave it on the Home Page

Note: Desktop ok

Hi,

If you meant the hero image widget, that can be hidden from all pages except the homepage with this Custom CSS:

.so-widget-sow-hero {
    display: none !important;
}

.home .so-widget-sow-hero {
    display: block !important;
}

If you mean an other image or area, please post a link to the page where it shows, so I can check.

Kind Regards,
Csaba

hello did not work
On my site, I want to have 2 viewing options, which are:

  1. Desktop: video on “Home Page” added in “header video” (ok).

  2. Mobile: photo in “Home Page” added in “header image” (but today with the codes I have added in addition to the Home Page ", the photo is on all other pages of my site, which I do not want)

Hi,

You can hide that header image from all pages, except homepage with this Custom CSS:

@media only screen and (max-width: 767px) {
.sydney-hero-area .header-image {
    display: none !important;
}

.home .sydney-hero-area .header-image {
    display: block !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba

Hello Csaba.
Unfortunately it did not work. After adding the code I could not notice any difference

Hi,

Please clear your cache and check your Contact page on mobile ( or screen-sizes below 767px ), the header image is gone from there now and check the Homepage, there the header image is showing, as requested.

Kind Regards,
Csaba

Thank you, it worked!

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a good day!

Kind Regards,
Csaba