You are here:  » Image on left in small devices (same row with price)


Image on left in small devices (same row with price)

Submitted by sirmanu on Mon, 2017-01-30 15:53 in

Hi David.
Is it possible to modify code in order to show small images in a row, like this image:
{link saved}. In fact, what I want to achieve is the same as large screen.

Right now, the image on small devices are very big. Maybe the description should be hidden in small devices.
Is it possible with Zurb?

Submitted by support on Mon, 2017-01-30 16:25

Hi,

To modify html/searchresults.php to be close to your screenshot, and with description hidden for small, first look for the following code beginning at line 11:

        <div class='small-2 columns show-for-small-only'>&nbsp;</div>
        <div class='small-8 medium-2 columns'>

...and REPLACE with:

        <div class='small-2 columns'>

And then the following code at line 31:

        <div class='small-2 columns show-for-small-only'>&nbsp;</div>
        <div class='medium-8 columns'>

...and REPLACE with:

        <div class='small-8 columns'>

And then the following code at line 49:

            <p><?php print tapestry_substr($product["description"],250,"..."); ?></p>

...and REPLACE with:

            <p class='show-for-medium-up'><?php print tapestry_substr($product["description"],250,"..."); ?></p>

And finally the following code beginning at line 53:

        </div>
        <div class='medium-2 columns pt_sr_each_price'>
          <span class='pt_sr_from'><?php print ($product["numMerchants"]>1?translate("from")."&nbsp;":""); ?></span>
          <span class='pt_sr_price'><?php print tapestry_price($product["minPrice"]); ?></span>
          <br />
          <a class='button tiny radius secondary' href='<?php print $product["productHREF"]; ?>'><?php print ($product["numMerchants"]>1?translate("Compare")." ".$product["numMerchants"]." ".translate("Prices"):translate("More Information")); ?></a>
        </div>
        <div class='small-12 columns show-for-small-only'><hr /></div>

...and REPLACE with:

          <br />
          <span class='pt_sr_from'><?php print ($product["numMerchants"]>1?translate("from")."&nbsp;":""); ?></span>
          <span class='pt_sr_price'><?php print tapestry_price($product["minPrice"]); ?></span>
          <br />
          <a class='button tiny radius secondary' href='<?php print $product["productHREF"]; ?>'><?php print ($product["numMerchants"]>1?translate("Compare")." ".$product["numMerchants"]." ".translate("Prices"):translate("More Information")); ?></a>
        </div>

Cheers,
David.
--
PriceTapestry.com

Submitted by sirmanu on Mon, 2017-01-30 23:58

Excellent, David. I only changed rather than for bigger images.
I didn't know that 'show-for-medium-up' was also valid for paragraphs.
Thank you for your time.