Jump to content

Issues with news pages on mobile

Recommended Posts

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....

 

image.thumb.png.ccae6579f974f767d196310a4420dfaa.png

Link to comment
  • Replies 6
  • Views 963
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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>

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Screenshot2024-03-24at6_58_59AM.thumb.png.7216626dd78652a70ae2c77f64bb3906.png

Your updated code injection

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

Screenshot2024-03-24at6_56_47AM.thumb.png.6d4fdb4fd5a291da765d824fd0b2232b.png

No code injection

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

Screenshot2024-03-24at7_03_25AM.thumb.png.ef04b336a49987961f8edae949bb9888.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.