Image setup for responsive headers in pro

[lisacole1]

Hi, please can you point me in the direction of a video tutorial or some documentation about how to set my logo image so it is responsive.
I’m not sure if I need to make a different container for each break point?

[prakash_s]

Hello @lisacole1,

Thanks for writing to us.

It seems that you are using an extra-large size image. I would suggest you resize the image then upload it or you can set the max-width in the image element. In case if you haven’t seen the image element doc please have a look at it to learn more about how to set up the image element.

Image | Themeco Docs

In case if it doesn’t work for your we need to check your settings. I would request you please share your details in the secure note.

Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact Header Name

You can find the Secure Note button at the bottom of your posts

Thanks

[lisacole1]

Thank you,
is 1000px extra large?

if I set the max width to 250 it is perfect for the smallest screen. I’ll make different headers for each break point.

What I’m trying to find out isn’t on your link (which I read before I put in my question here).

What is ‘base’ in the setup? It has width and height settings and it is just above the maximum setting.

In the Image section, do you have a link to the different options like fill, contain, cover and the syntax I can use in the position box - currently it is 40% 40% I don’t know if that is height width or what it is 40% of.
Thank you

[christian]

Hey Lisa,

I checked your site and the logo is responsive. The Logo in the Original X Header is responsive out of the box so if it’s not responsive on your end, there’s probably a custom code that is affecting the logo.

The size of the image will depend on what your design is. 1000px would be divided to 2 because of the retina feature. That means your image will be sharp on Apple devices with Retina screen.

Please clear your browser’s cache and also try viewing in other browsers.

Thanks.

[lisacole1]

Thanks, you are seeing the default header, I am just starting to build a new one in Pro, that is where the problem is because I don’t understand what the settings do. If you can tell me where the documentation is that would be great.
https://www.frontrunnersinnovate.com/frontrunners-innovate-and-league/

[ruenel]

Hello @lisacole1,

It is best that you check out our video demonstrations on how you can create a responsive custom header:

Best Regards.

[lisacole1]

That is the video I needed, thank you!

[prakash_s]

You are welcome @lisacole1