Banner images and Title cut off on Mobile

Site URL: https://www.henryfrakes.co.uk/

Hi there,

bit new to this but been working on my site but it has a couple of issues on mobile wondering if anyone could help? 
 

The pages have either a landscape hero banner or carousel on mobile but it gets cropped to portrait cutting off most the image on mobile, is there a way to avoid this?

I would also ideally like the title of the site to be on two lines rather than one, like

Henry Frakes

Photography

There is also some off-spacing in the menu navigation and really not sure what is causing that?

Sorry for so many questions! If anyone could help would be amazing.

thanks!

henry

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
section.Index-gallery img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

section.Index-gallery {
    height: 200px !important;
}
}

On 12/25/2021 at 9:20 AM, tuanphan said:

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
section.Index-gallery img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

section.Index-gallery {
    height: 200px !important;
}
}

 

sorry for the delay, just realised push notifications for this site were turned off. Just tried it out and it worked!! thank you so much. 

Would you know how to do the same for hero banners across the other pages?

On 12/31/2021 at 7:40 PM, HenryFrakes said:

sorry for the delay, just realised push notifications for this site were turned off. Just tried it out and it worked!! thank you so much. 

Would you know how to do the same for hero banners across the other pages?

Can you share link to another page? We will check it again to tweak the code