Return to previous page

Product image not aligned. - by fredwerk

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

fredwerk

Participant

March 13, 2015 at 16:31

Hi,

When I check the products list in a grid on the front end, the image of the product is not aligned with the name of the product. Maybe I need to reduce the font size of the name? (how?)

Thanks

Please, contact administrator
for this information.

#49433 Copied Theme version: Latest WooCommerce version: Latest

13 Answers

Eva Kemp

Support staff

March 13, 2015 at 18:57

Hello,

Could you please show a screenshot of the issue?
What do you want to modify?

Thank you.
Regards,
Eva Kemp.

#49498 Copied

fredwerk

Participant

March 14, 2015 at 10:11

Hi,

https://www.dropbox.com/s/7xp9hdnv4byi3ge/One%20day%20tours%20%7C%20Product%20Categories%20%7C%20TA%20Scotland.png?dl=0

Sorry my bad for not explaining properly:

In the list view, when I put the mice over the picture, a grey frame appears around the picture and some white space. Is it possible to resize that frame so it only goes around the picture or maybe to remove it? (sorry I am unable to take a screenshot of the frame due to disappearing when I remove the mice).

As well, I would like to move the product name and below text nearer to the picture and the VIEW AVAILBILITY button to be on the same line, ideally on the right side of the text.

Many thanks,

Please, contact administrator
for this information.

#49589 Copied
Eva Kemp

Support staff

March 15, 2015 at 12:25
Hello,

I’ve added this code in custom.css file:
```
.products-grid .product:hover {
    border: none;
}
.products-grid .product .product-name {
    width: 200px;
}
```
Please check the page now.

Thank you.
Regards,
Eva Kemp.
#49677 Copied
fredwerk

Participant

March 15, 2015 at 14:51

Hi,

Thanks, but in my second message I rectified what I was trying to say.

Problems are for the list view, not so much the Grid view:

In the list view, when I put the mice over the picture, a grey frame appears around the picture and some white space. Is it possible to resize that frame so it only goes around the picture or maybe to remove it? (sorry I am unable to take a screenshot of the frame due to disappearing when I remove the mice).

As well, I would like to move the product name and below text nearer to the picture and the VIEW AVAILBILITY button to be on the same line, ideally on the right side of the text.

Many thanks,

#49692 Copied
Eva Kemp

Support staff

March 16, 2015 at 14:47
Hello,

Sorry for misunderstanding.
Please try to add this code in custom.css file:
```
.products-list .product .product-image-wrapper {
   width: 150px !important;
}
.products-list .product .product-excerpt {
   margin-top: 70px;
}
```
```
.products-list .product .product-name {
   float: right;
}
.products-list .products-page-cats a {
    float: right;
    margin-left: 800px !important;
}
```
Thank you.
Regards,
Eva Kemp.
#49873 Copied
fredwerk

Participant

March 16, 2015 at 16:33

Hi,

I cannot see this grey frame, thats great, thanks 🙂

However the product title LOCH NESS TOUR has moved to the right (I would like it to the left, beside the picture) and the same for the category ONE DAY TOURS.

Other problem now, the text below ONE DAY TOURS is not aligned anymore with the picture and the button VIEW AVAILABILITY is not beside the text. If possible, i would like this button to be beside the text on the right side, instead of below.

Thanks,

#49917 Copied
Eva Kemp

Support staff

March 16, 2015 at 21:13
Hello,

Sorry, please remove this code:
```
.products-list .product .product-excerpt {
   margin-top: 70px;
}

.products-list .product .product-name {
   float: right;
}
.products-list .products-page-cats a {
    float: right;
    margin-left: 800px !important;
}
```
Could you please show a screenshot how you’d like the text and button to be shown?

Thank you.
Regards,
Eva Kemp.
#49995 Copied
fredwerk

Participant

March 17, 2015 at 16:41

Hi,

Here you go, I hope it helps:

https://www.dropbox.com/s/bq6irjvvj4gn0le/ODT01.jpg?dl=0

Many thanks,

#50242 Copied
Brian Johnson

Member

March 17, 2015 at 17:23
Hello

You may try to add this code into the custom.css:
```
.products-list .add-to-container .button{  position: absolute;
  right: 0;
  top: 55px;}
  .products-list .product .product-image-wrapper{width:auto;}
 .products-list .product .product-name{margin:0;float: none!important;}
  .products-list .products-page-cats a{margin-bottom:0px}
  .products-list .product .product-excerpt {padding-right:170px!important}
```
With best regards
Brian Johnson
#50258 Copied
fredwerk

Participant

March 17, 2015 at 17:51

Hi,

This is perfect. Many thanks.

One last request, how can I put ONE DAY TOURS in Italic?

#50271 Copied

Brian Johnson

Member

March 18, 2015 at 07:14

Please add following code:
.products-list .products-page-cats a{font-style:italic;}

With best regards
Brian Johnson

#50368 Copied

fredwerk

Participant

March 18, 2015 at 16:56

Many thanks Brian, you guys are great 🙂

#50599 Copied

Brian Johnson

Member

March 18, 2015 at 16:59

You are welcome.
We would very much appreciate if you leave a comment and rating for our theme on themeforest

With best regards
Brian Johnson

#50602 Copied
Viewing 14 results - 1 through 14 (of 14 total)