Hey, the products in my shop have an extra border for mobile use. how can you get rid of that?
password: uready?
Thank you!
Topic summary
Extra border around product images on mobile was addressed with a CSS change targeting the product image link background; the original poster confirmed and moved on to layout issues. The site uses Shopify’s Brooklyn theme.
Page width concerns (header/footer not full-width) were solved by removing the “wrapper” class in header.liquid, after products were made full-width via theme.scss.liquid edits. This made the top menu full-width.
Icons became too close to the edges; spacing was corrected by adding padding to the site header. A temporary issue where code appeared at the top of the page was resolved by removing an unintended link.
Mobile-specific spacing that looked “too far from the border” was refined using a CSS media query (max-width ~600px) to reduce header padding on mobile. Screenshots were central to diagnosing the mobile layout.
Most changes involved CSS and theme files (header.liquid, theme.scss.liquid). A media query is CSS that applies styles only under certain screen widths, enabling mobile-only adjustments.
Status: initial mobile border and header width issues appear resolved with CSS tweaks. Open question: how to move the homepage image lower—or reposition the “Shop now” button—only on mobile; no solution provided yet.
Hi @KimGottwald
Add this css at the bottom of theme.css file.
.grid-product__image-link {
background-color: #fff !important;
}
Thank you! Can you maybe also take a look at my other question?
Hi @KimGottwald
yes please let me know other question.
Hey, I’m going to attach a photo here which should illustrate the problem. I use the Brookyln theme and the problem is that in full screen mode the entire page is not used. So the left and right menu is not at the bottom of the page like it should be. Does anyone know how to change that? Thank you!
shop url: www.aliudclothing.com
password: uready?
This does not work for me. I can not edit the code in Safari, when I open it nothing happens when I try to erase the “wrapper”. And even if this would work, every other Person that accesses my store would see the Store like I see it know (not in full width) right?
Or am I getting something wrong here?
Thanks in advance for the replies so far!
Ok, now I got a bit closer I guess. I edited the code in the theme.scss liquid and managed to get the products on full-width. Sadly the top and the footer-menu are still not full width, do you know how to change this?
(Look at the photos to understand)
Hi @KimGottwald
You have to remove wrapper class from header.liquid file.
Then top menu will be full width.
Thank you, I did this, but know the symbols are too near to the end of the Website, is there any way to move them a bit to the left/right?
Photo attached.
Hi @KimGottwald
use this css
.header-container.drawer__header-container .site-header {
padding: 0px 20px;
}
1 Like
It works, but now i have this code at the top of my page.#
Photo Attached
Fixed it myself, forgot to delete the link out of the header code. MB!
Thank you very much!
I have one more question: due to the change, the symbols are also further away from the border in mobile use, but this looks weird. Can I change it back and only let it look like this in web use, not in mobile?
Hi @KimGottwald
Can you please share screenshot what you exactly want?
also please like all my answer which were accepted by you
It would be great for me.
Thanks
1 Like
Sure!
I attached a Photo that shows the problem I have with the mobile version, the web version fits perfectly now.
Hi @KimGottwald
Thanks for liking my solution.
I didn’t get any screenshot yet for mobile version.
Hi @KimGottwald
Add this css for mobile
@media screen and (max-width: 600px) {
.header-container.drawer__header-container .site-header {
padding: 0px 5px;
}
}
Thank you!
I have another Question: I want to change the position of the picture on my homepage. But only on mobile version. The Version for Web looks perfectly, but in the mobile Version I want the picture to be a bit lower. Can you help me?