JulieF Posted November 16, 2021 Share Posted November 16, 2021 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 Link to comment
Beyondspace Posted November 16, 2021 Share Posted November 16, 2021 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? 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, Lightbox Studio pluginIf 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
JulieF Posted November 17, 2021 Author Share Posted November 17, 2021 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment