[Resolved] Image in different locations for Mobile vs Desktop

Hi Mario,

Using the hide-on classes would be the easy and most accurately working way to do this.

If however you want to it not to load totally, you can try adding it through a Block Element, and then utilize the generate_element_display display filter.

Reference: https://docs.generatepress.com/article/generate_element_display/

For instance:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 393346 === $element_id && wp_is_mobile() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

Kindly replace 393346 with the id of the Element. With this code, the Block Element displays on Desktop and not on mobile. You’ll have to create another Block Element for the other image.

Getting the ID: https://athemes.com/tutorials/wordpress-page-id-and-post-id/

You can compare afterwards if hide-on or the generate_element_display is faster through website speed tests probably if the change is noticeable.

Hope this helps! 🙂

Yes, that would work, but to your purpose of have only one image element, you’ll still have two on Desktop, one of them just hidden.

If you want this, you can try this CSS:

@media (min-width: 769px) {
    .featured-image {
        display:none;
    }
}

Hope this clarifies. 🙂

You’re welcome Mario! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂