Coding advice: Creating 3 Columns on Homepage using either Rich Text Element or Image with Text Elem

Freddie-Nova
Tourist
12 1 1

Hi,

I am using the Brooklyn theme for my site.

I have been able to create 3 columns of text on the home page constructed out of Rich Text sections using this section of coding from my previous post:

https://community.shopify.com/c/Shopify-Design/Add-2-or-3-columns-to-Rich-Text-Section-on-Homepage-B...

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

}
}

And the following to decrease the width of each section because columns appeared to wide:

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

 

The objective was

  1.  To create for the desktop site 3 columns that appeared on the homepage like this (see image below).

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

Freddie-Nova_1-1619862355881.png

  1. To create for the mobile site 3 columns that appear like this (see image below) taking into account the mobile responsiveness.

Freddie-Nova_2-1619862402272.png

 

As you can see on the image below, I successfully (with the help of the community) created the 3 columns on my site (see image below) for both desktop and mobile.

Freddie-Nova_3-1619862508344.png

 

 

However, as you can see on the example site (https://ambileds.com/), each column on their site has an image placed above it (see image below).

Freddie-Nova_4-1619862597964.png

 

I am looking for the way on how to add an image to each column on my site like this.

This made me wonder, maybe in order to create it like this I should have used the Image with Text element instead of the Rich Text element, the element I used within the above code to create the 3 columns. How do I do this? 

Freddie-Nova_5-1619862701232.png

 

 

KetanKumar
Shopify Partner
17100 1856 6413

@Freddie-Nova 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Freddie-Nova
Tourist
12 1 1

Hi @KetanKumar , 

Thanks for your fast reply. I have been able to solve this problem with some help of the previous Shopify Partner ( @Natztech ) who helped me in my previous post. Want to thank both of you for your fast replies!

0 Likes