Product Photo Size Issue

[TuneToyz]

 Hello, my website is tunetoyz.com password: tunetoyz123

My product page currently looks like this but I want to make the photo smaller so the entire thing fits in the below section. (Like I want it to align with the Carti 29.99 Add to cart etc right now its too big) 

 

[DaisyVo · Accepted solution]

Hi @TuneToyz 

You can follow the steps here: 

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for Step 3: 

@media screen and (min-width: 1024px){
body .product .flickity-slider {
    top: 0 !important;
}
body .product .flickity-slider img {
    width: 80%;
    transform: translateX(10%) !important;
}
}

Here is the result:

Let me know if it works!

Best,

Daisy

[TuneToyz]

Thanks

[rajweb]

Hey @TuneToyz ,

to align with the Carti 29.99 Add to cart etc .

Follow these steps:

1. Online Store 

2. Themes 

3. Edit Code

4. In the code editor, find and open the theme.css (or base.css depending on your theme) file, which controls the styling.

5.  Add CSS Code to resize the product image:

.product .flickity-slider {
    top: 80px;
}

.product__image-slider .carousel-cell img {
    width: 80%;
}

Result:

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[Rahul_dhiman]

Hello @TuneToyz 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.product__image-slider .carousel-cell {
top: 10px !important;
}
.product__title h1 {
text-transform: uppercase;
color: #111;
font-size: 35px;
}
.product__info-wrapper .price-item.price-item--regular {
font-size: 17px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks