Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Please add below code in bottom of assets/theme.scss.css file
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.
This is an accepted solution.
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!
This is an accepted solution.
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;
}
This is an accepted solution.
Try this css class
@media only screen and (min-width: 750px){
.hero--small .hero__inner {padding: 25% 0 !important;}
}
Yes! that's great! thanks 🙂
This is an accepted solution.
Please add below code in bottom of assets/theme.scss.css file
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.
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)?
This is an accepted solution.
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!
@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)?
This is an accepted solution.
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;
}
Amazing! Thanks @dmwwebartisan a lottttt! However, my topmost image is still cropped. Could you fix that as well? It will be immensely helpful.
Thanks a lottttt @dmwwebartisan for your quick support! My collection looks perfect now! So thankful to you! However, my topmost image is still cropped. Could you please help me fix that?
This is an accepted solution.
Try this css class
@media only screen and (min-width: 750px){
.hero--small .hero__inner {padding: 25% 0 !important;}
}
Thanks a lot @dmwwebartisan . It worked perfectly for the top most image! So thankful for your help!
Thanks!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024