CSS

[DanteJacobsson]

Hi, I'm trying to change the location of the "soldout" banner that pops up right under the item-picture. This is when I'm on the main-page, since I have added a featured collection on the main-page. 

I have edited the CSS for item/card: title & price, to make the text align to the center of the page. However, I'm still trying to figure out how to make the same on the soldout banner. 

So far I have managed to edit the prior edits directly on the webshop editor, under "edit CSS" (on the chosen section). 

Any tips? 

[Made4uo-Ribe]

Hi @DanteJacobsson 

Which location you like to change the badge, it in the center? Would you mind to share yur store URL? Thanks!

[DanteJacobsson]

Hi, thanks for answering. The page is not live yet. Since we are working for an old friend of ours, that is about to launch some clothes. Therefore we want to solve this before our free trial runs out, and if the result come out goood, we will then subscribe and launch the site via shopify. 

[Made4uo-Ribe]

You can send a preview or pm if you dont like to share in public. Thanks!

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[DanteJacobsson]

thanks for answering Noah. The thing is we don't have it live. So there is no way to acess it right now. Only me and my partner can edit it. 

Can you possibly describe it in here? All the best. 

[PageFly-Noah]

Hi @DanteJacobsson  I'm sorry. Because you need to check the class or id of that button and then add code to align it to the center. Can you send this page url link via private message? everything will be confidential. If I can't test the element I can't come up with the right solution. Hope you understand. Thank you.

[DanteJacobsson]

Sounds good! How do I send a private message in here? 

[PageFly-Noah]

Hi @DanteJacobsson  Iam sorry for delay, can you add code here in file theme.liquid and above </body>:

<style>
.card__information{
       display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
</style>

[EFOLI-Emilia7]

Hello @DanteJacobsson,

For suggesting a possible solution, please share your story URL.

[BSSCommerce-B2B]

Hi @DanteJacobsson ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. 

You need to find the div class wrapping the "soldout banner" and add attribute to center its position. For example:

if that div had class name "soldout-container" 

<div class="soldout-container">
    <div class="soldout-banner">Slutsald</div>
</div>

And the corresponding CSS:

.soldout-container {
    text-align: center;
}

or using flex box to center div: 

.soldout-container {
    display: flex;
    justify-content: center;
    align-items: center; 
}

The above is my suggestion and a similar example, but to do it most accurately, I still need to know the URL link to your store.

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

Have a nice day sir!