I have some custom sized images set up through ACF and functions.php
add_image_size('recipe-landscape', 400, 260, true);
add_image_size('recipe-portrait', 260, 100, true);
What I want to do i display the landscape one on larger devices and the portrait on phones. I know how to do that with CSS media queries but it's a php function
<div class="single-img-container"> <img class="single-image" src="<?php echo the_post_thumbnail_url('recipe-landscape'); ?>" alt="<?php the_title(); ?>"></div>
Chat gpt says I can use if(wp_is_mobile() { portrait} else {landscape} the documentation is pretty light on the matter, anyone have insights or opinions?
PHP is a server-side solution. This makes it only a part of the equation, when providing responsive support.
That said, you probably just want to migrate from the IMG tag to the [PICTURE](https://www.w3schools.com/tags/tag_picture.asp) tag for this use case.