Return to previous page

Related products title and add to basket out of sync

This topic has 21 replies, 3 voices, and was last updated 9 years, 7 months ago ago by Brian Johnson

Jimbo

Participant

April 7, 2015 at 16:11

Hi,

On the iPad in portrait mode I notice the related products at the bottom of the single product page are out of sync, the add to basket boxes are all different heights, please see image below.

I would like the add basket buttons to be in alignment on same line.

Please, contact administrator
for this information.

#55411 Copied

20 Answers

Brian Johnson

Member

April 7, 2015 at 16:31

Hello

Please use this code in custom.css:
.carousel-area .product-title{width:150px!important;margin-left:auto;margin-right:auto}

With best reagrds
Brian Johnson

#55421 Copied

Jimbo

Participant

April 7, 2015 at 16:51

Sorry but that didn’t work!

I think the problem is the length of the title of the product when it goes to the second line if longer.

If a shorter title this is when the add to cart box goes out of alignment, it does this on iPad in portrait mode.

Unsure if something could be added for iPad in portrait mode to make title a minimum line height when title only on one line?

#55427 Copied

Eva Kemp

Support staff

April 8, 2015 at 09:35

Hello,

As I see now the titles are shown in one line:
http://storage4.static.itmages.com/i/15/0408/s_1428482052_6231455_8ddc725ec4.png

Please clear browser cache and check.

Thank you.
Regards,
Eva Kemp.

#55527 Copied

Jimbo

Participant

April 8, 2015 at 10:48

sorry but still no change.

the problem occurs when the title is shorter than others i.e. title is only on one line?

this is when using the iPad in portrait mode only – fine on desktop on larger resolution.

see image

#55558 Copied

Jimbo

Participant

April 8, 2015 at 16:08

Hello? any help on this please?

Line height issue?

#55689 Copied

Brian Johnson

Member

April 8, 2015 at 16:23

Please try add following code to the one i previosly wrote above:
.carousel-area .product-content-image {height:160px}

With best regards
Brian Johnson

#55698 Copied

Jimbo

Participant

April 8, 2015 at 22:14

Sorry did not work!

It’s a real shame that related products don’t align, looks messy on iPad in portrait mode.

I did experiment with min-height property but could not get it correct.

The issue seems to be when titles are one line length, then some 2 lines…. this causes the add to cart buttons to be different heights.

#55789 Copied

Jimbo

Participant

April 9, 2015 at 01:10

The link below explains my problem exactly, alignment issues of buttons on related products and product pages.

https://www.skyverge.com/blog/woocommerce-align-add-to-cart-buttons/

#55798 Copied

Eva Kemp

Support staff

April 9, 2015 at 09:33

Hello,

Is your issue resolved now?
As I see the buttons are shown fine even with titles in 2 lines:
http://storage3.static.itmages.com/i/15/0409/s_1428568308_5041643_525381d6e8.png

Regards,
Eva Kemp.

#55880 Copied
Jimbo

Participant

April 9, 2015 at 10:15
I have added this code below which sorts the related products to align but still out slightly on some by a few pixels.
```
.carousel-area .product-title{
min-height:54px !important;
}
```
The main products on the products pages are out of alignment however, the link I posted explains the issue but the code does not match this theme.

Makes the product pages looks messy when out of alignment.
#55887 Copied
Brian Johnson

Member

April 9, 2015 at 10:58
Please try this code:
```
.carousel-area .product-content-image{height:160px!important;}
.carousel-area .product-title{position: absolute;height:10px;bottom:120px;width:100%!important;}
.carousel-area .product-details{padding-top:70px;}
```
With best regards
Brian Johnson
#55905 Copied
Jimbo

Participant

April 9, 2015 at 13:04

Brian,

Thanks a lot ….that seems to have done the trick!

How about products for the products category pages? they are still out of alignment.

** THIS ONLY HAPPENS ON IPAD PORTRAIT SCREEN RESOLUTION WHICH IS 1024PX MAX I THINK? **

#55956 Copied

Brian Johnson

Member

April 9, 2015 at 13:25

You are welcome!

Sorry i have not found such page.Please provide us with the link to the page where layout is broken.

With best regards
Brian Johnson

#55963 Copied

Jimbo

Participant

April 9, 2015 at 14:06

Brian,

link to page in private content

the problem is on the 2nd row of products, when the title length goes to 2 lines it makes the buttons all different heights.

Please, contact administrator
for this information.

#55977 Copied

Jimbo

Participant

April 9, 2015 at 14:19

Brian,

make sure your resolution matches the iPad in portrait mode (1024px and under), if you don’t you wont see the problem.

Thanks

#55981 Copied
Brian Johnson

Member

April 9, 2015 at 14:24
You may try his code:
```
.row products-loop .product-content-image{height:160px!important;}
.row products-loop .product-title{position: absolute;height:10px;bottom:100px;width:100%!important;}
.row products-loop .product-details{padding-top:100px;}
```
With best regards
Brian Johnson
#55986 Copied
Jimbo

Participant

April 9, 2015 at 14:46

Brian,

that did not work sorry to say, see image below

is this not product-grid ?

#56002 Copied

Jimbo

Participant

April 9, 2015 at 16:28

any luck brian?

#56038 Copied
Jimbo

Participant

April 9, 2015 at 19:50
ok I think I have sorted this myself but thanks with the help with the related products carousel, I got some pointers off the css code to use for all the products so now the add to basket buttons align up …. this is a massive improvement and looks much nicer.

I really advise adding this information to your documentation for other users of the theme to implement, I just had to tweak the height for the images as they were getting cut off!

Code used to make products / titles / buttons stay on the same line (will need adjusting to your needs)
```
.product-content-image {
height: 165px !important;
}
.products-grid .product-title {
position: absolute;
height:10px;
bottom:70px;
width: 100% !important;
}
.content-product .product-details {
padding-top: 55px;
}
```
related products css code was posted earlier on by Brian and is below;
```
.carousel-area .product-content-image{
height:160px!important;
}
.carousel-area .product-title{
position: absolute;
height:10px;
bottom:120px;
width:100%!important;
}
.carousel-area .product-details{
padding-top:70px;
}
```
#56084 Copied
Brian Johnson

Member

April 10, 2015 at 12:19

We are glad that you have found the solution!

With best regards
Brian Johnson

#56191 Copied
Viewing 21 results - 1 through 21 (of 21 total)

The issue related to '‘Related products title and add to basket out of sync’' has been successfully resolved, and the topic is now closed for further responses

Related products title and add to basket out of sync

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection