Adding columns to blog post (Debut theme)

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! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like

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.