[Kitado]

Hi!

I’ve used this theme a couple of times and love it.

I have 2 questions relating to 1 website http://www.perfexdobermanns.com

I had a header image designed and asked the designer to make it 1920 x 1082. Unfortunately when adding it to the site as a header it only displays half the image by narrowing it. I particularly wanted to use it as a header because I like the parallax scroll as you scroll down the page. However I thought maybe that was the problem with using the image this way. So as a second choice work around I used the header image as a Featured slider instead but now I get the arrows and red dot. I added your code to the custom CSS that you advised a previous guest

#feature-slider .cycle-pager,
#feature-slider .cycle-next,
#feature-slider .cycle-prev {
display: none;
}

But the arrows and dot is still there. Can you help??

Also is there a way to get rid of the search magnifying glass?

Thanks in anticipation!

R

PS the other website I use this theme on is esfc.club – which works just great so thank you!

[Kitado]

Aha I’ve tweaked my other Custom CSS entries and now the arrows and dot have gone! Thank you.

So I just have the query about the magnifying glass – unless you can tell me how to have the image as a header and still have the parallax scroll effect and still use the whole image.

Thank you!

[Skandha]

@kitado: Hello there,
To remove the magnifying glass
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.primary-search-icon {
    display: none;
}

Regarding the header image can you please try using the image size of 1920*1080px in the header image?

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

[Kitado]

Hi Skandha,

The magnifying glass is still there although it’s not the end of the world.

I’ve now placed the graphic as a header image (1920*1080px) and you can see only the top half of the image 🙁 If it comes to it I will use it as a single featured slider, I just liked the scroll effect with the header.

http://www.perfexdobermanns.com

Any help greatly appreciated.

[Skandha]

@kitado: Hello there,
To remove the magnifying glass use the following CSS Code instead.

.primary-search-icon {
    display: none !important;
}

For the image you can try using the Header Image of size 1920*822px and then add the following CSS Code.

#header-featured-image {
    min-height: 100vh;
}

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

[Kitado]

Thank you for this that’s great – I’ve changed it to 150vh because the wording was getting chopped off the bottom. The issue I have now is that when viewing on an iphone (vertically) the header imagine is not to scale and is too big. Is there a way I can command the image to size properly on a mobile? Thank you so much for all your help.

https://perfexdobermanns.com/

[Skandha]

@kitado: Hello there,
Please use the following instead of the one that you have added.

@media screen and (min-width: 1024px) {
	#header-featured-image {
	    min-height: 150vh;
	}
}

Let me know if this works for mobile view as well.
Kind Regards,
Skandha

[Kitado]

Perfect! Works great on mobile. Can I add anything to make it right on an iPad too?

https://perfexdobermanns.com/

[Skandha]

@kitado: Hello there,
It does not looks possible on the iPad view as the header image is used as a background image and it is not possible to make a background image responsive on all screen sizes.

Kind Regards.
Skandha

[Kitado]

No problem, I’ll see if I can work around it.

Thank you so much for all of your help!

[Skandha]

@kitado: Hello there, I hope I was able to help you out. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/catch-responsive/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts