How can I adjust the size and alignment of my ATC button on Impulse theme?

English Shopify Shopify Design
1

Hello

How can I align the ATC buttons on my collection page. I am using Impulse theme

https://www.scotthomedelivery.mu/

TBS2022_1-1675087561783.png
TBS2022_1-1675087561783.png1160×814 235 KB

Also why is my ADT button on mobile so big?

TBS2022_2-1675087621219.png
TBS2022_2-1675087621219.png327×560 102 KB

2

Hi @TBS2022 ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.grid-product__meta .grid-product__title {
    height: 40px;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .grid-product input.btn {
        font-size: 10px !important;
        width: 100% !important;
    }
    .grid-product__meta .grid-product__title {
        height: 32px;
    }
}

I hope it would help you

3

superbe

4

on mobile it’s still not aligned though when there is a sale price

TBS2022_0-1675089179768.png
TBS2022_0-1675089179768.png340×756 107 KB

1 Like
5

Hi @TBS2022 ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.collection-grid__wrapper .grid {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.collection-grid__wrapper .grid > * {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
}
.collection-grid__wrapper .grid .grid-product__content {
    width: 100%;
}
.collection-grid__wrapper .grid form {
    width: 100%;
}
@media screen and (max-width: 740px) {
    .collection-grid__wrapper .grid {
         grid-template-columns: 1fr 1fr;
    }
}

I hope it would help you

6

thanks-

7

on another note- would you know how to create ‘Tabs’ for subcollections?

8

@PageFly-Kate

my sub collections have disappeared- is that due to your code??? :disappointed_face:

9

Hi @TBS2022 ,

Where is the sub collection you are talking about? Can you send a link to the page with that part and take a picture of it so I can check it?