mg3ddesign Posted June 27, 2012 Share Posted June 27, 2012 I'm trying to get my Add to Basket Boxes inline horizontally in my new category grid listings. Ive tried changing a lot of the CSS to make 'add to' go to the bottom of the product box but nothing seems to work. You can see what I mean on the following link. It all look a bit messy.. http://indoorxtreme.co.uk/shop/sparring-protection/hand-pads-boxing-gloves/mma.html Any help would be much appreciated. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 27, 2012 Share Posted June 27, 2012 I made some changes to line things up better, too, but I'm not using a default skin any more, so I'm not sure of all I did. I know I added more space for the title by changing from 250 to 260 in styles common.css, so longer titles didn't take up an extra line and mess up the rest of the box. Quote Link to comment Share on other sites More sharing options...
mg3ddesign Posted June 27, 2012 Author Share Posted June 27, 2012 Thanks for the reply, unfortunately having the product name on one line will not work as there are products with reviews and without which changes the distancing. What I need to do is find the CSS code to move the add to basket box to the bottom of the product. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 27, 2012 Share Posted June 27, 2012 I would think there would be a way to add a space holding section in an {if} clause, so the spacing only displays if there is not a review. If all titles use the same spacing the price will line up, and having a space allotted for the review should make the buy button line up. Quote Link to comment Share on other sites More sharing options...
mg3ddesign Posted June 27, 2012 Author Share Posted June 27, 2012 Any help on how to do that? Many thanks Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 27, 2012 Share Posted June 27, 2012 The coding is beyond my skills, but should be doable. We don't get many reviews, because all our items are used. I had to hunt to find one of ours with stars, and I need to line up the box properly, too. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted June 27, 2012 Share Posted June 27, 2012 This may work for you, but I don't use a shipped skin, so I'll have to play a bit more for mine to space consistently. I suspect changing the height here on common.css of your skin/styles might do what you want. div.latest_product { float: left; margin: 5px 15px; height: 235px; padding: 0px; width: 157px; } Quote Link to comment Share on other sites More sharing options...
Guest Viola Posted June 28, 2012 Share Posted June 28, 2012 Try adding the following to common.css on line 425 div.category_product{ position: relative; } on line 432 div.cateogry_product h3{ height: 205px; } There is a rule for "p.buy_button" on line 472, but I don't know if that refers to other buy butons as well, so make a new rule that's more specific. div.category_product p.buy_button{ position: absolute; bottom: 5px; } Quote Link to comment Share on other sites More sharing options...
mg3ddesign Posted June 28, 2012 Author Share Posted June 28, 2012 Perfect, exactly what I wanted. Everything lines up now even the price. Thanks Viola, that has now added to my basic understanding of CSS. Maybe I should go on a course... http://indoorxtreme.co.uk/shop/hand-protection.html Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.