[HansH]

Hello team,

I now use the free version of Catch store, with the aim to buy the pro store if all is going well.
Now I looked tot the website on the iPad.
In landscape the header isn’t responsive.
Both sites a part of the header doesn’t show up.

Is there a solution for it?

[HansH]

Sometimes I don’t understand it. Now I made a new page and this new page is responsive. Now I gonna try it with a new image.
I made this issue, because another page wasn’t responsive while using the theme image.

Kind regards

Hans Hagmeijer

[HansH]

I remark, that if I look at the iPad I see a bigger image with more content -also on shop page- then on the MacBook.
So the theme doesn’t look fully responsive.

Kind regards

Hans Hagmeijer

[Skandha]

@hansh: Hello Hans,
Can you please let me know on which page the Header Image is not responsive on iPad and mobile devices?

Kind Regards,
Skandha

[HansH]

Hello Skandha,

IS it possible to send you screenshots explanation in case I was not clear?

Kind regards

Hans Hagmeijer

[HansH]

Hello Skandha,

The page, among others is:
https://laura.hagmeijer.nl/winkel/

If you look at this page on the iPad, you see more of the legs of the girl at the right side.

And this header is not the same as the header at the front page. This is bigger and the girl of the right site is much closer to the edge of screen.

Problem is: of you show on the https://laura.hagmeijer.nl/winkel/ header baked products (website is mentioned to be for my daughters home bakery) it is necessary that you see the same image on the iPad as on the laptop or desktop.

Kind regards

Hans Hagmeijer

[Skandha]

@hansh: Hello Hans,
The image can be made responsive as you would like but for that the text over the Header Image will shown below it.
For that please use the following CSS Code.

.custom-header-media img {
	display: block;
}
.custom-header::before {
    background-image: unset;
}
.custom-header-content {
    padding: 20px !important;
    background: #fff;
}
.custom-header-content .entry-title {
	color: #000;
}

Let me know if this helps you out!
Kind Regards,
Skandha

[HansH]

Hello Skandha,

Now the text is under the header, but I don’t want to see the text.
In the shopping page you can read now:
Archives you can add products.

For the visitors of the shop page, this is meaningless text.

Is it possible only to remove the text?

Kind regards

Hans Hagmeijer

[HansH]

Hello Skandha,

It is the element:
<div class=custom-header-content sections header-media section”>
</div>
<!—- .custom-header-content —->
</div>
</div>

I think this is the element, that must be invisible or deleted.

[HansH]

Hello Skandha,

I added
.custom-header-content {
display: none;
}

and on the first sight: this givens the right result.

Now I have a question:

You gave me the following css:
.custom-header-media img {
display: block;
}
.custom-header::before {
background-image: unset;
}
.custom-header-content {
padding: 20px !important;
background: #fff;
}
.custom-header-content .entry-title {
color: #000;
}

Can I replace this by:
.custom-header-content {
display: none;
}

or is it necessary to do more?

And another question:
Can I use a different header for different pages by use the header image per page?

Kind regards

Hans Hagmeijer

[Skandha]

@hansh: Hello Hans,
If you don’t want the text over the Header Image then you can use just the following Code.

.custom-header-content {
    display: none;
}
.custom-header-media img {
    display: block;
}

To use different Header Image on different pages.
Go to => Appearance => Customize => Header Media => Enable On => Select Entire Site,Page/Post Featured Image and Publish.
Now, the featured image you set for each post/page will show up as the header image.

Let me know if this works out!
Kind Regards,
Skandha

[HansH]

Hello Skandha,

Thanks for excellent support. I think I can handle the pro version now.

Kind regards

Hans Hagmeijer

[Author]

Posts