Product Description - Tabs - Blockshop Theme

Highlighted
New Member
17 0 0
Hey, I'm using the blockshop theme for my store and Im facing some design issues that I need quick help with. This is the link to the theme: https://1g96auy1q5zpilit-25528598590.shopifypreview.com. I'm facing an issue with the tabs in product description. I used the html code to get the tabs but the way they look is really bad. They are not aligned well at all - on the phone, laptop or tablets.

This reference store seems to be using the same theme as us but their tabs look much better: https://peachibaby.com/collections/reusable-nappies/products/mushroom-reusable-nappy-set. I would like for the tabs to look as they do in this website.  Please refer to the laptop mode only - the mobile changes to accordion.

This is the HTML code I am currently using in order to get the tabs option for product description. The problem is it looks messy and is not aligned well.  I am not sure if i should be editing this HTML code thats inputted on the product page or the main .css code. Would really appreciate the help! Here is the link to our website: https://7i0tri9tkrkybnkn-25528598590.shopifypreview.com

 

<ul class="tabs-horizontal headings">
    <li>Tab 1 title </li>
    <li>Tab 2 title </li>
    <li>Tab 3 title</li>
</ul>
<ul class="tabs content">
    <li>
        <p>Content for tab 1...</p>
    </li>
    <li>
        <p>Content for tab 2...</p>
    </li>
    <li>
        <p>Content for tab 3...</p>
    </li>
</ul>

 

Co
Thank you!

Thank you,

Shreya

0 Likes