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

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

0 Likes
Natztech
Shopify Partner
669 183 442

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

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Freddie-Nova
Tourist
12 1 1

Thanks @Natztech 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! 

0 Likes
Natztech
Shopify Partner
669 183 442

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 ; 
    
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Freddie-Nova
Tourist
12 1 1

Hi @Natztech , 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/

 

0 Likes
Freddie-Nova
Tourist
12 1 1

@Natztech 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

 

0 Likes
Natztech
Shopify Partner
669 183 442

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
damz
Tourist
16 0 7

Hi Naztech,

 

I would like to add similar to my store,

 

3 icons with text below each icon

0 Likes