Support » Theme: Storefront » Full width image block on mobile

  • Resolved saowp

    (@saowp)


    Hullo,

    If I insert an image block and set it to Full width / alignfull, it works on desktop (min-width: 66.4989378333em ?) but on mobile, it looks the same as Wide width / alignwide.

    What can I do to get full-width image block on mobile?

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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!

    <!-- 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.

    Phillip C.

    (@phillipwoo)

    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Full width image block on mobile’ is closed to new replies.