Shopify themes, liquid, logos, and UX
Hi guys,
My store - bootboy.shop - currently only displays one product at a time in the scrolling mobile view.
What do i need to do in order to display 2 products per row on mobile view?
This is the collection page I am reffering to: https://bootboy.shop/collections/all-products
Currently using the 'Brooklyn' theme.
Many thanks!
Solved! Go to the solution
This is an accepted solution.
@MilesRankin
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 429px){
.template-collection .grid-uniform .grid__item{
width: 50% !important;
}
}
This is an accepted solution.
@MilesRankin
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 429px){
.template-collection .grid-uniform .grid__item{
width: 50% !important;
}
}
@Kinjaldavra Thanks very much!
This has partially worked, but there have been some bugs introduced:
1. The Bootboy logo on the main homepage has become much smaller
2. The products images in the collection are not square
3. There are some gaps on a few of the rows.
Please see attached images.
Are you able to help?
Yeah that looks great!
Would you be able to make sure the bootboy logo on the homepage doens't get smaller too? - As it has shrunk with th new code.
You need to crop the logo from top and bottom because it is taking up the space.
Please upload the logo again after cropping it.
It seems that you have placed the code at wrong place.
Please go to Assets -> theme.scss -> paste the code at the bottom of this file and then check.
In the 'Assets' folder, i only have a 'theme.scss.liquid' file
Please help!
Yes at the end of theme.scss.liquid
@freya0328 Please place this code at the end of theme.scss
@media screen and (max-width: 768px) {
.site-header__logo img {
max-height: 123px;
}
}
#CollectionSection .grid-uniform {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 590px) {
.product--wrapper {
margin: 0px auto;
}
.grid-product__image-link .product--wrapper .product--image {
width: 100%;
position: absolute;
top: 0;
min-width: 100%;
height: 100%;
min-height: 100%;
object-fit: contain;
left: 0;
bottom: 0;
right: 0;
}
}
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