Jump to content

Best seller images collapsed


maxsports
 Share

Recommended Posts

"the images on the right side of the product page"

I was looking on the Homepage.

By the way, my browser is making this complaint:

Probably in the file:
/skins/mjdesign/dist/css/style.css

there is this:
.box-search .search_form button[type=submit] {
 margin:0;
 max-height:2.2rem;
 background-color:#ad1a26;
 border-top-left-radius:0;
 border-bottom-left-radius:0;
 border-color:1px solid #e8e8e8
}

Note that border-color only allows the color attribute.
My browser dropped that particular declaration (not the entire rule).

There is also:

Within the <head> section of the page, probably found in the template
element.css.php
(depending how your skin is contructed)
a statement that renders to:
<link href="https://www.maxsports.ca/skins/mjdesign/dist/css/cubecart.default.css?v=1581759141" rel="stylesheet">
has no actual file present. It probably has no rules in it, but you
may want to copy that file from Foundation.

There is also:

Somewhere in the file vendor.css, maybe near line 5289, there is:

.range-slider-handle {
 border:1px solid none;
 cursor:pointer;
 display:inline-block;
 height:1.375rem;
 position:absolute;
 top:-.3125rem;
 width:2rem;
 z-index:1;
 -ms-touch-action:manipulation;
 touch-action:manipulation;
 background:#008cba
}
The border declaration has 'none' for the color, which is not valid.
None is a style that conflicts with 'solid' as a style.
To not use a color, use 'transparent'.

Also:

The <head> section is somehow getting two copies of this statement:
<link href="https://www.maxsports.ca/skins/mjdesign/dist/css/vendor.css?v=1581759142" rel="stylesheet">

I see that the target images are wrapped in an <a> tag with class "th". You might not be seeing the transition effect when hovering over these images.

In style.css, maybe near line 508, there is:

#box-featured a.th,
#box-popular a.th,
#box-sale_items a.th {
 border:none;
 box-shadow:none
}

In vendor.css, maybe near line 5951:

.th {
 border:solid 4px #fff;
 box-shadow:0 0 0 1px rgba(0,0,0,.2);
 display:inline-block;
 line-height:0;
 max-width:100%;
 transition:all .2s ease-out
}
.th:focus,
.th:hover {
 box-shadow:0 0 6px 1px rgba(0,140,186,.5)
}

CSS has a thing called 'specificity'. The .th:hover has a low specificity, while the #box-popular a.th has a higher specificity, and overrules .th:hover. Thus, no transition effect.

To acquire the transition effect:

Consider adding the following rule after the rule mentioned above in style.css:

#box-featured a.th:hover,
#box-popular a.th:hover,
#box-sale_items a.th:hover {
 box-shadow:0 0 6px 1px rgba(0,140,186,.5)
}

When you say the images will be 'collapsed', do you mean the entire image is visible, but squished down to a very short height? Or only part of the image is visible, but not distorted in any way - of the the portion that is visible?

Link to comment
Share on other sites

Thank you for looking into this for me, I will enable the cache again and make a screenshot once it happens again, I won't see any images but a question mark, the image on the right side (best sellers) will not be visible at all.

Link to comment
Share on other sites

A blue square with a white question mark? This is Safari's placeholder for an image that was not able to be loaded, or not able to be shown. (Firefox uses a page that is ripped in half icon.)

I am not able to tell you how to use Safari's Developer Tools, but once having brought up the tools, the Network page or the Console page will help you discern what the URL of the images are, and what explanation, if any, was the problem with loading them.

If you bring up the Context Menu for one of the images and select "Open Image in New Tab", does the actual image show?

Link to comment
Share on other sites

This is incredibly interesting.

This might only affect the Best Sellers template.

Please determine if your domain name registration has any sort of sub-domains that overlap. That is, the www sub-domain and the mail subdomain point to the same server and folder on that server. You might need to get your hosting provider involved. You will also probably need to closely examine web access logs to see what exactly happened when images were started to be requested using the mail subdomain.

(I recall that a similar issue was present in CubeCart many versions ago, where if an alternate domain was used, but pointed to the same installation of CubeCart - or if two CubeCarts used the same database - the Categories list somehow acquired that alternate domain name.)

(If possible, attach the box.popular.php template to a PM.)

Link to comment
Share on other sites

<img src="https://mail.maxsports.ca/images/cache/voltriczforceii.200.jpg" alt="YONEX BADMINTON RACQUET VOLTRIC Z-FORCE II">

 

seems the domain name has been changed from www.maxsports.ca to mail.maxsports.ca, do you know which file to modify to correct the error?

Link to comment
Share on other sites

Because it only happens some unknown time after clearing the cache (CubeCart's or Safari's?), I think the problem is not necessarily a coding error in the template - but I am not ruling it out.

 

Edited by bsmither
Link to comment
Share on other sites

I am fairly confident that the mail subdomain actually pulls up your CubeCart pages. In certain situations, that domain gets cached.

Until the subdomains get sorted, please do this:

Using a programmer's text editor, create the file ini-custom.inc.php in CubeCart's main folder, and have as its contents:

<?php
$GLOBALS['storeURL'] = 'https://www.maxsports.ca';

And clear the cache.

Edited by bsmither
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...