Different Width for Image if Mobile - PHP

Question

Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/

This is the code that I am using

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
            echo '</div>';
        }
    }
} else {
    add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);

    function bbloomer_add_below_prod_gallery()
    {
        global $product;
        $id = $product->id;
        if ($id == 5735) {
            echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
            echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
            echo '</div>';
        }
    }
}

Answer 1

Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing . I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date). With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class. I also notice an inconsistency here:

if ( !$detect->isMobile() ) {
  ... 
   echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}

It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.

Answer 2

I think you've choosen a bad way to solve this problem.the best way is using css (media query). you can't use "%" in html tag width.

Answer 3

width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.

If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:

<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">

Answer 4

Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration