Jump to content

How to adjust the image of my blog post on mobile device ?

Recommended Posts

Site URL: https://www.juliefloch.com/blog

Hello, 

I have a problem on my blog page where all my blog posts are available. I have a square image size to illustrate all my posts and it seems there is a problem on the image while I am on my mobile device. 

Here is the page in question : https://www.juliefloch.com/blog

The Google Search Console told me my images are too large for the screen and the clickable elements are too short as well. 

When I am checking my blog page on my mobile device (Iphone 6) i can see there is a problem. It's like the image is too large for the screen and I need to swipe my screen in order to see all the image. 

I add some custom CSS in order to have responsive images on all my website and it seems to work fine. 

The problem is just on the images of my blog page and i don't know why. 

I also tried to edit directly on the blog page, reducing the pixels of the images gap, or the title but it does not work better. 

You will find joined a screenshot of what I see on my mobile device with the image too large for my screen. 

Is there a way to fix it for my blog because it seems it's the only images that have a problem on mobile device here. 

Thanks a lot for your help ! 

Julie 

IMG_2089.PNG

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

3 hours ago, JulieF said:

Site URL: https://www.juliefloch.com/blog

Hello, 

I have a problem on my blog page where all my blog posts are available. I have a square image size to illustrate all my posts and it seems there is a problem on the image while I am on my mobile device. 

Here is the page in question : https://www.juliefloch.com/blog

The Google Search Console told me my images are too large for the screen and the clickable elements are too short as well. 

When I am checking my blog page on my mobile device (Iphone 6) i can see there is a problem. It's like the image is too large for the screen and I need to swipe my screen in order to see all the image. 

I add some custom CSS in order to have responsive images on all my website and it seems to work fine. 

The problem is just on the images of my blog page and i don't know why. 

I also tried to edit directly on the blog page, reducing the pixels of the images gap, or the title but it does not work better. 

You will find joined a screenshot of what I see on my mobile device with the image too large for my screen. 

Is there a way to fix it for my blog because it seems it's the only images that have a problem on mobile device here. 

Thanks a lot for your help ! 

Julie 

IMG_2089.PNG

Do you mean removing  the empty space on the right in mobile?

image.png.c7de5ced50c53dd427e1f0f2f12de368.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/16/2021 at 4:34 PM, bangank36 said:

Do you mean removing  the empty space on the right in mobile?

image.png.c7de5ced50c53dd427e1f0f2f12de368.png

Hello, 

 

When you are on you mobile phone do you see the whole square of my image because I dont with an iphone 6. 

Actually I have a sidebar on my desktop view as in the image linked but I removed it in the css code in order for it not to appear on the mobile view. 

Do you think the empty space could be that ? 

Here is the code I used for the sidebar (i bought the plugin with the code actually)

/* Plugin Sidebar - Custom Styles */
html .sidebar {
  width: 250px;
}

html body.has-sidebar:not(.sqs-edit-mode-active).sidebar-is-stacked .sidebar {
  display: none;
}

html body:not(.sidebar-is-stacked) .sidebar {
  width: 250px;
}

html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar>.content-wrapper .contentwrapper .content,html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar~.page-section.section-has-sidebar>.content-wrapper>.content {
  padding-right: ~"calc(250px + 30px)";
}
/* end Plugin Sidebar - Custom Styles */

thank you for your help ! 

Regards,

Julie

Capture d’écran 2021-11-17 à 17.39.37.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.