Changing the image size and text in the ProductList Component

Bootstrap Studio Help
1

hi

I’m wondering if I could change the ProductList Component image size and text content like the one in the Product component

reflowHQ
reflowHQ882×720 267 KB

In the example image above, ProductList Component images and text is litttle small and I would like the product looks and feel like in a Product component.

Is it possible? Thanks

2

You can try with this CSS
Change the width and font size to your liking

.reflow-product-list .ref-media, .reflow-product-list.ref-cards .ref-media {
  width: 400px;
  height: auto;
}

.reflow-product-list .ref-product-info .ref-name, .reflow-product-list.ref-cards .ref-product-info .ref-name {
  font-size: 2rem;
}
3

Just add this to your css and change the width values to suit your needs


@media (min-width: 1200px){
.reflow-product-list .ref-media {
    width: 10%!important;
}
}
@media (min-width: 992px){
.reflow-product-list .ref-media {
    width: 15%!important;
}
}
@media (min-width: 768px){
.reflow-product-list .ref-media {
    width: 20%!important;
}
}
@media (min-width: 576px){
.reflow-product-list .ref-media {
    width: 30%!important;
}
}
1 Like
4

Thanks for the reply.

Have you consider creating another ProductList component with large picture in it and some realignment of the add to cart button and text? For example, naming it as ProductListXL

I’m suggesting it solely for non programmers perspective.

Thanks