kubrina
1
Hi Shopify experts,
I’m trying to add four Buy buttons with pictures to a blog post (Debut theme).
I found a pretty good method in https://www.envision.io/blogs/ecommerce-pulse/28829761-how-to-create-two-columns-of-text-on-pages-in-shopify, but I’m having trouble implementing it.
The post supplies some code which is to be added to style.css.liquid. However, I can’t find this file.
Here’s the code:
.one-third-column {
width:32%;
margin-right:2%;
float:left;
}
.one-third-column-last {
width:32%;
margin-right:0;
float:right;
}
@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right,
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}
Where would I add that in a store that uses Debut theme?
Thanks in advance for all your help!
AK
1 Like
@kubrina
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
1 Like
kubrina
3
Hello @KetanKumar
Our shop is at revoderm.com.
Thank you.
1 Like
@kubrina
thanks for the details do you have like this!
1 Like
Hi @KetanKumar ,
Yes, of course. That is our blog page.
So we already have the correct CSS! I just need to create the and reference the class.
Is that right?
@KetanKumar
But I’m still not sure how to build the and reference the classes in HTML.
I think the CSS selectors are:
.one-quarter (for desktop)
.small–one-quarter (for mobile)
The
structure for a single buy button is:
// <![CDATA[
etc.
But how do I set up four of these side by side and reference the proper classes?
Is it as follows?
// <![CDATA[
etc.
// <![CDATA[
etc.
// <![CDATA[
etc.
// <![CDATA[
etc.