Logo and main header panel + Tabs option

[ShreyaCh]

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. 

1. I want to reduce the padding on the top and bottom of the logo, menu bar and the cart - especially on the phone view. How do I do that? 

2. Another issue I'm facing is 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 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. How do i get our tabs to look similar?

3. My variants drop down list seems to be automatically displayed in all caps. How do I change that from automatically changing? 

Thanks in advance!!

Shreya 

[ShreyaCh]

@oscprofessional @suyash1 @AkViradiya 

[suyash1]

@ShreyaCh 

I can help with reducing padding , make drop down variants normal

Also I checked description, your site has tab and reference site has accordion, not sure how to convert tabs to accordion.

[ShreyaCh]

Help with the drop down variants and the header panel would be really appreciated! I wanted to show the reference site in the laptop view - there it has tabs! 

Thanks again!

Shreya

[suyash1]

yes, laptop has tabs, but I am not sure how to convert it into accordion

[suyash1]

@ShreyaCh 

- for reducing space aroung menu/logo/cart on mobile, please add following css to the very end of theme.css file, adjust numbers as per need,

.header--mobile{padding: 0px 16px;}

.main-content {padding-top: 0px;}

- for making variants normal 

.disclosure--toggle{text-transform: none;}

[ShreyaCh]

Hey, I don't want to convert to accordion! I want it to remain in the tabs view on laptop and mobile. The tabs view on the current website is not neat and concise looking. I would like for it to look the way it looks in the reference website. Is that possible?

Thank you!

[ShreyaCh]

Thank you so much for your help! The padding of the header on the mobile has reduced - your fix worked great! 

The variants texts has been fixed in the box but when you pick the drop down to select the option - it's still in all caps. Attached picture below for reference:

Thank you!

Shreya

[ShreyaCh]

Hey, 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 would like for the tabs to look as they do in this website: https://peachibaby.com/products/peaches-reusable-nappy-set. Please refer to the laptop mode only - the mobile changes to accordion. 

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>

Thank you!

Shreya

[AkViradiya]

@ShreyaCh 

 Please share with me the admin username and password.

we will help you.

Thanks

Sky : akviradiya2