Hey guys
so I finished my design for my flow themed website that includes a few gifs (see desktop view attached).
However when I turn on the mobile view, below the gifs there is a huge white gap in the website and there are many overlapping sections.
Now I don’t know much about messing around with the CSS coding , but if anyone knows how to get rid of the gap or even get rid of something on just mobile view and not desktop view please let me know!
https://kp1i7167gvo2ct2x-78429389112.shopifypreview.com
Thank you!
Desktop View:
Mobile View:
Hi @Chainsfr ,
Would you mind to share your URL wesite? with password if its protected. Thanks!
https://kp1i7167gvo2ct2x-78429389112.shopifypreview.com
Thank you so much I completely forgot to put the link lmao
Hello @Chainsfr ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css file → add this following code at the bottom of page
@media only screen and (max-width: 767px) {
.gif-container {
margin-bottom: 0;
}
}
Save and preview
Hope this can help.
Transcy
Thank you for information. This area is near on the footer right? But on my screen its also in the desktop view not only in the mobile view its the height of the chain image so I descrease it.
- 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:
- And Save.
.homepage-indiv-section-wrapper.grid--full.homepage-featured-content-wrapper {
min-height: 50px;
}
.homepage-sections-wrapper.homepage-sections-wrapper--white {
padding-bottom: 0px;
}
Result:
I hope it help.
This helped so much!!! Thank you Transcy!
