Logo and main header panel + Tabs option

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

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 

 

0 Likes
Highlighted
New Member
17 0 0
Highlighted
Astronaut
978 86 115

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
17 0 0

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

0 Likes
Highlighted
Astronaut
978 86 115
yes, laptop has tabs, but I am not sure how to convert it into accordion
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
Astronaut
978 86 115

@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;}
you are welcome to contact me.
My email - suyash.patankar@gmail.com
Highlighted
New Member
17 0 0

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!

0 Likes
Highlighted
New Member
17 0 0

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:

Screen Shot 2020-11-17 at 8.24.30 PM.png

 

Thank you!

Shreya

0 Likes
Highlighted
New Member
17 0 0

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

0 Likes