Solved

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

Freddie-Nova
Tourist
12 1 1

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/

Freddie-Nova_0-1619740103278.png

 



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

Freddie-Nova_1-1619740103300.png

 

 

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. 

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an 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 ; 
    
}
}

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an 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;
}

 

View solution in original post

Replies 11 (11)

Kinjaldavra
Shopify Partner
2302 570 1422

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
Tourist
12 1 1

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

Freddie-Nova_1-1619775357329.png

 

 

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

Freddie-Nova_0-1619775325502.png

 

 

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
Shopify Partner
2302 570 1422

This is an 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
Tourist
12 1 1

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). 

Freddie-Nova_0-1619778505064.png

 

 

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

Freddie-Nova_1-1619778575243.png

 

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

 

Kinjaldavra
Shopify Partner
2302 570 1422

This is an 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
Excursionist
17 0 0

Hi Naztech,

 

I would like to add similar to my store,

 

3 icons with text below each icon

PurposeCoffee
Tourist
6 0 3

@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
Shopify Partner
2302 570 1422

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

KrisG2
Excursionist
34 1 15

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
Excursionist
34 1 15

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

Freddie-Nova
Tourist
12 1 1

@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): 

Freddie-Nova_0-1619778903027.png