How can I resize the product image and adjust it as shown in the image?
the url of the page is: https://nerve-concepts.com/
Thank you.
Topic summary
A user seeks help resizing and adjusting product images on their Shopify store to eliminate margins and achieve a specific layout.
Initial Solutions Provided:
- Two support specialists (PageFly-Henry and Raj-webdesigner) suggest adding CSS code to the
base.cssfile - The code targets
.product-media-containerelements to set width to 100%
Iterative Adjustments:
- First CSS solution works but leaves unwanted margins on the left and top
- PageFly-Henry provides additional code to remove padding from the main product section
- User reports improvement but wants the product name positioned lower and the garment image extended further down
Current Status:
- The discussion remains ongoing
- User’s latest attempt to adjust the image hasn’t produced the desired result
- The issue involves fine-tuning vertical spacing and image positioning to match a reference layout shown in attached screenshots
1 Like
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
width: 100% !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Add This css in Your Edit Code > base.css File
.product-media-container.constrain-height.media-fit-contain {
width: 100% !important;
}
It works but it still shows these margins on the left and above, I would like it to be attached to the header
1 Like
YOu can try with this code:
section#MainProduct-template–16898587590842__main .page-width {
padding-left: 0 !important;
}
section#MainProduct-template–16898587590842__main {
padding-top: 0 !important;
}
it looked great, I just wish the name of the product was a little lower and the image of the garment was a little longer down like the image.
thanks, I’ve been trying but the image doesn’t change, it’s still the same.