Non-responsive logo in pro-header

Support
#1

I have failed to make this logo responsive on small devices. It will not shrink at all.

I have tried this CSS-script:

@media screen and (max-width: 768px) {
.x-masthead .x-bar-outer-spacers {
width: 300px !important;
}
}
But it only cuts the logo at 300px from left when the window is smaller than 768px.

Its a page in progress so you have to go to this link:

Any suggestions?

#2

Hi @kludrik,

Thanks for writing.

My suggestion is to add background:contain; to both the background image and logo image so that it will be responsive. However in regards to much smaller screens, it would be best to show a different image for smaller screens.

Hope it helps. Let us know how it goes.

Thanks.

#3

I did that. And was able to get a similar result by manipulating all 4 parameters of the bar-dimensions. However the logo is still not responsive.

The logo contains of an overlay png with a 73% opaque white band underneath. Under these two is the background picture situated. The background picture is placed by the x-theme control settings.

Tutorials of how to solve problems like this would be very much appreceated…

#4

Hi There,

It is this image: http://haandbryggeriet.no/wp-content/uploads/2017/08/Haandlogo_545high.png, correct? Would you mind providing us with login credentials so we can take a closer look on your setup? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#5

Yes it is correct. However it is a .png with another .png underneath it. The underlaying .png contains an x-repeated partly 73% white opaque and partly 100% transparent stripe. Totally 2px wide and 545px high.

#6

Hi There,

You have an ambitious layout and you have to work how you want it to look on smaller devices.

It is really up to you as on Pro Header builder, every bar, container and element has a Customize tab which you can hide the elements according to the screensize.

Hide the elements which does not fit your mobile layout and add new elements which fit the mobile layout while hiding the to the other resolution.

Hope it helps

#7

Could you supply me with any css for hiding / showing elements?

Or apropriate code for these functions in your Customize tab?

#8

Hi There,

On your Bar, Container, or Element please see the Customize tab. There you’ll see the Hide During Break Points options.

screenshot

Those 5 icons there represents a screen width.

/*From left to right*/
Extra Large - 1200px and up
Large - 980px to 1199px
Medium - 768px to 979px
Small - 481px to 767px
Extra Small  - 480px & Smaller

Hope it helps,
Cheers!