Hi Folks,
I’m trying to put together an ecommerce site on Shopify.
I’ve bumped into an issue with page layout (using Dawn theme).
All text events after the Add To Cart button are crammed together down on the right side of the page.
Here’s a link showing the issue:
https://4wm37aexp1sl05jy-63863652586.shopifypreview.com/products_preview?preview_key=6af6937587e73d0c2e15f4f9d6139450
I’m wanting the Text events to be placed under the Product picture.
I’ve tried for a couple of days to find the right code/area to resolve the issue.
I’m stuck.
Ideally, I’d like several things to be tweaked.
-
I’d like the Product picture to be smaller (takes too much screen space)
-
I’d like the drop-down options to be condensed (to take up less space). These are generated by an App.
-
Text Fields placed neatly under the Product picture
I attached a zipped .PNG file to show the basic idea of what I’m trying to accomplish.
Can anyone steer me in the right direction?
I’d be happy to pay someone for their time/effort.
If I can get beyond these issues, I’ll be good-to-go.
Thanks in advance for any help!
kazi_1
2
Hello @JimRoseberry I have checked the attached file. You need to update the assets > sections > main-product.liquid file and move the
{%- if product.description != blank -%}
{{ product.description }}
{%- endif -%}
inside “grid__item product__media-wrapper” div and css in assets > base.css bottom of file
.product__media.media.media–transparent.gradient.global-media-settings {
max-width:60%;
margin: 0 auto;
}
If need help feel free to ask me.
1 Like
@kazi_1
Thank you so very much!
Those steps solved my Text field issues.
The Product image isn’t displaying properly (see below).
How can I resize the Product image to fit the container?
Throwing the JPG in Photoshop and reducing size to 60% has no effect.
Thanks again for your assistance!
kazi_1
5
@JimRoseberry try this css
@media (max-width:767px) {
.slider-mobile-gutter {
max-width: 60%;
}
}
1 Like
@kazi_1
Thank you so much for the help!
Problem resolved. 
