Button placement help! [BROOKLYN THEME]

peachyxx1
New Member
3 0 2

Hello! Can someone help me out? Im currently using Brooklyn theme.

I have coded a button on my homepage for users to press to "VIEW ALL" of my products. 

It looks fine on desktop but it's off center on mobile.

DesktopDesktopmobilemobile

 

this is the code for the button under the file: featured-products.liquid

Screenshot 2021-06-18 at 8.41.50 AM.png

 

I want the mobile version to be centered like the one on the desktop

Can someone help me out??

 

also, the product images look weird on the ipad, im not sure if an ipad is viewed together the same as mobile, but the placement of the product images is weird too. 

[HOMEPAGE]

the big gap on the right side

IMG_0477.PNG

 

[ALL PRODUCT PAGE]

weird gaps between products

IMG_0478.PNG

IMG_0479.PNG

 

I tried to fix it using this code under the file: timber.srcss.liquid, but it only fixed my mobile.

Screenshot 2021-06-18 at 8.55.39 AM.png

 

WEBSITE: dangelapparel.myshopify.com 

pw is 123

  

  

dmwwebartisan
Shopify Partner
7428 1762 2360

@peachyxx1 

This is the solution for the view all button. Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
#CollectionSection header.section-header{ clear: both; }
}

Hope this works.

As for the iPad view, you changed the system of the grid as you have shown in your last screenshot. Did you try to remove that and check on iPad?

 

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 →
0 Likes
peachyxx1
New Member
3 0 2

omg, it works perfectly. Thank you so much.

 

The set of codes on my last screenshot was to change from viewing on product at a time to multiple products for MOBILE as seen below

without codeswithout codeswith codeswith codes

 

here's the full code for better viewing. Code location: timber.scss.liquid

@media screen and (max-width: 776px) {
.medium--one-half {width:50%;}
}

@media (max-width: 863px) {
.grid-uniform .medium--one-half:nth-child(2n+1), .grid-uniform .medium--one-third:nth-child(3n+1), .grid-uniform .medium--one-quarter:nth-child(4n+1), .grid-uniform .medium--one-fifth:nth-child(5n+1), .grid-uniform .medium--one-sixth:nth-child(6n+1), .grid-uniform .medium--two-sixths:nth-child(3n+1), .grid-uniform .medium--three-sixths:nth-child(2n+1), .grid-uniform .medium--two-eighths:nth-child(4n+1), .grid-uniform .medium--four-eighths:nth-child(2n+1), .grid-uniform .medium--five-tenths:nth-child(2n+1), .grid-uniform .medium--one-twelfth:nth-child(12n+1), .grid-uniform .medium--two-twelfths:nth-child(6n+1), .grid-uniform .medium--three-twelfths:nth-child(4n+1), .grid-uniform .medium--four-twelfths:nth-child(3n+1), .grid-uniform .medium--six-twelfths:nth-child(2n+1) {
    clear: both;
}
}

 

Without the code, the ipad and desktop is perfect but the mobile ver is showing one product at a time (which i don't want)

With the code, the mobile is good, desktop is good but ipad is affected haha

  

dmwwebartisan
Shopify Partner
7428 1762 2360

@peachyxx1 

Ok , I will check and get back to you.

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 →