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

[basyg]

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:

I would like to reduce the height of the space in 1 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:

Shop is:

https://basyg.tech/

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

Thanks yall.

[paramSoft]

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;
}
}

[basyg]

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:

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

 

[paramSoft]

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

[basyg]

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:

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

[Rajameltine]

hi

for mobile try this code

@media screen and (max-width:768px) {
.header-logo {
    margin-bottom: 0;
}
}

[paramSoft]

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. 

[basyg]

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

[basyg]

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?

[paramSoft]

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