Blog doesn't display properly on mobile view

Site URL: https://shaunwalker-photography.co.uk

Hi, my blog posts suddenly don't display correctly on mobile view. The top portion the posts, with the title, and first few images just don't display, you can't scroll up, and basically it's a mess. They're fine in normal web view. Does anyone have any suggestions on how to correct this?

Thanks 

I tell folks here that I would not depend on the Config mobile view, look at it from an actual phone as an actual visitor, not signed in. I viewed your site from my Moto Z3 and it looks correct.  No problem scrolling up or down with text and images displaying as they should. 

The same problems occur viewing on my iPhone though - which is where I initially spotted the problem?

I'm struggling to resolve this problem.. Does anyone have a solution?

https://shaunwalker-photography.co.uk/blog/rebecca-reece

All blog posts are missing the title, a section of text, and the first 5-6 images on mobile view. I've tried multiple phones, browsers etc and they're all the same.

1 hour ago, sbwalker5 said:

I'm struggling to resolve this problem.. Does anyone have a solution?

https://shaunwalker-photography.co.uk/blog/rebecca-reece

All blog posts are missing the title, a section of text, and the first 5-6 images on mobile view. I've tried multiple phones, browsers etc and they're all the same.

 

Try remove this code in Custom CSS

@media screen and (max-width: 767px) {
    section:first-child {
        min-height:unset !important;
        height: 60vh
    }
}

2 minutes ago, tuanphan said:

Try remove this code in Custom CSS

@media screen and (max-width: 767px) {
    section:first-child {
        min-height:unset !important;
        height: 60vh
    }
}

 

Thank you, that does work - but this was there to make header images not as tall throughout the site. Is there a way to achieve this and keep blog posts intact?

Much appreciated

25 minutes ago, sbwalker5 said:

Thank you, that does work - but this was there to make header images not as tall throughout the site. Is there a way to achieve this and keep blog posts intact?

 

Much appreciated

Hi. Which image?

it's the header image on all pages really. 

For example 

https://shaunwalker-photography.co.uk/portfolio

Ideally I'd like the mobile view to still show the full width image, rather than crop to the mobile portrait orientation, which takes up the full screen.

On 5/24/2021 at 5:11 PM, sbwalker5 said:

it's the header image on all pages really. 

For example 

https://shaunwalker-photography.co.uk/portfolio

Ideally I'd like the mobile view to still show the full width image, rather than crop to the mobile portrait orientation, which takes up the full screen.

Hi. Add to Portfolio Page Header

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: unset !important;
}
  }
</style>