How to reduce white space in Supply Theme and add Mouse-Over Colour.

New Member
12 0 0

Hello

I have looked online and seen the white space issue come up many times, I have tried the code on these posts but nothing is working, please advise.

Please see screenshot attached and the two parts labelled 1 and 2:

 

screen space.PNG

I would like to reduce the height of the space in for the desktop version, this doesn't appear in the mobile version as the menu is minimised.

I also need to reduce the height of 2 in the mobile version, it doesn't look so bad on the desktop version but on the mobile version it is massive.

Here is a screenshot of the mobile version:

mobile space.PNG

Shop is:

https://basyg.tech/

I also need to work out 'mouse-over' colour changes for the sites main headings.

Thanks yall.

0 Likes
Shopify Partner
1119 181 458

Please place this code at the end of theme.scss

@media screen and (min-width: 769px) {
.site-header {
    padding: 30px 0px 0px 0px !important;
}
}
@media screen and (max-width: 769px) {
.main-content {
    padding-top: 0px;
}
.site-header {
    padding: 0px;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
New Member
12 0 0

Hi,

I've tried your code and it kinda works, i've just realised something VERY important, edits to code can ONLY be seen for me when I click Save, I've been pasting code and hitting Preview and assuming that would show the new code, I was wrong.

So I'm happy with the space between the bottom of the Header and the top of the Navigation Menu:

Capture_good_spacing.PNG

I still however have quite a bit of white space on the mobile version, please see picture below:

 Capture_mobile_spacing.PNG

 

 

 

0 Likes
Shopify Partner
1119 181 458

 

.site-header .grid--full .large--text-right {
display: none;
}

 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
New Member
12 0 0

Unfortunately that new piece of code completely breaks the site, even when I delete it and save, the errors stays, I also have to delete the previous piece of code in order to get the site back to how it was, which is really odd, having to delete the previous piece of code which looked fine.

Please see below picture of how the site looks with both pieces of code:

new site error.PNG

Here is a picture of how both pieces of code look in the theme.liquid

Capture_code.PNG

 

0 Likes

hi

for mobile try this code

@media screen and (max-width:768px) {
.header-logo {
    margin-bottom: 0;
}
}
Need fastly help, contact me : https://freelancerajameltine.000webhostapp.com/
Besoin d'aide rapidement, faites appel à moi : https://freelancerajameltine.000webhostapp.com/
Email: rajameltine@gmail.com
0 Likes
Shopify Partner
1119 181 458

Please close the last curly bracket of @media screen and (max-width: 768px) . Like this

@media screen and (max-width: 769px) {
// CSS
}


Due to curly bracket is not closed, it is creating issue. 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
New Member
12 0 0

Hi,

I'm very confused now, I don't understand your last message, please let me know what code I should be trying and which combinations from the two advisors, here is what you and your colleague have sent so far:

1. This code is working, it has reduced the spacing between the header and the Navigation menu. But on the mobile version the white space above 'WELCOME TO BASYG' is quite large.

@media screen and (min-width: 769px) {
.site-header {
    padding: 30px 0px 0px 0px !important;
}
}
@media screen and (max-width: 769px) {
.main-content {
    padding-top: 0px;
}
.site-header {
    padding: 0px;
}
}

 

2. This piece of code broke the site.

.site-header .grid--full .large--text-right {
display: none;
}
Copy

 

3. This code also broke the site.

@media screen and (max-width:768px) {
.header-logo {
    margin-bottom: 0;
}
}
Copy
 
4. I don't understand this message, is it for me to paste directly to the bottom of theme.scss or is it a correction to your colleagues code?
@media screen and (max-width: 769px) {
// CSS
}

 

 

Copy
0 Likes
New Member
12 0 0

Can anyone assist with the previous post or, does anyone know how I have a mouse-over colour change for my site using Supply theme?

0 Likes
Shopify Partner
1119 181 458

Please send me your store's collaborate access on parambabla.soft@gmail.com so that i can provide you the solution

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes