A user wants to create a minimalistic landing page by making collection preview sections span full width with larger height, similar to featured hero images on other sites.
Multiple CSS Solutions Provided:
theme.liquid file (before </body> tag) or base.css.collection-list-wrapper class to set max-width: 100% and remove paddingCurrent Issues:
absolute to relative with bottom: 56px to fix croppingStatus: Ongoing - desktop view resolved but mobile responsiveness still needs addressing. The discussion includes multiple code snippets and before/after screenshots showing the implementation progress.
Hello,I want to make my page minimalistic and use a lot of photos instead of text. I want to make a collection preview on my landing page span the whole page width and have a larger, more signifcant height to create a better user experience. Any help is appreciated, thank you.
(^ Here is how the collection preview looks on my store)
(^ this is what im inspired by, larger size and spans whole width of the page with photo that links to collection)
Store: https://artisimo.es/
Pass: pongia
Hey @JordiP
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @JordiP
Please add this code to theme.liquid file, after in Custom CSS in Online store > Themes > Edit code
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hello @JordiP
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
@media screen and (min-width: 750px) {
.section-template--23481715917133__collection_list_Fcec78-padding {
max-width: 100%;
padding: 0px;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thank you! However it seems that the collection image gets cut in half for some reason? How do I fix this? Also is it possible to remove the arrows, so there is only the text? Thanks!
(^ Photo seems to be cut in half)
Please replace the above code with this
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thank you, Is it possible to optimize for mobile view aswell? Right now the first option from collection doesnt even appear on mobile view and I would like to simply have a 2x2 like in the example below
( ^ How it looks now for mobile, first image is cut off for some reason, its fine on desktop though)
(^ How I want it to look for mobile, nice 2x2 spanning the screen )
