Move text below collection image - Atlantic theme

[AU]

Hi I would like to move the Collection Titles below the collection Image on both desktop and mobile while maintaining the font in Atlantic Theme. 
Thank you.

[BSSCommerce-B2B]

Hi @AU , 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

Hope it helps

[Moeed]

Hey @AU 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[AU]

Hi this is the link to store URL: https://aceanduka.com/
Thank you

[BSSCommerce-B2B]

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

Step 2. Find the file theme.css.
Step 3. Add this code to the end of file

.collection  a {
    align-items: end!important;
}

You will get the result

• Desktop:

• Mobile
  

If it helps you, please like and mark it as the solution.

Best Regards

[BSSCommerce-B2B · Accepted solution]

Hi @AU , 

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 theme.css. And add this code snippet to the end of the file.

span.collection-overlay {
    margin-top: 175px !important;
}

Because of when you hover on text, browse button will be display so I choose margin-top : 175px to display both. 

Step 3: Save your code and reload this 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.

Have a nice day sir! 

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @AU  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
  .collection-wrap .collection a{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    padding-bottom: 40px !important;
  }
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly