tablet portrait related items css/view is not right

12/3 quickinstall of ecommerce quark
http://www.ahgoobaby.com

Please see the attached screen shot in a nexus tablet in portrait view using chrome as an example of the issue. All other related item views (desktop, mobile portrait, mobile landscape, tablet landscape) appear to look correct except tablet portrait. Live example can be found here: http://ahgoobaby.com/index.php/our-store/change/206/22/the-wipes-case/the-wipes-case-retro-daisy-detail.

The issue appears to be that the code you gave in an earlier post did not completely work for this one view (tablet portrait). I've summarized from the previously closed post the fixes that correctly tweaked related items in other views here:

a) Removal of everything except the URL product name link, image and sales price is done with the following code:
@media only screen and (max-width:1040px) {
#gk-menu-overlay-wrap .gkMainMenu .childcontent { display: none !important; }
}
b) Reducing the text for SALES PRICE and the actual sales price number / amount as well as make the font the same as the template:
.product-related-products .PricesalesPrice {
color: #777;
font: italic 400 16px Georgia,Times,Times New Roman,serif;
margin: 0 0 16px;
padding: 0 0 16px;
}

.product-related-products .PricesalesPrice .PricesalesPrice {
color: #26292b;
font: italic 400 20px Georgia,Times,Times New Roman,serif;
margin: 20px 0 0 12px;
}
c. The default template has related items linking to a new tab rather than to the parent tab in the browser. Fix by going to /templates/gk_quark/layouts/blocks and adding the following code JUST BEFORE the google script code. If no google script code then add it to the bottom of the file.
<script type="text/javascript">(function($) {$(document).ready(function() {
function rmTarget() {
$('.product-field-display > a').each(function(){ $(this).removeAttr('target'); });
setTimeout( rmTarget, 1 );
}

$(rmTarget);
});})(jQuery)</script>

As you can see from the screen shot, to conform to the other view fixes you provided above, all text again should be removed except 1) URL product name link, image and sales price, 2) images need to be scaled down to properly fit into the column widths, 3) font the same as the template font.

Hi

Are You sure this tablet isn't loading old css file from browser cache ? I can see it correctly for every width. Maybe just a small improvement for height of the images when resized.

Code: Select all

.productdetails-view .product-related-products img, .productdetails-view .product-related-categories img {
    height: auto;
    max-width: 100%;
}


Ok. What about the related items that appear on pop up window just after you add a product to the cart? Try by adding a Stroller Clip unit to any cart and see the pop up window that includes "continue shopping" or "show cart" buttons. See how the related items are showing and they are not sizing / aligning properly? It appears the related items on the product details page are loading fine, but on the pop up add to cart model box they are still wrong.

Hi

Ok those related products in popu is something new. I've never seen this before in this place. Must be a new function or some kind of extra plugin. Anyway this code added to override.css can fix it too:

Code: Select all

.product-field-display img {
max-width: 100%;
}


FYI, this feature is standard in virtuemart - it is only that many do not take advantage of it. In the product backend in the custom fields tab, there is a related items section that allows you to tag products that are "related to" the product the customer is viewing so that they appear at both the bottom of the product details view as well as in the modal pop up after you add a product to cart. This provides the customer with a simple call to action for items they might likely want to add to the cart.

I tried this code but it didn't fix the problem. In landscape mode (desktop and tablet) as well as mobile phone mode (both portrait and landscape modes) all looks as it should. The problem is in non mobile portrait mode, such as desktop portrait (with the screen set as portrait) or tablet portrait mode (when rotating the tablet to portrait). When it goes to a large screen portrait mode like in a tablet where the left and right space is smaller than the top and bottom space, the responsive resizing of the images don't work properly and they overlap across the columns.

Hi

I'm afraid I do not understand what You have in mind. Please look at my video. Images fits itself for every possible screen size. For the tags question I'm afraid we do not change vm functionality, we only add styling to it, so I'm not aware how to make it, sorry.