Hi, on desktop the full image is on show and then it has just the black strip for my footer which is what I want to replicate on the mobile, but instead it looks like this:
my site (https://0sd6j4lsdramuv0l-74826613002.shopifypreview.com)
Topic summary
A user is troubleshooting mobile banner display issues where the full-screen image isn’t showing correctly on mobile devices, unlike the desktop version which displays properly with only a black footer strip.
Resolution for Banner Issue:
- Solution involved adding CSS code to the theme.liquid file below the
<head>tag - The user had the correct code but placed it incorrectly initially
- After repositioning, the banner now displays full-screen on mobile as intended
Additional Requests:
- Collection page images: User wants product images to extend to the top of the screen; currently falling short
- Product page layout: Seeking to adjust the “add to bag” box width to match a reference site’s dimensions
- Desktop product details: Wants to make product title, description, etc. smaller on desktop view
The helper (ThePrimeWeb) provided CSS solutions for the top-alignment issue but couldn’t assist with the product page width adjustments. The conversation remains open with the user seeking further guidance on the remaining layout customizations.
Hey @rene94 ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
1 Like
Thank you, worked great! I had the right code in the wrong place smh. Could you help with something else please? On my collections page with all the product I want the images to reach to the top of the screen. However, they’re just short.
https://0sd6j4lsdramuv0l-74826613002.shopifypreview.com
^ my site, but you might have to hover over to understand what I mean.
Another thing is on my main product page, the box with the product title, description etc - I would like it smaller on desktop if possible
(https://0sd6j4lsdramuv0l-74826613002.shopifypreview.com)
Ideally I’d like to be the exact same size as this (https://www.phoebephilo.com/en_gb/basket-cabas-black-leather-and-suede) with the add to bag taking up the whole width. I don’t know if that’s possible though.
To make the images reach the top use this code. Instructions are the same, paste below
Sorry, but I won’t be able to help with the next one.
1 Like
Thank you so much! If you can point me in the right direction for the latter please DM me. Enjoy the rest of your day