Brooklyn Theme - How to create a two-column static section in Brooklyn Theme

Coffee-Exp
Excursionist
27 0 9

Hey there,

I am a newbie to Shopify and want to create a two-column static section to display the product information stored in meta fields.

Here is the content of my .liquid file in Sections:

<div class="feature-row-2details">
  <div class="feature-row-2details-det">{{product.metafields.coffeeexp.products_details}}</div>
  <div class="feature-row-2details-tip">{{product.metafields.coffeeexp.products_tips}}</div>
</div>

{% schema %}
{
"name": {
"en": "Product - Product Details"
},
"settings": []
}
{% endschema %}

 

Then I try to add the following codes to the file theme.scss.liquid:

.feature-row-2details-det{
width: 70%;
}
.feature-row-2details-tip {
width: 30%;
}

 

However, the output is not same as my expectation.  It shows those information in two separate rows.  I wanna display those two fields into the same row.

Look forward for your help.  Thank you very much!

KetanKumar
Shopify Partner
14160 1649 5080

@Coffee-Exp 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide 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
squadkin
Excursionist
11 4 3

Hello @Coffee-Exp 

You can use CSS Flex property to wrap both column in single row. 

.feature-row-2details{
   display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
   -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.feature-row-2details-det{
    width: 70%;
}
.feature-row-2details-tip {
     width: 30%;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on support@squadkin.com regarding any help
Shopify Partner | Whatsapp : +91 6356 882 809

0 Likes
Coffee-Exp
Excursionist
27 0 9

Hi @KetanKumar 

My site URL is https://coffeeexp.com/.  My Shopify store cannot be shown as my expectation so that I roll back the modification.

Look forward to your advice and solution.

Thank you!

 

0 Likes
Coffee-Exp
Excursionist
27 0 9

Hi @squadkin 

Thanks for your prompt reply.

Let me try to update my CSS file based on your suggestion tomorrow and then get back to you.

Thank you very much!

KetanKumar
Shopify Partner
14160 1649 5080

@Coffee-Exp 

Thanks for the details which section do you need modification?

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