Make featured collection full width

Shopify Discussion
1

I would like to know if anyone can help me get full width on my featured collection. Now its like this:

Skärmavbild 2023-04-25 kl. 13.42.33.png
Skärmavbild 2023-04-25 kl. 13.42.33.png4112×2192 325 KB

URL: www.doglegstore.com

Password: Hundben2022

thank you in advance,

Gustav

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.shopify-section--featured-collection .section-blends scroll-carousel {
    padding: 0;
}
1 Like
3

Hi ZestardTech,

Thank you very much for your quick response and solution; it improved it.

But is it possible to make it “fullscreen” so it’s no gap above, under, and between the products, if you understand what I mean?

Best,

Gustav

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.shopify-section--featured-collection product-list.product-list {
    gap: unset;
}
.shopify-section--featured-collection .section.section-blends.section-full {
    padding-block-start: 0;
    padding-block-end: 0;
}
1 Like
5

Wow, thank you, it worked!

Skärmavbild 2023-04-25 kl. 15.23.28.png
Skärmavbild 2023-04-25 kl. 15.23.28.png4104×1284 183 KB

Last detail… How do I make the title and price appear only when the product is being hovered on? Now it looks a bit strange, as shown above.

1 Like
6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.product-card.product-card.product-card--blends.product-card--show-secondary-media.bg-custom.text-custom:hover .product-card__info.product-card__info--center {
    display: block;
}
.product-card__info.product-card__info--center {
    display: none;
}
1 Like
7

Thank you! Now it looks fire!

The only thing is that it looks weird while scrolling on mobile. Is it possible to fix that? So that you see the price under the product, as you cannot hover on a mobile?

Thank you.

1 Like
8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:

Remove this css.

.product-card.product-card.product-card--blends.product-card--show-secondary-media.bg-custom.text-custom:hover .product-card__info.product-card__info--center {
    display: block;
}
.product-card__info.product-card__info--center {
    display: none;
}

And add this css.

@media (min-width: 768px) {
.product-card.product-card.product-card--blends.product-card--show-secondary-media.bg-custom.text-custom:hover .product-card__info.product-card__info--center {
    display: block;
}
.product-card__info.product-card__info--center {
     display: none;
}
}