2

Can anyone please help? My category page is seriously messing with me. I set the image width to 300px which it accepts. However it doesn't accept me changing the size of the grid. So basically, It shows as much of the 300px that it can fit into the grid and slices my images in vertically.

http://www.ellamatthew.com/dresses

.products-grid li.item {width: 300px;} 
.products-grid .product-image { display:block; text-decoration:none !important; margin:0 auto 10px; position:relative; width:300px; }

Is there anything else here I should be changing? Any help here would be very useful.

Thanks

Mufaddal
  • 5,398
  • 7
  • 42
  • 57
Lola
  • 27
  • 8

1 Answers1

1

first of all your div

.col2-right-layout .products-grid li.item, .col2-left-layout .products-grid li.item

is not content width:300px; it is 160px

second major problem is with your images width it contents white space from both left and right side so it is display like this disturb alignment.

i would suggest you to remove white space or make 300px box for product so you can adjust it in your layout.

let me know if i can help you more.

liyakat
  • 11,825
  • 2
  • 40
  • 46
  • Hi Liyakat, Oh my goodness. Thanks so for your response. Well, the image is now showing in full. I just need to work on the spacing a bit so that all 4 images can fit on the same line and not 3 on 1 line and 1 on the next!! You've helped me out a lot here. Thank you so much!! – Lola Jul 02 '13 at 10:09
  • PS: I wish I was this good at reading CSS. I've been looking at this page for days now! Thanks again. – Lola Jul 02 '13 at 10:10
  • welcome @user2467004 i am really glad to help you, please vote up my answer to make it use full to other which might be related issue in future. – liyakat Jul 02 '13 at 10:16
  • Thank you Liyakat. I couldn't vote up before but Stack Overflow just gave me new privileges thanks to you. Voted you up now!! :) – Lola Jul 02 '13 at 10:21