Issues with news pages on mobile

Hi. Wondering if anyone has seen this before. My news posts are running over the body section into the footer when seen on mobile (see attached). Not sure how to adjust the mobile layout so this doesn't happen as I don't see how to change the section height or anything.  Welcome suggestions and pointers....

I think you have some code to adjust height of first section.

Can you share link to your site? We can check easier

Hi - don't know why I didn't see your reply before, thanks for looking at this. Here's a news page link

https://www.seasailing.org/news/sea-awarded-horder-trophy-for-youth-development-through-sail-training

And yes we do have some code that you helped me identify because images on our top blocks were getting cut off on mobile. Below is the code. I tried deleting it on the news pages, and that does fix the news layout issue, but the header image is again flawed in mobile. I'll put it back in for now.

Love to figure out a solution if there's one that can address both issues. If not, I can come up with an alternative header image approach for this one section.

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

On 3/22/2024 at 8:06 AM, KifS said:

Hi - don't know why I didn't see your reply before, thanks for looking at this. Here's a news page link

https://www.seasailing.org/news/sea-awarded-horder-trophy-for-youth-development-through-sail-training

 

And yes we do have some code that you helped me identify because images on our top blocks were getting cut off on mobile. Below is the code. I tried deleting it on the news pages, and that does fix the news layout issue, but the header image is again flawed in mobile. I'll put it back in for now.

Love to figure out a solution if there's one that can address both issues. If not, I can come up with an alternative header image approach for this one section.

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

Edit your code

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

to this code

<style>
   @media screen and (max-width:767px) {
  body:not([class*="type-blog"]):not(.view-item) article section:first-child {
    min-height: unset !important;
    height: 30vh;
    margin-top: 15vh;
}
  }
</style>

Thanks for the suggestion. I'm not sure what that does that not using code on the news page wouldn't do. I'm still getting the header image problem on the main news page.  

original code injection

Fixes banner image location, but messes up the layout on main page and all blog pages

Your updated code injection

Fixes layout, on main page and individual blog pages but banner image is offset

No code injection

Seems to do the same thing as your updated code. So not sure how to address image position. 

Your original code will reduce First Section Height on All Pages.

You can let me know which page you want to apply the code, I will add ID to your original code, and exclude other pages from the code

Oh interesting. I had added that original code to every page individually. Are you saying I could have put it in the overall site custom CSS section? 

Regardless, here's the page where I would ideally like a banner but that is messing up the blog layout.

https://www.seasailing.org/news