Full width image block on mobile

Hi,

I’m having a bit of trouble replicating this issue on my test site. Can you please provide screenshots of the following for me?

• Front-end of the page on Desktop
• Front-end of the page on Mobile
• Image block and block settings from the back-end

It’s possible you may need to create a rule specific to mobile devices in your CSS to make the adjustment you need. Please get this info back to me and we should be able to see what can be done.

Thanks!

Thanks for the reply! Please look at https://testfullwidthimage.000webhostapp.com/ on Desktop and Mobile browsers/views. Screenshots below:

https://testfullwidthimage.000webhostapp.com/desktop_screenshot

https://testfullwidthimage.000webhostapp.com/mobile_screenshot

<!-- wp:image {"id":7,"align":"full"} -->
<figure class="wp-block-image alignfull"><img src="https://testfullwidthimage.000webhostapp.com/wp-content/uploads/2019/03/IMG_20190310_101058-1024x768.jpg" alt="" class="wp-image-7"/><figcaption>Full width</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":7,"align":"wide"} -->
<figure class="wp-block-image alignwide"><img src="https://testfullwidthimage.000webhostapp.com/wp-content/uploads/2019/03/IMG_20190310_101058-1024x768.jpg" alt="" class="wp-image-7"/><figcaption>Wide width</figcaption></figure>
<!-- /wp:image -->

After looking at the CSS, it appears this functionality is intentional. What you are seeing is the way the theme developers decided to handle full-width images in mobile. The settings that make the full-width image work for desktop browsers do not work the same in mobile so this appears to have been the solution decided on by the development team.

Thank you for your response. My question was not on the intentionality or otherwise of this behavior, but rather:

If I want a full-width image on mobile using the Image Block and the Storefront theme, what do I need to do to make that happen?

I hope my question is clear, do let me know if not and I will try and explain further.

You need to target the .alignfull CSS class so that it overrides the col-ful CSS class that is forcing everything to have margins on mobile. Brief testing shows me you could add this to your Custom CSS and it should override the margins for everything with the .alignfull CSS class:

.alignfull {
margin-left: -1.41575em;
margin-right: -1.41575em;
}


You might need to adjust things a bit but this should give you the basic look you are attempting to achieve. Please let me know how it goes.

Thanks!