[Theme: Editions] Homepage, Add 3-Column Container

Store Design
1

theme: Editions
shop URL: the-purpose-coffee-co.myshopify.com

attempted to use the solution from the following thread (i know, no-no), but will refer to it:

https://community.shopify.com/post/1155594

goal:
on the homepage, to create a container with 3 columns containing 3 rich text sections.
they need to optimize so on desktop they will array horizontally, and on mobile they will stack vertically.

the code from the referenced solution didn’t work for the Editions theme.
possibly because the CSS file is not theme.css but theme.css.liquid ?

anyway, tried adding the code as per the solution both before AND after adding the rich text sections on the homepage, but neither scenario worked.
so clearly the solution was specific to the Brooklyn theme.

any help to make it work in the Editions theme would be much appreciated.

screen cap below shows the stacked rich text sections we’re seeking to array across 3 columns.

2

@PurposeCoffee - add following css to the very end of theme.css file and check, it looks like screnshot below, if you have more queries you can contact me on my email given below.

@media screen and (min-width:768px){

#shopify-section-16213958819e3b1509{float: left;    width: 33.33%;}
#shopify-section-16213976656fe8a405{float: left;    width: 33.33%;}
#shopify-section-1621397734f38bb4b4{float: left;    width: 33.33%;}
.template-index .shopify-section-static-footer{clear: both;}

}

suyash1_0-1621404436700.png
suyash1_0-1621404436700.png1366×768 163 KB

3

thank you - really appreciate the solution you provided!

however:

2 sections follow the 3-column row - the 2nd clears fine, but the section following it is not clearing.

screen cap:

4

@PurposeCoffee - add this, see the very next section to these 3 sections, wherever it is, will need clearing

#shopify-section-16214053928239afe6{clear: both;}
5

perfect! like a boss! thank you!