Equal Height for Products / Older Code Provider > No Longer Work after Update

Hello Guy,,

We where provided some css code to auto control any product product to have an equal height, regardless of the image size, yet this code no longer work and has the site hiding all the images now.

Can you please advise as this happened after an update, something that should be build in, regeneration dons;solve the issue even if we re-pick the 1:1 ration setting.

Please advise as we have tried many css codes with no success.

.products .product-grid-item
{
	display: block;
	position: relative;
	width: 100%;
}
.products .product-grid-item .product-element-top
{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.products .product-grid-item IMG
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
}
.products .product-grid-item IMG
{
	display: block;
	width: 100%;
	max-height: 100%;
}

That code used to work fine until the update.

We also tried what seems to be a standard and that failed as well.

.woocommerce ul.products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.woocommerce ul.products li.product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.woocommerce ul.products li.product a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
   flex-direction: column;
}
.woocommerce ul.products li.product a:first-child {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.woocommerce ul.products li.product .button {
  margin: 1rem auto;
  max-width: 200px;
  width: 100%;
}

Please advise on this ASAP and the site is broken with the original code that was provided and thank you for your time.

Hello,

Please, send us a link to the original topic where this code was provided so we can better understand its purpose and see why it doesn’t work now.

Kind Regards

Hello I can’t find, we looked or I would have referenced this for you along with the css code provided, can you please advise, again you know the purpose.

All you have to do is make it work with whatever changes you clearly made in the template. Thank you.

Here is what I’m 100% sure of, is in version 7.0.4 that code is working 100%, in version 7.1.3 it fails.

We found a backup and reverted, please advise as we posted the same on the support thread. There really needs to be an easy way to downgrade inside the theme to prevent issues like this or a place or just download versions, so we can revert by hand as we just did.

REF: https://xtemos.com/my-account/downloads/

As there is now some type of css conflict, that I can’t find with ease and we have been looking for the source of the issue for awhile now.

Thank you and please provide a solution ASAP so we can update the theme again.

Thanks again for your efforts.

This was the original code with the borders in place as well, which is not really the import part. The critical part is the function of how this simple css code works globally to keep a clean block size height.

As many many sites will need this as a standard to be 100% honest. Do a quick Google search and you will see it’s fairly vital, many themes have this already built in or as a toggle feature as most merchants have varying product height with no easy way to control this, as it’s do to product being sold.

/*store product grid items*/
.products .product-grid-item
{
	display: block;
	position: relative;
	width: 100%;
}
.products .product-grid-item .product-element-top
{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.products .product-grid-item IMG
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}
.products .product-grid-item IMG
{
	display: block;
	width: 100%;
	max-height: 100%;
}

Please advise and thank you again for your efforts.

does this code work

@egemenkalecik it works 100% in 7.0.4 as I’m using it, but not 7.1.3 for unknown reasons, please test this, be sure to clear all cache and you will see, all the best.

Hello,

We checked all the topics created by you but see that we never gave you this custom CSS code. It looks like it was made by you or somebody else. We also tried to understand what exactly this code does but can’t do this because we don’t have your website and don’t know how it is currently configured.

As for version control, we will consider adding such functionality to our theme dashboard in the future. For now, you can contact us and we can send you any version of the theme via email.

Kind Regards

[ingenuitor]

@Admin it was not created by me, it was provided via the support thread inside https://themeforest.net some time ago. We tried to find it, but there are too many posts, can you please find it yourself.

As you can see others are looking for the same…

Also please provide a new version that works with the current theme version.

Thank you and all the best.

• This reply was modified 1 year, 9 months ago by ingenuitor.

[ingenuitor]

Let me explain this is a redacted visual layout, sorry we are required to do this at the public level to protect the privacy of the site as best as we can considering the live environment we are in. The css code provided works perfectly in theme version 7.0.4

As you can see, the title lines up perfectly and no image varies in height, yet each image does have a varying height at the source level, thus on any device size everything looks clean and flows well.

With version 7.1.3 this is no longer the case, hope the image helps explain the issue we now face in 7.1.3.

• This reply was modified 1 year, 9 months ago by ingenuitor.

Here you can see it fails in 7.1.3 for another site, we have more than one licence for the theme, please check as we have yet to solve the issue on these sites, please advise ASAP and thank you.

Hello again, we keep trying methods that work on other theme, even this doesn’t work, which does on other themes, can you please advise why? Can we have a breakdown of the class tree for the product grid?

Do you have a theme grid framework documentation this would be very helpful with css design controls?

.products {
  display: flex;
  flex-wrap: wrap;
}

.product {
  display: flex;
  flex-direction: column;
}

.product .woocommerce-LoopProduct-link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product .woocommerce-LoopProduct-link img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Thanks again…

i have the same problem

https://www.zenhair.com.tr/magaza/

Dear,

In order for us to assist you with the code issue you are experiencing, kindly provide us with the link to your website. This will enable us to investigate the problem and provide a suitable solution.

Without access to your website, we are unable to determine the root cause of the issue you are facing.

Thank you for your understanding, and we look forward to hearing back from you soon.

Best regards

information send website

[ingenuitor]

Hello Guys @admin, @egemenkalecik we provided two clean dummy data staging tests “Private Content”, the css is not working in 7.1.3, but works fine in 7.0.4.

The product grid block is correctly sized height wise and fairy uniform in both versions, with the css provided and the single setup in Snippets, but this now hides the images with the new theme changes in 7.1.3 that it did not before in 7.0.4.

We have a number of images that vary in size height for reference. Hope this can be help some type of standard in the future, that many are looking for.

It seems like the css flex model is best for this as shown in this thread above, but yet have found the way with all these nested classes to make this work correctly.

Thank you again for all the efforts and time in this…

• This reply was modified 1 year, 9 months ago by ingenuitor.

Hello,

Thank you for the information.

Try to add the following code snippet to the existing CSS and test how it works

body .product-grid-item .product-image-link {
	position: static;
}

Kind Regards

@admin, @egemenkalecik ok that was simpler fix than we expected and yet we did not get this on our own, calling the body tag seems be the factor that overrides other css rules.

So I do say thank you for this, it’s working normally again in 7.1.3. I trust this will be a standard in the near future as a future patch, built into the theme as others are looking for this and it’s a vital display need.

Many themes already have this built in as an option and/or it’s just a default setting out of the box, please google this and also look at the standard code above provided, that is used in many themes, the css flex model, seems to be the best way, even Elementor is switching this over time.

REF the full working code, please tweak as needed for your use case.

/*category carousel*/

.category-grid-item .category-image{
	display: inline;
	margin: auto;
}
.carousel-items .owl-item .category-grid-item.product-category .category-image-wrapp{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
} 
.carousel-items .owl-item .category-grid-item.product-category .category-image-wrapp IMG{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
}
	 
/*store product grid items*/

body .product-grid-item .product-image-link {
	position: static;
}
	
.products .product-grid-item{
	display: block;
	position: relative;
	width: 100%;
}
.products .product-grid-item .product-element-top{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.products .product-grid-item IMG{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
}
.products .product-grid-item IMG{
	display: block;
	width: 100%;
	max-height: 100%;
}

Thank you again for your efforts in this and all the best. 🙂

Hello,

We are always happy to help :)Thank you for posting the solution here.
Feel free to contact us if you have any further questions.

Kind Regards

@admin Can we expect to see this or a version of this idea in a future patch and or update. Hence forth we can remove custom rules in the future if and when required? Thank you.

We will review and consider this as a feature request.

Please do let me know here if there are any changes with this as this is a standard by so many themes, just not this one, for some odd reason. We need to can keep a clean de-cluttered css / js / php code base as much as we can, less is always more. Thank you.

Has this issue been solved by default now? Thank you.

Hello,

At this moment, we haven’t implemented any functionality related to the solution provided above.

Kind Regards

Has this issue been solved by default now? Is this a default yet, as it’s in just about every theme now and we really want to remove any unneeded code to keep things clean. Thank you.

Hello,

Currently, we decided not to add this option because it would be better to use the WooCommerce crop function. So if you want to crop it with CSS you will need to keep this custom CSS.

Kind Regards

[Author]

Posts