Full width images in mobile mode

  • travelgrapherofficial · Member ·

    Hi Taras,

    Thanks for all help with the Hermes theme in this forum!

    I used to have custom CSS to align my images full width i mobile mode (and wide on desktop/tablet). However, after the upgrade of the theme last week, it stopped working.

    To fix it, I now put horizontal images in image blocks with settings wide and CSS class alignfull and vertical images in a 50/50 column blocks (I want it that way), with setting wide and CSS class alignfull. No other custom CSS. The horizontal images looks great and get full width in mobile mode. However, the vertical images in the column blocks are pushed to the left by the scroll bar in mobile mode. Very annoying.

    For example, this post: https://travelgrapher.com/2020/08/10/kyrgyzstan-a-nomadic-living-at-song-kol-lake/

    Looks like this in mobile mode: https://travelgrapherblog.files.wordpress.com/2020/09/img_3116.jpg

    There must be some way to get all images to align full width in mobile mode, either if they are in an image block or column block?

    Thanks,
    Erik

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hi Erik,

    A new update of the theme includes a better support for the Block editor including full width and wide alignments when the sidebar is inactive on the site.

    I am happy to help you to resolve the issue regarding the images.

    “… with setting wide and CSS class alignfull …”
    – It might cause styling issues when using both alignments in the same time. Let’s find another solution.

    So, you want to display a wide alignment in regular views (desktop) and a full width alignment in smaller screens (mobile), correct?

    I want to make sure I’ve understood you correctly, so I can provide you a simple solution.

    Kind regards,
    Taras

  • travelgrapherofficial · Member ·

    Hi Taras,

    Yes, that’s correct! Wide alignment in desktop (just as in the example post), and full alignment (the whole screen) in smaller screens.

    Best regards,

    Erik

  • tarasdashkevych · Theme Author ·

    Erik,

    In order to display a wide alignment in desktop and full alignment in smaller screens, please follow these steps:

    1) Add a wide alignment to your image or/and the Columns block using the Block editor options.

    Note, if you are displaying your images in the Columns block then you need to apply the alignment option only for the container. In our case, it is the Columns block. Images inside the Columns block should not have wide or full alignments.

    Also, there is no need to add additional “alignfull” CSS class to your block. We can use a custom CSS to change the width of wide blocks in smaller screens. See below.

    2) Add this custom CSS to your site:

    
@media (max-width: 500px) {
    .inactive-sidebar .entry-content .alignwide {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }

    .wp-block-image.alignwide figcaption,
    .alignwide .wp-block-image figcaption{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • travelgrapherofficial · Member ·

    Taras,

    Great, works perfectly! Thank you so much!

    I have two related questions. First, is it possible to modify the width for the wide alignment setting in the block editor? Let’s say I want all images that are set to wide in the block editor to be 1200 px wide.

    Second, more of a general question, does the image size I choose (small, medium, large, full) affect the page loading time, i.e. the actual size of the image being downloaded? I know some web browsers also use the srcset attribute to resize images?

    Best regards,
    Erik

  • tarasdashkevych · Theme Author ·

    Erik,

    Unfortunately, it’s not possible to modify the image width in the Block editor but you can use a custom CSS to modify the width of the wide elements on your actual site:

    
@media (min-width: 992px) {
  .inactive-sidebar .alignwide {
    margin-left: -11vw;
    margin-right: -11vw;
    width: calc(100% + 22vw);
  }
}

    —

    Any image affects a page load. Also, the size of the image also matters. I would recommend to use the size which best fits your needs in the content area of your page.

    Also, make sure to optimize your images. Personally, I like this online service by Google: https://squoosh.app/

    Recently, WordPress has introduced a lazy load for images in the content area. It highly improves performance of your site.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • travelgrapherofficial · Member ·

    Taras,

    That’s great! Thank you for the custom CSS adjusting the image width and the input on loading time and available plugins (lazy loading).

    Really appreciate this forum and the help you give on the Hermes theme!

    All the best,
    Erik

  • tarasdashkevych · Theme Author ·

    Erik,

    “… available plugins (lazy loading).”
    – There is no need to use a plugin for lazy loading anymore. This functionality has been included in the WordPress core a few weeks ago :) Now, WordPress supports a native lazy loading provided by browsers.

    Feel free to open a new thread in this forum if you’ll have any other questions regarding the theme. I will be happy to help!

    Kind regards,
    Taras

  • The topic ‘Full width images in mobile mode’ is closed to new replies.