Adding space between my section on my homepage ( Prestige Theme)

[Kaftandreams]

Hi, 

I would like to add some space between the sections on my homepage 

[Syed_Mustafa]

Hi yes, let me help you kindly do mail me with further details. Thanks and Best Regards

[hannahkate]

Hi could you please help me with adding margin to my page?

https://shop.hannahkateclothing.com

[dmwwebartisan]

@hannahkate 

Please share screenshot What do you want !

Thanks!

[hannahkate]

I have attached screenshots of my homepage. I would like to create space between the slideshow and the picture with text below. the pictures are touching and I would like a little bit of margin above and below the picture of the three girls that will separate the slideshow above from it and the collections below it. Thanks so much! 

[dmwwebartisan]

@hannahkate 

Please add the following code at the bottom of your assets/theme.css file.

@media screen and (min-width: 641px){
.FeatureText--withImage { margin-top: 30px; margin-bottom: 30px;}
}

Hope this works.
Thanks!

[hannahkate]

Hi, just checking to see if you saw my response for the other code? thanks!

[dmwwebartisan]

@Kaftandreams 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[Kaftandreams]

Thank you for your answer 🙏

Here is my website and I would like to add a space between the two first section in the homepage , as you can see they are attached to each other with is not very pleasant .

Hope you can help me

Thank you

www.kaftandreams.com

[dmwwebartisan]

@Kaftandreams 

I understand but for the confirmation, Can you please provide a screenshot where you want a gap ?

It will be helpful.

Thanks!

[Kaftandreams]

Thank you !
I would need a space between those two sections ...

[dmwwebartisan]

@Kaftandreams 

Just for your confirmation. Do you want space between these 2 sections? check the screenshot below.

[Kaftandreams]

Yes absolutely🙏

[dmwwebartisan]

@Kaftandreams 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.FlexboxIeFix{
margin-bottom:50px;
}

You can adjust margin as per your need,

Hope this helps.

Thanks! 

[Kaftandreams]

Fantastic !!!!!!!!
Thank you SO much 😊

[dmwwebartisan · Accepted solution]

@Kaftandreams 

Please Accept as solution so others can take benefit.

Thanks!

[KB909]

Hello @dmwwebartisan ,

this is a fantastic solution, exactly what I was looking for too. 

Only if I paste the code the "spacer" appaers at the bottom of my homepage. How can I influence the position?

Thank you!

Katrin 

[dmwwebartisan]

@KB909 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[KB909]

Thank you @dmwwebartisan 

The page is https://wearepari.com

I am currently using a workaround with Hypervisual for the below indicated spacer, and would love to build this within the code.

[KB909]

@dmwwebartisan Would love your feedback, thank you!!

[dmwwebartisan]

@KB909 

Could you please explain more?

Where or on which section you need space?

[KB909]

Hello @dmwwebartisan 

Thank you for your answer. As indicated on the screenshot I would love to have two "section dividers" / space, one above and one below the collection overview.

Right now I inserted a hypervisual page with a white divider, however, I would like to remove hypervisual longterm.

When using the piece of code you mentioned in this thread it adds a relatively thick space at the bottom (see below).

I would appreciate your feedback very much! Thank you

[dmwwebartisan]

@KB909 

Thanks for the explanation. Just to confirm. Do you want this?

let me know.

[KB909]

@dmwwebartisan 

In your screenshot the space between the collection images is gone, which I do not want.

Visually, I don not want to change anything from what it looks right now, however, right now I have the spaces built with hypervisual and not the code. So I would love to remove hypervisual and add the spaces with the code? Sorry for any misunderstanding and thank you for your help. 

In the below screenshot I did remove hyper visual. How can I add the space between the grey area and the collection overview?

[dmwwebartisan]

@KB909 

Thanks for the explanation again. 

You can add the following code at the bottom of your assets/theme.scss.liquid file to give space above your collection list.

div#shopify-section-collection-list {
    margin-top: 30px;
}

Hope this works.

Thanks!

[KB909]

@dmwwebartisan Perfect, you are a star, thank you so much!

One last question: In case I want to add another space above the footer, I assume I copy and adjust the code, right?

Thank you so much!!

[dmwwebartisan]

@KB909 

No, for the space above the footer. You can add the following code.

footer#section-footer {
    margin-top: 20px;
}

We have to take section elements in CSS to do so. Hope this works.

Thanks!

[KB909]

@dmwwebartisan thank you so much for your help!!

[dmwwebartisan]

@KB909 

It's my pleasure to help you !!

[hannahkate]

wow! thanks so much! it looks great. Can you send me a code for adding the space above the picture as well. I also need a margin / space above the picture and below my slideshow. Thanks again!

[dmwwebartisan]

@hannahkate 

Please add the following code at the bottom of your assets/theme.css file.

.js .Slideshow--fullscreen { margin-bottom: 50px;}

Hope this works.
Thanks!

[KB909]

hello @dmwwebartisan 

May I ask you again for your help? We currently do have two collection lists on our homepage, the desktop version shows the grid, however, on mobile we would like to have a spacer between the collections. 

I did add your piece of code but I assume since we have 2 collection lists now, I need to adjust this?

Thank you!

Katrin 

[dmwwebartisan]

@KB909 

Please add the following code at the bottom of your assets/theme.css file.

div#shopify-section-1621417080045da5b1 {
    margin-top: 15px;
}

Hope this works.

Thanks!

[KB909]

THANK YOU SO MUCH 🙂 @dmwwebartisan 

[wpartridge]

Hello,

Hoping for some help here too! Would like a space between the first parallax image and the section below on the home page. It's prestige theme. My website is www.headsandtails.shop

Many thanks!

[hannahkate]

I can't thank you enough for all your help. Can you help me with a code for space here? I will attach a picture and the url. @dmwwebartisan 

[anta_g]

Hello there! could you please help me . I would like to put a space between my slideshow and the rich text right below it in the gradient colour.

[cradletocrib]

hello i have used this code youve provided and it has worked thank you !! although it doesn't work on mobile though is this another code i will need to input?

[FarinazWadia]

This worked for me! Thank you!!

[KB909]

Hello,

this is a fantastic solution, exactly what I was looking for too. 

Only if I paste the code the "spacer" appaers at the bottom of my homepage. How can I influence the position?

Thank you!

Katrin 

[ingafromadada]

Hey, many thanks for this- super helpful!

Im just not sure where to add the code, i either find in asstes theme.ccs OR theme.liquid and not theme.scss.liquid (see screenshot) just want to make sure I put it where it supposed to me, can you help me? Thanks a lot!

[dmwwebartisan]

@ingafromadada 

Please share your problem with me and also share your store URL!

I can help you!

Thanks!

[ingafromadada]

hi, thanks a lot!

the URL is: https://adadastore.com

and we want to have a space after the first section (the slideshow) ...its prestige theme but im not sure where to put the code in the html since I can't find assets/theme.scss.liquid. 

thanks again 

Inga

[ingafromadada]

the store URL is adadastore.com and I cannot find the location: assets/theme.scss.liquid

Highly appreciate your help

Inga