Solved

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

Kaftandreams
Tourist
8 1 2

Hi, 

 

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

 

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@Kaftandreams 

Please Accept as solution so others can take benefit.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 43 (43)

Syed_Mustafa
Shopify Partner
437 3 7

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

banned
hannahkate
Tourist
9 0 1

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

 

https://shop.hannahkateclothing.com

dmwwebartisan
Shopify Partner
12280 2546 3694

@hannahkate 

Please share screenshot What do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
hannahkate
Tourist
9 0 1

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! 

Screen Shot 2021-04-28 at 10.43.07 AM.pngScreen Shot 2021-04-28 at 10.43.13 AM.png

dmwwebartisan
Shopify Partner
12280 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
hannahkate
Tourist
9 0 1

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

dmwwebartisan
Shopify Partner
12280 2546 3694

 

@Kaftandreams 

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

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kaftandreams
Tourist
8 1 2
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
Shopify Partner
12280 2546 3694

@Kaftandreams 

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

It will be helpful.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kaftandreams
Tourist
8 1 2
Thank you !
I would need a space between those two sections ...
dmwwebartisan
Shopify Partner
12280 2546 3694

@Kaftandreams 

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

space-between.jpg

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kaftandreams
Tourist
8 1 2

Yes absolutely🙏

dmwwebartisan
Shopify Partner
12280 2546 3694

@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! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kaftandreams
Tourist
8 1 2
Fantastic !!!!!!!!
Thank you SO much 😊
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@Kaftandreams 

Please Accept as solution so others can take benefit.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

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
Shopify Partner
12280 2546 3694

@KB909 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

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_0-1616416370908.png

 

 

KB909
Excursionist
21 1 11

@dmwwebartisan Would love your feedback, thank you!!

dmwwebartisan
Shopify Partner
12280 2546 3694

@KB909 

Could you please explain more?

Where or on which section you need space?

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

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.

KB909_0-1616664795459.png

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

KB909_1-1616665047874.png

I would appreciate your feedback very much! Thank you

dmwwebartisan
Shopify Partner
12280 2546 3694

@KB909 

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

final-grid-spacing.jpg

 

let me know.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

@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?

KB909_0-1616666480938.png

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

@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
Shopify Partner
12280 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

@dmwwebartisan thank you so much for your help!!

dmwwebartisan
Shopify Partner
12280 2546 3694

@KB909 

It's my pleasure to help you !!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
hannahkate
Tourist
9 0 1

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
Shopify Partner
12280 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

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 

 

KB909_0-1621418022286.png

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KB909
Excursionist
21 1 11

THANK YOU SO MUCH 🙂 @dmwwebartisan 

wpartridge
New Member
5 0 0

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
Tourist
9 0 1

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 Screen Shot 2021-12-21 at 9.22.16 AM.png

anta_g
Visitor
1 0 0

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.

φφφ.png

cradletocrib
Tourist
3 0 1

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
Tourist
4 0 0

This worked for me! Thank you!!

KB909
Excursionist
21 1 11

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
Tourist
14 0 2

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!Bildschirmfoto 2022-11-14 um 14.31.13.png

dmwwebartisan
Shopify Partner
12280 2546 3694

@ingafromadada 

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

I can help you!

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ingafromadada
Tourist
14 0 2

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
Tourist
14 0 2

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

Highly appreciate your help

Inga