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

Solved

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

smd61
Tourist
7 0 1

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

Screenshot.png

Do you know this can be done?

 

Thank you!

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6962 1656 2045

This is an 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:

Made4uoRibe_0-1704244707566.png

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 23 (23)

Made4uo-Ribe
Shopify Partner
6962 1656 2045

Hi @smd61 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
smd61
Tourist
7 0 1

yeah of course
URL-gleamweb.com
Password-peofla

Made4uo-Ribe
Shopify Partner
6962 1656 2045

This is an 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:

Made4uoRibe_0-1704244707566.png

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
smd61
Tourist
7 0 1

I added it, but it didn't work

smd61_0-1704335102570.png

smd61_1-1704335132786.png

 

smd61
Tourist
7 0 1

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

smd61
Tourist
7 0 1

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

smd61_0-1704403612135.pngsmd61_1-1704403639574.png

 

Made4uo-Ribe
Shopify Partner
6962 1656 2045

Would you mind to share the password again? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deezaorganics
Excursionist
25 0 7

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
Shopify Partner
6962 1656 2045

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deezaorganics
Excursionist
25 0 7
Made4uo-Ribe
Shopify Partner
6962 1656 2045

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

Made4uoRibe_0-1704878872637.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deezaorganics
Excursionist
25 0 7

Yes please. The space between the logo and Botanical Powders

Made4uo-Ribe
Shopify Partner
6962 1656 2045

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. 

Made4uoRibe_0-1704895571192.png

But if you lesser the size this would be result;

Made4uoRibe_1-1704895614298.png

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. 

Made4uoRibe_2-1704895838373.png

But still your choice. 

Made4uoRibe_3-1704896014695.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deezaorganics
Excursionist
25 0 7

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
Shopify Partner
6962 1656 2045

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deezaorganics
Excursionist
25 0 7

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

ChevalDoré
Excursionist
35 0 8

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? 

 

To much distance.JPGDistance 2.JPG

 

Kind regards in advance

 

Julian 😃 

 

 

 

 

Made4uo-Ribe
Shopify Partner
6962 1656 2045

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:

Made4uoRibe_0-1713457312108.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ChevalDoré
Excursionist
35 0 8

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
Shopify Partner
6962 1656 2045

Welcome, same to you have a nice weekends.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ChevalDoré
Excursionist
35 0 8

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 

About US - Spacing again.JPG

 

 

Made4uo-Ribe
Shopify Partner
6962 1656 2045

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:

Made4uoRibe_0-1713804722928.png

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ChevalDoré
Excursionist
35 0 8

Thank you so much @Made4uo-Ribe 

Your a legend!! 🙂