Newsanchor - header image is not responsive

Hello everyone!
Thanks to the team of athemes for many nice wordpress themes.
Currently I use Newsanchor and it works pretty well.

The testing area is: www.camping-institut.de

How can I make the header image responsive?
In which file I have to make the changes.

Problem:
If I insert a header image over the Customizer, it is always represented in the wrong size.
Also, it is not responsive on smartphones/mobile devices.

Maybe it is a problem with viewport? I don’t know much about this topic!

I’ve tried so far:

  1. Changes in the style.css - nothing happens in my sense
  2. Changes in the Customizer - additional CSS area - fits on the desktop, but not on the smartphone
    / *
    .logo {
    Width: 700px; // it is on the desktop, but not on the smartphone
    Height: auto;
    Background-size: contain;
    }
  • /

Experiments with max-width: 100%; brings no change.

I’ve seen that in the style.css this code is implemented:
/ *
.main-header .logo {
Width: 196px;
Margin: 18px 0 0 0;
}

  • /
    What is the 196px good for?

Thanks for a reply and the solution :slight_smile:
Roar

Hi,

How I see in CSS you’ve set the logo to 1200px wide, so that way it won’t be responsive, it must be in % to be responsive, so I suggest using this Custom CSS to make the logo image 100% width:

.main-header .logo {
    width: 100% !important;
}

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.

Best Regards,
Csaba

Hi Csaba!

Thanks for your fast answer!
.main-header .logo {
width: 100% !important;
}
Unfortunately this is not the whole solution!

As you can see on www.camping-institut.de (it’s a pure beta test site)
I’ve now written the following values into the Customer CSS box
.main-header .logo
{
width: 250% !important;
}

This works very well in the current browsers Chrome V 57.x, Firefox 52.x and Vivaldi 1.7x (an Opera-fork)!

But on my smartphone Android 5.1.0 under Chrome V 56 the picture size does not fit.

Can this be related to the section “Media Queries” in the style.css? Is there an influence to the header image, which I not understand?

Or is it possible that the bootstrap-data in behind has a significant influence on the behaviour of the head-image?

Excuse my questions, but I have just developed a bit of ambition to solve the holy-shit-problem :wink:

Best regards,
Roar

Hi,

250% will surely won’t fit on mobiles, better try this Custom CSS instead:

.main-header .col-md-4 {
    width: 100% !important;
}

.main-header .logo {
    width: 100% !important;
}
  • this have to work way better then upscaling the image ( out of the content area to 250% ).

Please let me know how it works.

Best Regards,
Csaba

Hi,

“That’s the way - aha, aha - I like it!” (KC & The Sunshine Band)
https://www.youtube.com/watch?v=QUw7pY4aX9s

Thanks a lot for your suggestion.
This saved me a lot of time in troubleshooting.

The solution is this little piece of source code:
.main-header .col-md-4 {
width: 100% !important;
}

For a new project I will buy a pro theme from you.
Very satisfied!

Greetings
Roar

Hi,

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

Have a nice day!

Best Regards,
Csaba