Return to previous page

Algin product blocks on bottom? - by hiddehoi

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

hiddehoi

Participant

March 30, 2015 at 09:29

Hi,

I have a few products, with different length of names. How can i align them all at the bottom. Look at this picture, that’s what i mean: Click

Many thanks!
Hidde

#53105 Copied Theme version: 3.7

15 Answers

Brian Johnson

Member

March 30, 2015 at 12:08

Hello

Please provide us with the link to your site.

With best regards
Brian Johnson

#53141 Copied

hiddehoi

Participant

March 30, 2015 at 12:17

The url is in the private content section. The products are on the “Webshop” page. I also get a warning from woo that the theme bundles outdated copies. Could you give me a solution for that as well?

Please, contact administrator
for this information.

#53147 Copied
Brian Johnson

Member

March 30, 2015 at 14:14
Hello

You may try to add this code into the custom.css
```
.product-grid .product-information .btn-cont{
		  position: absolute;
;right:0;left:0;bottom:2px!important;
}
.product-information{position:absolute;height:150px;}

.product-grid .product-name a{
	position:absolute;right:0;left:0;
}
.price del{display:table-cell;position:relative !important;}
.price ins{display:table-cell;position:relative !important;}
.price {display: table-cell !important;text-align:center! important;width:100px!important;
	  position: absolute;left:0px;right:0px;margin-left:auto!important;margin-right:auto!important;
  transform: translate(0px, 60px);
}
}
```
With best regards
Brian Johnson
#53199 Copied
hiddehoi

Participant

April 3, 2015 at 11:00
Hello, thanks for your help!
This is what i have right now:
```
.product-grid .product-information .btn-cont{
                  position: absolute;
;right:0;left:0;bottom:10px!important;
}
.product-information{position:absolute;height:170px;}

.product-grid .product-name a{
        position:absolute;right:0;left:0;
}

.price del{display:table-cell;position:relative !important;}
.price ins{display:table-cell;position:relative !important;}
.price {display: table-cell !important;text-align:center! important;width:100px!important;
          position: absolute;left:0px;right:0px;margin-left:auto!important;margin-right:auto!important;margin-top:40px!important;
  transform: translate(0px, 60px);
}
```
This works on the grid mode, but on the list mode the title of the product comes over the description… How to fix that?

Best regards,
Hidde
#54509 Copied
Brian Johnson

Member

April 3, 2015 at 11:16

Please provide us with credentials to pass your security(http://prntscr.com/6oydsy)

With best regards
Brian Johnson

#54511 Copied

hiddehoi

Participant

April 3, 2015 at 11:56

I’m sorry, i disabled the security message. You should be able to visit the website right now.

Many thanks!

#54513 Copied
Robert Hall

Support staff

April 3, 2015 at 12:17
Hello,

Please use this code:
```
.products-list .product-grid .product-information .product-descr{
  margin-top: 30px;
}
```
Regards,
Robert Hall.
#54518 Copied
Brian Johnson

Member

April 3, 2015 at 12:54
Please try this code:
```
@media only screen and (max-width: 976px) and (min-width: 767px){
  .products-list .product-grid  .product-information .btn-cont {top:170px;left:400px;float:right!important;}
.products-list .price{top:140px;margin:0px;left:70px;transform: translate(0px, 0px)}}
.products-list .product-name{margin-bottom:0px!important;}

@media only screen and (max-width: 767px) and (min-width: 480px){
.products-list .product-descr{font-size:9px!important}
.products-list .product-grid  .product-information .btn-cont {top:170px;left:400px;float:right!important;}
.products-list .price{top:170px;left:70px;transform: translate(0px, 0px)}}
.products-list .product-grid .product-name a{width:350px;}
.products-list .product-descr{position:relative!important;margin-top:20px!important;}
.products-list .product-grid .product-information .product-descr{width:80%}
```
With best regards
Brian Johnson
#54522 Copied
hiddehoi

Participant

April 3, 2015 at 14:30

Hi,

Thanks for your time and support, but this last css doesn’t do anything.. I literally copy pasted it.
Could i help you in any other way?

Thanks and best regards,
Hidde

#54536 Copied

Brian Johnson

Member

April 3, 2015 at 15:32

It is adjusting layout for products-list mode on handled devices.

With best regrds
Brian Johnson

#54546 Copied

hiddehoi

Participant

April 9, 2015 at 16:35

Hi,

I’ll need to tweak the css a little bit more, but that should be possible, so many thanks!

Another question, can i show the short product description in the grid mode, and not only in list mode?

Best regards,
Hidde

#56041 Copied

Eva Kemp

Support staff

April 10, 2015 at 08:23

Hello,

Your site is under maintenance mode. Please provide us with wp-admin panel credentials and a screenshot of what you want to achieve.

Thank you.
Regards,
Eva Kemp.

#56132 Copied
Brian Johnson

Member

April 10, 2015 at 08:24
Please try to add this code to the custom.css:
```
.products-grid .product-descr {
  display: block;!important
```
.products-list .product-grid .product-information .product-descr{display:none!important;}
Layout may be broken since we defined height value for the product grid mode.

With best regards
Brian Johnson
#56133 Copied
hiddehoi

Participant

April 11, 2015 at 12:11

Thanks Brian!

I can work with this, many thanks for the theme and the amazing support!

Best regards,
Hidde

#56348 Copied

Brian Johnson

Member

April 11, 2015 at 12:30

Hello

You are welcome!

With best regards
Brian Johnson

#56351 Copied
Viewing 16 results - 1 through 16 (of 16 total)