Add 2 or 3 columns to Rich Text Section on Homepage (Brooklyn)

[Freddie-Nova]

Hi,

I am trying to create 3 columns of text on the home page like in the image below. I am using the Brooklyn theme.

For the desktop site, the 3 columns need to appear like this (see image below). Website URL example: https://ambileds.com/

However, taking into account the mobile responsiveness, for the mobile site, the 3 columns need to appear like this (see image below).

The Theme Editor only allows you to add sections of Rich Text to the homepage stacked horizontally. I am looking for the code which will allow me to create 3 columns of text with image as displayed in the example.

Any help is much appreciated. 

[Kinjaldavra · Accepted solution]

@Freddie-Nova  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 769px){
.template-index .rich-text-section{
    width: 33.33% !important;
    float: left !important;
    padding:12px ; 
}
}

@media only screen and (min-width: 429px) and  (max-width: 769px) {
.template-index .rich-text-section{
    width: 50% !important;
    float: left !important;
    padding:12px ; 
    
}
}

@media only screen and (max-width: 429px){
.template-index .rich-text-section{
    width: 100% !important;
    float: left !important;
    padding:12px ; 
    
}
}

[Kinjaldavra]

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

[Freddie-Nova]

Thanks @Kinjaldavra for responding! 

Website URL: https://sunsetnova.nl/

Password: fahtri 

As you can see on the image below, the Theme Editor only allows me to place 3 separate sections of Rich Text stacked below each other. The objective is to create 3 columns instead for the desktop page. 

However, because of the mobile responsiveness, for the mobile page it needs to be as mentioned before (see image below): 

I came across this site explaining how to add 3 columns to pages in Shopify, however I am not sure whether they are referring to the homepage also: 

https://maximus.agency/how-to-add-2-or-3-columns-to-pages-in-shopify/

Awaiting your reply! 

[Kinjaldavra · Accepted solution]

@Freddie-Nova  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 769px){
.template-index .rich-text-section{
    width: 33.33% !important;
    float: left !important;
    padding:12px ; 
}
}

@media only screen and (min-width: 429px) and  (max-width: 769px) {
.template-index .rich-text-section{
    width: 50% !important;
    float: left !important;
    padding:12px ; 
    
}
}

@media only screen and (max-width: 429px){
.template-index .rich-text-section{
    width: 100% !important;
    float: left !important;
    padding:12px ; 
    
}
}

[Freddie-Nova]

Hi @Kinjaldavra , you are an absolute legend! It worked. I do have a few questions. 

Is there a way to decrease the amount of space between each column (see image below). 

And I am very curious if it is possible to add images above each section as displayed in the image below. 

Website URL example: https://ambileds.com/

[Kinjaldavra · Accepted solution]

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .large--two-thirds {
    width: 100% !important;
}
.template-index  .push--large--one-sixth{
    left: 0  !important;
}

[damz]

Hi Naztech,

I would like to add similar to my store,

3 icons with text below each icon

[PurposeCoffee]

@Kinjaldavra kudos - that is awesome that you provided such a precise solution.

i tried the code within our Editions theme and didn't work, so i'm guessing either the code was specific to the Brooklyn theme, or perhaps because the Editions theme's asset is theme.css.liquid ?

also posting it as a separate question if you wanna jump in there.

thanks in advance.

Mateo - front-end designer

(aside: it's kind of a basic design feature for the builders i've worked with, my 1st shopify gig.)

[Kinjaldavra]

ok please share your site url and if password then provide paassword

[KrisG2]

Hi @Kinjaldavra 

This is a great personalised solution! We are looking to do the same thing on our store, for the 'Why Us' section on the homepage.

Would you be able to help? We want the right text to be three colours side by side that stack on mobile, just like what you did on the original.

Store link: https://thebespokesignhouse.com/

Many thanks,
Kris

[KrisG2]

Thank you for your swift response to help me and my store on this @Kinjaldavra - we really appreciate it!

[Freddie-Nova]

@Kinjaldavra I inspected the elements of the columns sections, and it seems to be that it is the width of each section that is creating the amount of white space (see image below):