How to make these swatches stretch horizontally across this tab instead of vertically?

[vehevince]

As the title states, I'm trying to figure out how to make these swatches stretch horizontally instead of vertically across. Also if there's a way to make them clickable or when I hover over them, to make them larger. Thank you. 

 

[Dan-From-Ryviu]

Hi @vehevince 

Please share that page link 

[vehevince]

https://goodlandsupplyco.com/collections/unisex-demo-collection/products/unisex-happy-stripe-hoody

[vehevince]

Did that link work?

[Dan-From-Ryviu]

Please give me password protected 

[vehevince]

awdeeb

[Dan-From-Ryviu]

Please add this code to bottom of your base.css file in Online store > Themes > Edit code. 

.product__description-container .rte img { display: inline-block; }

Also, they are images, not color swatches

[vehevince]

Unfortunately that didn't work. Am I pasting the code in the wrong area? I'm in base.css

 

[Dan-From-Ryviu]

You added code in @media case, please move it very bottom of your file

[vehevince]

Still the same results unfortunately. What am I doing wrong? Thanks for your help by the way. 

[Dan-From-Ryviu]

Go to your theme.liquid file and add this code before </head> tag 

<style>
.product__tab .rte img { display: inline-block; }
</style>

[vehevince]

Here? That didn't solve the issue and now that code is being displayed at the top of the page.

  

[Dan-From-Ryviu]

The code should be like this 

<style>
.product__tab .rte img { display: inline-block; }
</style>

[vehevince]

That worked! Thank you so much, I appreciate your help a lot and hope you have a nice day 🙂

[Dan-From-Ryviu]

You are very welcome

[vehevince]

It's happening again! 

 

[Dan-From-Ryviu]

Please send me that page URL?

[vehevince]

https://goodlandsupplyco.com/pages/resources

[vehevince]

Hi sorry to bother you but have you found a solution yet?

[Dan-From-Ryviu]

Hi, that page return 404 not found.