Skip to content

Commit 1063850

Browse files
zanileezanilee
committed
MAGETWO-45095: Product base images aren't centered in Wish List on Storefront
1 parent 08b6a7f commit 1063850

File tree

4 files changed

+185
-71
lines changed

4 files changed

+185
-71
lines changed

‎app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less

Lines changed: 82 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -291,24 +291,16 @@
291291
width: 100%/3;
292292
}
293293

294-
.page-layout-1column .products-grid .product-item {
295-
width: 100%/3;
296-
}
297-
298-
.page-layout-3columns .products-grid .product-item {
299-
width: 100%/3;
300-
}
301-
302-
.page-products .products-grid .product-item {
303-
width: 100%/3;
304-
}
305-
306-
.page-products.page-layout-1column .products-grid .product-item {
307-
width: 100%/3;
308-
}
309-
310-
.page-products.page-layout-3columns .products-grid .product-item {
311-
width: 100%/3;
294+
.page-products,
295+
.page-layout-1column,
296+
.page-layout-3columns,
297+
.page-products.page-layout-1column,
298+
.page-products.page-layout-3columns {
299+
.products-grid {
300+
.product-item {
301+
width: 100%/3;
302+
}
303+
}
312304
}
313305
}
314306

@@ -317,49 +309,95 @@
317309
// _____________________________________________
318310

319311
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
320-
.page-products .products-grid .product-item {
321-
width: 100%/3;
312+
.page-products {
313+
.products-grid {
314+
.product-item {
315+
width: 100%/3;
316+
}
317+
}
322318
}
323319

324-
.page-products.page-layout-1column .products-grid .product-item {
325-
width: 100%/4;
320+
.page-products.page-layout-1column {
321+
.products-grid {
322+
.product-item {
323+
width: 100%/4;
324+
}
325+
}
326326
}
327327

328-
.page-products.page-layout-3columns .products-grid .product-item {
329-
width: 100%/2;
328+
.page-products.page-layout-3columns {
329+
.products-grid {
330+
.product-item {
331+
width: 100%/2;
332+
}
333+
}
330334
}
331335
}
332336
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
333-
.products-grid .product-item {
334-
width: 100%/5;
337+
.products-grid {
338+
.product-item {
339+
width: 100%/5;
340+
}
335341
}
336342

337-
.page-layout-1column .products-grid .product-item {
338-
width: 100%/6;
343+
.page-layout-1column {
344+
.products-grid {
345+
.product-item {
346+
width: 100%/6;
347+
}
348+
}
339349
}
340350

341-
.page-layout-3columns .products-grid .product-item {
342-
width: 100%/4;
351+
.page-layout-3columns {
352+
.products-grid {
353+
.product-item {
354+
width: 100%/4;
355+
}
356+
}
343357
}
344358

345-
.page-products .products-grid .product-items {
346-
margin: 0;
347-
}
359+
.page-products {
360+
.products-grid {
361+
.product-items {
362+
margin: 0;
363+
}
364+
.product-item {
365+
margin-left: calc(~"(100% - 4 * 23.233%) / 3");
366+
padding: 0;
367+
width: 23.233%;
348368

349-
.page-products .products-grid .product-item {
350-
margin-left: calc(~"(100% - 4 * 23.233%) / 3");
351-
padding: 0;
352-
width: 23.233%;
353-
&:nth-child(4n+1) {
354-
margin-left: 0;
369+
&:nth-child(4n+1) {
370+
margin-left: 0;
371+
}
372+
}
355373
}
356374
}
357375

358-
.page-products.page-layout-1column .products-grid .product-item {
359-
width: 100%/5;
360-
}
376+
.page-products {
377+
&.page-layout-1column {
378+
.products-grid {
379+
.product-item {
380+
margin-left: 0;
381+
width: 100%/5;
382+
}
383+
}
384+
}
385+
386+
&.page-layout-3columns {
387+
.products-grid {
388+
.product-item {
389+
margin-left: 1%;
390+
width: 32.667%;
361391

362-
.page-products.page-layout-3columns .products-grid .product-item {
363-
width: 100%/4;
392+
&:nth-child(3n) {
393+
margin-left: 1%;
394+
}
395+
396+
&:nth-child(3n+1) {
397+
margin-left: 0;
398+
}
399+
}
400+
}
401+
}
364402
}
365403
}

‎app/design/frontend/Magento/blank/Magento_Wishlist/web/css/source/_module.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,6 @@
231231
.products-grid {
232232
.product-item {
233233
margin-bottom: @indent__base;
234-
width: 50%;
235234
}
236235
.product-item-actions {
237236
margin: 0;

‎app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less

Lines changed: 101 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -300,40 +300,120 @@
300300

301301
.products-grid {
302302
.product-item {
303-
width: 100%/3;
304303
margin-bottom: @indent__base;
304+
width: 100%/3;
305305
}
306306
}
307307

308-
.page-layout-1column .products-grid .product-item { width: 100%/3 }
309-
.page-layout-3columns .products-grid .product-item { width: 100%/3 }
310-
.page-products .products-grid .product-item { width: 100%/3 }
311-
.page-products.page-layout-1column .products-grid .product-item { width: 100%/3 }
312-
.page-products.page-layout-3columns .products-grid .product-item { width: 100%/3 }
308+
.page-products,
309+
.page-layout-1column,
310+
.page-layout-3columns,
311+
.page-products.page-layout-1column,
312+
.page-products.page-layout-3columns {
313+
.products-grid {
314+
.product-item {
315+
width: 100%/3;
316+
}
317+
}
318+
}
313319
}
314320

315321
//
316322
// Desktop
317323
// _____________________________________________
318324

319325
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
320-
.page-products .products-grid .product-item { width: 100%/3 }
321-
.page-products.page-layout-1column .products-grid .product-item { width: 100%/4 }
322-
.page-products.page-layout-3columns .products-grid .product-item { width: 100%/2 }
326+
.page-products {
327+
.products-grid {
328+
.product-item {
329+
width: 100%/3;
330+
}
331+
}
332+
}
333+
334+
.page-products.page-layout-1column {
335+
.products-grid {
336+
.product-item {
337+
width: 100%/4;
338+
}
339+
}
340+
}
341+
342+
.page-products.page-layout-3columns {
343+
.products-grid {
344+
.product-item {
345+
width: 100%/2;
346+
}
347+
}
348+
}
323349
}
350+
324351
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
325-
.products-grid .product-item { width: 100%/5 }
326-
.page-layout-1column .products-grid .product-item { width: 100%/6 }
327-
.page-layout-3columns .products-grid .product-item { width: 100%/4 }
328-
.page-products .products-grid .product-items { margin: 0; }
329-
.page-products .products-grid .product-item {
330-
margin-left: calc(~"(100% - 4 * 24.439%) / 3");
331-
padding: 0;
332-
width: 24.439%;
333-
&:nth-child(4n+1) {
334-
margin-left: 0;
352+
353+
.products-grid {
354+
.product-item {
355+
width: 100%/5;
356+
}
357+
}
358+
359+
.page-layout-1column {
360+
.products-grid {
361+
.product-item {
362+
width: 100%/6;
363+
}
364+
}
365+
}
366+
367+
.page-layout-3columns {
368+
.products-grid {
369+
.product-item {
370+
width: 100%/4;
371+
}
372+
}
373+
}
374+
375+
.page-products {
376+
.products-grid {
377+
.product-items {
378+
margin: 0;
379+
}
380+
.product-item {
381+
margin-left: calc(~"(100% - 4 * 24.439%) / 3");
382+
padding: 0;
383+
width: 24.439%;
384+
385+
&:nth-child(4n+1) {
386+
margin-left: 0;
387+
}
388+
}
389+
}
390+
}
391+
392+
.page-products {
393+
&.page-layout-1column {
394+
.products-grid {
395+
.product-item {
396+
margin-left: 0;
397+
width: 100%/5;
398+
}
399+
}
400+
}
401+
402+
&.page-layout-3columns {
403+
.products-grid {
404+
.product-item {
405+
margin-left: 1%;
406+
width: 32.667%;
407+
408+
&:nth-child(3n) {
409+
margin-left: 1%;
410+
}
411+
412+
&:nth-child(3n+1) {
413+
margin-left: 0;
414+
}
415+
}
416+
}
335417
}
336418
}
337-
.page-products.page-layout-1column .products-grid .product-item { width: 100%/5 }
338-
.page-products.page-layout-3columns .products-grid .product-item { width: 100%/4 }
339419
}

‎app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/_module.less

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -244,10 +244,6 @@
244244
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
245245
.wishlist-index-index {
246246
.products-grid {
247-
.product-item {
248-
margin-bottom: 20px;
249-
width: 50%;
250-
}
251247
.product-item-actions {
252248
margin: 0;
253249
}
@@ -344,9 +340,10 @@
344340
}
345341
.product-item {
346342
margin-bottom: @indent__base;
347-
margin-left: calc(~"(100% - 4 * 24%) / 3");
343+
margin-left: calc(~"(100% - 4 * 24.439%) / 3");
348344
padding: 0;
349345
width: 24.439%;
346+
350347
&:nth-child(4n+1) {
351348
margin-left: 0;
352349
}

0 commit comments

Comments
 (0)