[Ursula]

Just bought Catch adaptive pro theme – unfortunately the header images are unresponsive on the mobile and parts of image missing.
In addition, there is script over the images stating header side bar widget area etc, but i’m unable to figure out how to sort. Any ideas?

http://www.yourexpertselfonline.com

[Mahesh]

@yourexpertself: The header image is used as the background image for the Header. The image size adjustments are automatic with the size of the device. This can be managed with some Custom CSS. Will help you with this.
In addition, there is script over the images stating header side bar widget area etc, but i’m unable to figure out how to sort. Any ideas?
-> Sorry I didn’t get this part.
Let me know further.

Regards,
Mahesh

[Ursula]

Thank you Mahesh for your input.

Is the image size automatic on any mobile device, as even the image on the mobile preview (test) on the catch theme customise is out of alignment. Either way thank you for your support on helping with this-what do I do next please?

With reference to the writing over the header images. My header image should just have a photo, a logo and the words ‘building everyday resilience’. However, it currently has the words ‘header sidebar widget area, this is the header side bar widget area’. This remains there whatever image I place in the header. I unfortunately don’t know how to remove it, I assume it is an error as it wasn’t there when I had the free version on the theme. I hope that makes sense.

Wwww.yourexpertselfonline.com

Thank you

Ursula

[Mahesh]

@yourexpertself: Well, I’ll answer the later one first. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Header Options and make sure Check to disable Header Sidebar option is checked. I’ll help you with the header image as soon as you have managed this one. Let me know when you are done.

Regards,
Mahesh

[Ursula]

Hi again Mahesh,

Thank you for your input – that has taken off the header widget area information and now made it mobile responsive.

The only prob now is that the website only shows the bottom half of the header image. Is this where the custom CSS comes in that you spoke of prior? Either way – any ideas what I need to do next to show the whole image?

http://Www.yourexpertselfonline.com

Many thanks

Ursula

[Mahesh]

@yourexpertself: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

#masthead .wrapper {
    height: 488px;
}
  
@media screen and (max-width:1280px){
    #masthead .wrapper {
        height: 300px;
    }
}
  
@media screen and (max-width:980px){
    #masthead .wrapper {
        height: 250px;
    }
}
  
@media screen and (max-width:768px){
    #masthead .wrapper {
        height: 200px;
    }
}
  
@media screen and (max-width:420px){
    #masthead .wrapper {
        height: 100px;
    }
}
  
@media screen and (max-width:320px){
    #masthead .wrapper {
        height: 75px;
    }
}

Regards,
Mahesh

[Ursula]

That did the trick!

Thank you very much 🙂

[Mahesh]

@yourexpertself: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Ursula]

Hi there again,

I’ve been pressing in with adding images and begun to realise that the size of images on a desktop is too big. Unfortunately, the images on pages and posts dominate the page. To the point that no content is visible until you scroll down.

How do I make the images smaller please?

http://Www.yourexpertselfonline.com

Thank you

Ursula

[Mahesh]

@yourexpertself: I guess, you’ll need to use a different image, with minimum height possible. Because the width of the image covers the background, and the height is adjusted as per the image width. Hope you understand.

Regards,
Mahesh

[Ursula]

Hi Mahesh,

Thank you for your reply.

I have tried your suggestion already. I even tried the same size image as used on the catch base theme (which is a lovely size, fit and responsive on my other website).

The problem is whatever size image I put in it naturally adjusts it to fit into the dimensions set on the header. So how do I change the header settings so that the size of all header images on pages and post don’t dominate the page on the desktop top version please.

Does the CSS data you provided for the header sizing need tweaking to achieve this?

If so which element of the CSS data do I change please?

Fingers crossed I can sort this as the theme will be redundant without the header functioning to an appropriate size.

Thank you in advance

http://Www.yourexpertselfonline.com

Ursula

[Mahesh]

@yourexpertself: Well you can adjust(decrease) the height as required that I’ve provided you previously in the following in the thread above.
https://catchthemes.com/support-forum/topic/header-images-are-not-mobile-responsive-unable-to-take-header-sidebar-widget/#post-106286
Let me know if any problem.

Regards,
Mahesh

[Ursula]

Hi again,

Thank you for your reply Mahesh. I understand what you mean, the only thing is there is so many measurements and code- that i don’t exactly know where to start. Which section relates to the header? All of the px’s or just some
on the mast head and media screen?

#masthead .wrapper {
height: 488px;
}

@media screen and (max-width:1280px){
#masthead .wrapper {
height: 300px;
}
}

@media screen and (max-width:980px){
#masthead .wrapper {
height: 250px;
}
}

@media screen and (max-width:768px){
#masthead .wrapper {
height: 200px;
}
}

@media screen and (max-width:420px){
#masthead .wrapper {
height: 100px;
}
}

@media screen and (max-width:320px){
#masthead .wrapper {
height: 75px;

Thank you in advance

[Mahesh]

@yourexpertself: All the code above is for the same element. The difference is that, the height of the wrapper will be adjusted as per the width of the device. Let me know if any problem.

Regards,
Mahesh

[Author]

Posts