Huge gap within sections on my Homepage

Solved
blisskare
Excursionist
32 0 6

Hello Team,

I am seeing a lot gaps on left and right margin where I am showing collection. Also, there is a lot of space within the sections horizontally on my Homepage. I am attaching the screenshots for your reference. Please let me know how can I see the image on the full screen - images look small and yet, speed score for my store is 33 and that is low. Please suggest me ways to fix that. My store is www.blisskare.com  Screen Shot 2021-09-21 at 11.44.10 PM.pngScreen Shot 2021-09-21 at 11.45.53 PM.pngScreen Shot 2021-09-21 at 11.47.32 PM.png

 

0 Likes

hii, @blisskare 
Do you want to like this?
download (53).png
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme,
Hire us | Whatsapp. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
0 Likes
blisskare
Excursionist
32 0 6

Yes! that's great! thanks

0 Likes
Denishamakwana
Explorer
89 13 13

This is an accepted solution.

Please add below code in bottom of assets/theme.scss.css file

@media only screen and (min-width: 750px)
.collection-list {
           padding: 50px 0 0 0;

This is an accepted solution.

hii, @blisskare 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
.grid.grid--uniform {
    margin-left: -23% !important;
    width: 144% !important;
}
.collection-list {
    padding: 40px !important;
}
}

Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme,
Hire us | Whatsapp. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
dmwwebartisan
Shopify Partner
9246 2138 2911

This is an accepted solution.

@blisskare 

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

@media only screen and (min-width: 992px) {
.grid.grid--uniform {
    margin-left: -23% !important;
    width: 144% !important;
}
.collection-list {
    padding: 40px !important;
}
}

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 | Bag is a cart drawer that maximizes your sales. View app →
blisskare
Excursionist
32 0 6

Hey, thanks for help, that code fixed the issue. However, that cropped my top-most image. Could you please fix that?

Also, could the collection list images be organized with lesser margin on both sides (to get aligned with top most image)?Screen Shot 2021-09-22 at 11.12.46 PM.png

 

 

0 Likes
blisskare
Excursionist
32 0 6

@dmwwebartisan  Hey, thanks for help, that code fixed the issue. However, that cropped my top-most image. Could you please fix that? 

Also, could the collection list images be organized with lesser margin on both sides (to get aligned with top most image)?Screen Shot 2021-09-22 at 11.12.46 PM.png

0 Likes
dmwwebartisan
Shopify Partner
9246 2138 2911

This is an accepted solution.

@blisskare 

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

#shopify-section-16303822977c348706 .page-width {
    zoom: 1;
    max-width: 75% !important;
    padding: 0px 30px;
    margin: 0 auto;
}

#shopify-section-1630218769e2c16f7f .page-width {
    zoom: 1;
    max-width: 75% !important;
    padding: 0px 30px;
    margin: 0 auto;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
blisskare
Excursionist
32 0 6

Amazing! Thanks @dmwwebartisan a lottttt! However, my topmost image is still cropped. Could you fix that as well? It will be immensely helpful.Screen Shot 2021-09-23 at 12.11.27 AM.png

0 Likes