Hero/Content Split: Can the settings be changed to show full image on mobile?

[ktdoyle]

Hi,

I have set up a few pages on my client’s website which are hero/content split layout with hero image on the left side of the split page:

http://66.147.244.217/~futaride/production/our-director/
http://66.147.244.217/~futaride/production/what-we-do/
http://66.147.244.217/~futaride/production/testimonials/
http://66.147.244.217/~futaride/production/contact/

I like how these look on laptop/tablet (landscape), however, is it possible to show the full image on mobile/tablet (portrait) instead of the partial image? I know the hero image in this layout is used as the basis of a title page, which is why it’s responsive and displays as it does on mobile, however my client doesn’t want the title shown, just the image. (Screens attached.)

Many thanks in advance for your help.

Warm wishes,
KT

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

@media only screen and (max-width: 479px) { 
.page-heading.fancy-heading {
  max-height: none;
}
.fancy-style .page-heading.fancy-heading {
  height: 100vh !important;
  object-fit: cover;
}
}

– Kyle

[ktdoyle]

Hi Kyle,

Thanks so much for the code. That works great. Looks fab on mobile in portrait orientation 🙂

Is it possible to make the image display fully for tablet in portrait orientation too?

Many thanks and warm wishes,
KT

[Kyle – SUPPORT]

Increase the max width to 768

– Kyle

[ktdoyle]

Oh wow! Kyle, that’s awesome! Worked a treat! So happy, thank you 🙂

Warm wishes,
KT

[Kyle – SUPPORT]

No problem 🙂