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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.