Move Button On Featured Collection To The Top

[NinoB97]

How can i move the button that says ''Álles Bekijken'' to the top Above my products under the text ''Meest verkocht''

i have tried multiple codes but they didnt work for me so thats why am asking, would really appreciate the help !

[BSSCommerce-B2B · Accepted solution]

Hi @NinoB97 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
    div#collection-template--23130500792660__featured_collection {
        display: flex !important;
        flex-direction: column !important;
    }

    .center.collection__view-all.scroll-trigger.animate--slide-in {
        order: 0;
    }

    slider-component.slider-mobile-gutter.slider-component-full-width.page-width.scroll-trigger.animate--slide-in {
        order: 1;
    }
}

In this step, I edit css only mobile view screen.

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
.collection__title.title-wrapper {
margin-bottom: 0 !important;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Small_Task_Help]

Hi,

Can you please share your store URL?

[BSSCommerce-B2B · Accepted solution]

Hi @NinoB97 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
    div#collection-template--23130500792660__featured_collection {
        display: flex !important;
        flex-direction: column !important;
    }

    .center.collection__view-all.scroll-trigger.animate--slide-in {
        order: 0;
    }

    slider-component.slider-mobile-gutter.slider-component-full-width.page-width.scroll-trigger.animate--slide-in {
        order: 1;
    }
}

In this step, I edit css only mobile view screen.

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[NinoB97]

this worked, great!

[NinoB97]

i want the button and text closer to each other so its more lined can you help me out? i want it like this:

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
.collection__title.title-wrapper {
margin-bottom: 0 !important;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSSCommerce-B2B · Accepted solution]

Hi @NinoB97 , 

We're happy to see that our suggestion helped you solve the issue. 

If you want the button and text closer to each other so its more lined, you add this css snippets on previous my customize comment.

.collection__title.title-wrapper {
    margin-bottom: -5px;
}

Save and reload page

The result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

[NinoB97]

@BSSCommerce-B2B 

[BSSCommerce-B2B]

Dear my friend @NinoB97 , 

We're happy to see that our suggestion helped you solve the issue.

This can be a reference for other merchants if they have an issue like you.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post.

We will check and let you know soon.

Thanks in advance.

[niraj_patel]

Hello @NinoB97 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.section-template--23130500792660__featured_collection-padding{
position: relative;
}
#shopify-section-template--23130500792660__featured_collection h2.title.inline-richtext{
position: absolute;
bottom: 63%;
z-index: 99;
left: 94px;
color: #fff !important;
}
#shopify-section-template--23130500792660__featured_collection .center.collection__view-all{
position: absolute;
top: -2px;
left: 0;
right: 0;
}
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.