Testing some of the new PT pages on http://mobiletest.me/iphone_5_emulator (there's many other devices to test), I found a product with a long name went off the screen + the search submit button was a few pixels off. You can click within the device then scroll with arrows, page up, page down.
They're now fixed, but you probably have a more elegant way to get this done. This is what I did:
http://www.example.com/shops/product/12-Days-of-Christmas-Cupcake-Kit.html
I added a <br> to line 10 in products.php (+ a colon):
$banner["h2"] = translate("Price search results for:")." <br><strong>".htmlspecialchars($q,ENT_QUOTES,$config_charset)."</strong> ";For the search field, I added this to the default.css:
.pt_sf input {
margin-left: -30px;
}.margin {margin-left:-36px}(I wanted the button a little closer to the input field).
Then I added the class margin to line 15 in searchform.php
<button class="button tiny margin"><?php print translate("Search"); ?></button>
=============================
Order by: Relevance, Product Rating | Price: Low to High, High to Low (Showing 1 to 24 of 51) > this also goes off rather than wraps. (Please add to my previous post about items going off device)
=============================
I saw that Search or browse by Merchant, Category or Brand didn't line up. Did this in searchform.php:
<div class="row"><?php print translate("Search or browse by"); ?>
<a href='<?php print tapestry_indexHREF("merchant"); ?>'><?php print translate("Merchant"); ?></a>,
<a href='<?php print tapestry_indexHREF("category"); ?>'><?php print translate("Category"); ?></a>
<?php print translate("or"); ?>
<a href='<?php print tapestry_indexHREF("brand"); ?>'><?php print translate("Brand"); ?></a></div>Exactly what I needed, 'show-for-small-only'. However, on the banner.php code, that's already there in version 15:
if (isset($banner["h2"])) $banner["h2"] = str_replace(translate("Product search results for"),translate("Product search results for")."<br class='show-for-small-only'>",$banner["h2"]);
if (isset($banner["h3"])) $banner["h3"] = str_replace(" | ".translate("Price")," <br class='show-for-small-only'>".translate("Price"),$banner["h3"]);Hi,
That code applies the same trick to search results pages, not the instance that you identified which could also be fixed in the same way, but just as easy to modify in products.php directly - let me know if you're still not sure of course...
Cheers,
David.
--
PriceTapestry.com
In search.php, figured out where I needed to place the for Order by, etc. It's all good! The positioning: that was for another element (the min/max price boxes). It's fine as is.
Hi Retro135,
You can make the
<br />inserted into the $banner["h2"] value render for small only if you like, so the replacement would be:$banner["h2"] = translate("Price search results for:")." <br class='show-for-small-only' /><strong>".htmlspecialchars($q,ENT_QUOTES,$config_charset)."</strong> ";Regarding the same for the "Order by..." links etc, html/banner.php should be inserting
<br class='show-for-small-only'>for mobile display immediately before "Price:" - see line 6, however if this is overflowing for very small rendering you might want to experiment by removing white-space: nowrap from the .pt_ba h2 and .pt_ba h3 style definitions in html/default.css (lines 105/109).Regarding re-positioning the results from / to text to the right, you could combine this with $banner["h3"] instead of $banner["h2"] to do this, in search.php simply replace each instance of;
$banner["h2"]with:
$banner["h3"](lines 478 / 482)
Hope this helps!
Cheers,
David.
--
PriceTapestry.com