Jump to content

First blog post now showing in mobile view (side by side layout 7.1)

Recommended Posts

Hi!

I'm hoping someone can help me!

I have used the 'side by side' layout for my blog page. It is showing correctly in the desktop version, and it also shows correctly when I am in the editing/preview mode for mobile view. HOWEVER when I look at it on my smart phone it is not showing the first blog post, and yet there is a large white gap where the blog post would sit.

I have tried multiple browsers on my smart phone and all of them show a blank space for that first post.

Attached are three photos - blog page on desktop, preview of mobile view and screenshot of my smart phone.

Anyone know why this might be? is there CSS code I can use to fix it?

thanks in advance!

Rachella

Screenshot 2023-04-21 at 9.28.49 am.png

Screenshot 2023-04-21 at 9.29.07 am.png

IMG_251CA151648B-1.jpeg

Link to comment

Thanks for your response! Sure thing - it's just my blog page: https://www.eventkit.co/blog

When viewed on my smart phone, it doesn't show the first post so there is a white space. It is fine on desktop view.

 

PS. Can I ask you about another issue I have that is unrelated? I have too much space showing between the 'add to cart' button and the product description on my product pages - again this is only in the mobile view. Do you know why this would be? Or have code to fix it? Here is the pic of the space. Sorry to ask two unrelated questions, but hopefully you can help?

Screenshot 2023-04-24 at 8.17.18 am.png

Edited by rachella
Link to comment
On 4/24/2023 at 5:19 AM, rachella said:

Thanks for your response! Sure thing - it's just my blog page: https://www.eventkit.co/blog

When viewed on my smart phone, it doesn't show the first post so there is a white space. It is fine on desktop view.

 

PS. Can I ask you about another issue I have that is unrelated? I have too much space showing between the 'add to cart' button and the product description on my product pages - again this is only in the mobile view. Do you know why this would be? Or have code to fix it? Here is the pic of the space. Sorry to ask two unrelated questions, but hopefully you can help?

Screenshot 2023-04-24 at 8.17.18 am.png

#1. Add to Design > Custom CSS

@media screen and (max-width:767px) {
.blog-alternating-side-by-side .blog-item {
    opacity: 1 !important;
}
}

#2. Use this CSS

@media screen and (max-width:767px) {
.ProductItem-details-excerpt {
    margin-top: 0px !important;
}
}

 

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
8 hours ago, tuanphan said:

#1. Add to Design > Custom CSS

@media screen and (max-width:767px) {
.blog-alternating-side-by-side .blog-item {
    opacity: 1 !important;
}
}

#2. Use this CSS

@media screen and (max-width:767px) {
.ProductItem-details-excerpt {
    margin-top: 0px !important;
}
}

Thank you for your help! 

#2 - worked perfectly for the product page. thanks!

#1 - it has only partly worked. It shows the text but not the image. When I refresh the page it then shows the image. Do you know what I can add to show that image on first load? See attached image.IMG_7248.thumb.PNG.6b858ae03275c161e5ae3346121f3603.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.