Header Issues

Good Evening,

Thank you for the Shapely theme, I have had a few issues with the footer which with support was sorted out, I however had a issues with the header as well, pls see attachment from support. I have centered the image as requested but the header is still not mobile responsive. iPhone 6 the header logo is so far right that it is not displaying, same with android tablet. Safari displays off center right as well as on Chrome and Firefox. I urgently need assistance for this issue?

I look forward to your response!

Hey there,

Thank you for keeping in touch.

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*adjust header on mobile*/
 @media (max-width: 550px){
section.page-title-section.bg-secondary.header-image-bg {
    background-size: contain;
    background-repeat: no-repeat !important;
    height: 48px;
    padding: 0;
 }
}

Best Regards,
Support

Hi Support,

Thank you for your quick reply and for the CSS, it sorted out the issue with centering on the IPhone, but the rest of the devices are still the same, is there another way around this issue? I would appreciate the help as soon as available.

Looking forward to your reply!