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

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 

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 

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

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

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

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