How can I reduce white space in my Spotlight Theme contact page?

[smd61]

Hey folks! I'm looking to remove some white space in my Spotlight Theme. Right now the page "contact us" has a large amount of white space under the Title. I would love to remove some of it so that it's not so big. Can anyone tell me where/ how to do that? I've tried to find the spot in the page.contact.json but haven't had luck

Do you know this can be done?

Thank you!

[Made4uo-Ribe]

Hi @smd61 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[smd61]

yeah of course
URL-gleamweb.com
Password-peofla

[Made4uo-Ribe · Accepted solution]

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

div#WebPixelsManagerSandboxContainer {
    display: contents !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[smd61]

I added it, but it didn't work

[smd61]

Sorry, need to wait a minute, it's works

[smd61]

Sorry, but it working a little weird, it work 1 time and then nothing, did I past code correctly?

[Made4uo-Ribe]

Would you mind to share the password again? Thanks!

[deezaorganics]

Hi, Can you help with mine please. The space between my header and heading on the mobile site is too big, How do i reduce it please ?

[Made4uo-Ribe]

Would you mind to share your store URL? Thanks!

[deezaorganics]

sure. It's www.deezaorganics.com

[Made4uo-Ribe]

Thanks for the info, I just like to clarify. Do you mean this spaces? 

[deezaorganics]

Yes please. The space between the logo and Botanical Powders

[Made4uo-Ribe]

Thanks, I've already check it. This is the header height. It already overide so what you can do is to locate this code in the base.css. 

But if you lesser the size this would be result;

What I can suggest is to make it display: flex so it would align on the center of social bar and the title. 

.header-wrapper {
    display: flex;
}

And the result is like this. 

But still your choice. 

if you make it like this its not a user friendly, the costumer would be confuse where they will click first. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[deezaorganics]

Thanks a lot! it worked! im trying out both options.. The flex option had the heading too close to the header so i want to try the other one and get customers to try it out. I'll also reduce the font of the text. 

God bless you!

[Made4uo-Ribe]

Welcome, Yes check what is the best suits for you. Please dont forget to Likes. Thanks!

[deezaorganics]

For changing the heading font, Im guessing I need a CSS code. Can you help please?

[ChevalDoré]

Hi @Made4uo-Ribe + @smd61 

quick question to a similar topic - maybe you could help me out please? 

I would love to delete some of the spacing on my About US pages. (Theme: Brooklyn) Attached are two screenshots. 

https://www.chevaldore.com/pages/aboutus

https://www.chevaldore.com/pages/our-gift-to-you-24-month-warranty

Do you have any idea how to change the HTML or the code of the theme? 

Kind regards in advance

Julian 😃 

[Made4uo-Ribe]

Yeah, sure. Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.grid__item.large--four-fifths.push--large--one-tenth h2 {
    margin-bottom: 0px;
} 
.grid__item.large--five-sixths.push--large--one-twelfth .section-header {
    margin-bottom: 0px;
}

And Save. 

Result:

Note: You can paste in the theme.scss.css if you dont find the above mention files. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ChevalDoré]

Mate @Made4uo-Ribe  you are truly a magican! 😄 

Thank you so much it worked straight away. Thanks heaps!! God bless you and I wish you an amazing day ! 

Saludos Julian 😄 

[Made4uo-Ribe]

Welcome, same to you have a nice weekends.

[ChevalDoré]

Hello again @Made4uo-Ribe 

may I ask a similar question please?

I added 4 individual graphics at my ABOUT US Page above the headlines. 

Now I want to delete the extra spacing again. 

The code you recommended to me the last time does not work here unfortunatelly. 

Could you please give me an advice how to delete the extra spacing in the picture please? 

Thanks heaps in advance and have an excellent day! 

Saludos Julian 

[Made4uo-Ribe]

Yeah sure. You can just add margin-top on the 1st code.That i give, like this. 

.grid__item.large--four-fifths.push--large--one-tenth h2 {
    margin-top: 0px;
    margin-bottom: 0px;
} 
.grid__item.large--five-sixths.push--large--one-twelfth .section-header {
    margin-bottom: 0px;
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ChevalDoré]

Thank you so much @Made4uo-Ribe 

Your a legend!! 🙂