Shrink header bar on mobile

[mercesgirl]

Is there a way to get the bar to shrink with the screen? I have an image contained for my header, but when I am on mobile, there is a large space between the image and the page. How can I fix this?

http://kimbrar4.sg-host.com/

[nabeel]

Hi Kimbra,

Thank you for reaching out. I checked your site and I see you have given min-height of 100vh to the bar that contains the image which is causing the issue:

Set the min-height to auto to make sure it adjusts as the screen size gets smaller. Hope this helps!

[mercesgirl]

thank you so much! That worked.

[nabeel]

Glad that we could be of help.

Cheers!

[mercesgirl]

I have another issue. I have the image contained in the container. It works on the live side, but in Cornerstone, when I am editing other things, the image shifts making it difficult to do further edits so I have to save and refresh to do check the edit, but if I adjust again the image shifts again so I again have to save and refresh. Is there a way to stop this in cornerstone?

[marc_a]

Hey Kimbra,

It would be best if you could share with us your admin credentials so that we can check and investigate your issue properly. Please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password
• Page URL in question

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

Thank you.

[mercesgirl]

Just posted above please let me know if you are able to view it.

[ruenel]

Hello Kimbra,

Thanks for updating in! I have edited the header and I could not replicate the Image shift issue.

Can you please provide a video screenshot so that we will have an idea of what is going on in your editor? perhaps, it is just a browser cache. Kindly clear your browser cache and test the site again.

Best Regards.

[mercesgirl]

Here is a link for a video to show what it’s doing.

[ruenel]

Hello Kimbra,

Because your image width is set to Auto. You can set it to 100% and then set a maximum width as well. By setting a 100% width or by having a 100% maximum width, the image will be contained with the bound of the Column element.

Best Regards.