0

This is regarding a default MAGENTO WIDGET - "Add to Cart" is overlapping price.

I edited Styles.css, but it only changed Category Page Product Positioning.

Need to know which file to edit to change Positioning of the "Add to Cart"

More information: I added the widget through CMS -> Widgets and put it on the homepage. The CSS and how products look for Category pages are perfect, and don't seem to be related to the Widget Product grid.

CSS of the Widget found, but did not find "Add to Cart" positioning:

/skin/frontend/base/default/css -> Widget.css /* Widget: Catalog New Products List */

.widget-new-products { display:block; }

.col-main .widget-new-products { margin:7px 0; }

.widget-new-products .products-grid .product-image,

.widget-new-products .products-list .product-image { width:85px; height:200px; }

.widget-new-products .products-list .product-shop { margin-left:100px; }

.sidebar .widget-new-products .block { font-size:11px; line-height:1.25; }

.sidebar .widget-new-products .block-title strong { background:url(../images/widgets /i_widget-new.gif) 0 1px no-repeat; padding-left:21px; color:#dc5033; }

How do I move the Add to Cart to stay inside the product box, and set the box to be a specific height (all 1 size)?(and remove "Add to Compare")

This is specific to the homepage Magento New Products List Widget - style.css doesn't seem to be changing the widget products (Website)

closed as off-topic by Dexter, dh47, Fabian Blechschmidt, Keyul Shah, Vladimir Kerkhoff Feb 14 '15 at 10:47

  • This question does not appear to be about the Magento e-Commerce platform within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 4
    I'm voting to close this question as off-topic because it is about CSS – Dexter Feb 14 '15 at 6:24
  • Guys. This is specific to Magento Platform seeing as the Widget is made by magento. I don't see why you guys are attempting to put this on hold. "Magento Stack Exchange is for users of and developers working with the Magento e-Commerce platform. Questions which involve custom code or extensions should include relevant code and, where applicable, an indication that the custom coder or extension vendor has been contacted for support." – JasonC91 Feb 14 '15 at 11:51
  • Like seriously, how do you guys even think this should be off-topic? CSS is in relation to overall CSS of website - This is specific to the Magento platform and that widget. – JasonC91 Feb 14 '15 at 12:05
1

On your .actions box you have

/* styles.css:2566 */

.products-grid .actions {
    height: 26px;
    position: absolute;
    bottom: 10px;
}

These lines are causing the behaviour you don't want.

If you remove all of them, both button and "Add to wishlist" are inside the item container.

Update: Just removing them will break your category pages.

Instead, try to add position:relative and padding-bottom: 85px to .col1-layout .products-grid li.item, .col2-left-layout .products-grid li.item, .col2-right-layout .products-grid li.item

You'll have to figure out the details yourself, hope I got you in the right direction.

Update 2:

Try this in addition to your existing styles:

.widget-new-products .item { 
    position: relative;
    padding-bottom: 45px;
}

.widget-new-products .products-grid .product-image {
    height: 85px;
}

.widget-new-products .product-name { 
    height: 3em;
}

.widget-new-products .price-box { 
    height: 4em;
}

.widget-new-products .actions { 
    height: 25px;
}

.widget-new-products .add-to-links { 
    display: none;
}
  • Hi thank you for the help, I adjusted the position: Relative, but it messed up the category pages. I previously set them all to absolute because the category page product positioning was messy. I am just confused why the homepage widget's products are not positioned the way it should be. I'm thinking it may be because the box is smaller than it is set on the category pages? Any other thoughts would be great. Thanks again – JasonC91 Feb 14 '15 at 10:12
  • After playing around with the box size, it appears to be a different set of CSS rules for the homepage widget. I just don't know where to find that file - It is Magento's New Product List widget (Comes standard with every Magento). Any more pointers would be great – JasonC91 Feb 14 '15 at 10:26
  • 1
    Updated my answer with Update 2. Hope it helps. – Jan Papenbrock Feb 14 '15 at 12:08
  • Wow dude you're a hero! I added it to the widget.css file and it looks perfect! THANKS SO MUCH I OWE YOU ONE! – JasonC91 Feb 14 '15 at 12:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.