Project page image size and placement

[AnneP96]

Hey people,

I need some help with the following. I want my product page to be like this online shop (https://www.brookecallahan.com/shop/p/guest-top-red

- So the size of the images (9:16) and the width and placement of both the image galery and the info pannel.

My own website:

the-lena.studio

pw: SHOPIFYSTORELENA96

Thank you!!

[Anshul_arora]

Hello @AnneP96 ,

I understand you are looking to change the layout of the product page similar to your shared reference product page https://www.brookecallahan.com/shop/p/guest-top-red 

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

@media screen and (min-width: 765px) {

.grid__item.product__media-wrapper {
max-width: 50% !important;
}

.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
max-width: 50% !important;
}
}

</style>

Output -: https://prnt.sc/afsZ77RD1p8P

I hope the code helps you.

Please share if you have any queries.

Thank you.

[AnneP96]

Thank you so much!!

Everyting's perfect, except for the container width. The grey lines are still showing..

Any code for this? 🙂

[AnneP96]

Anyone any ideas how to make the container wrap the content?

[Anshul_arora]

Hello @AnneP96 ,

I am glad that my previous code helps you.

Please share your store new password, so I can take a look at store again and can provide you an appropriate solution for your requirement.

Thank you.

[PageFly-Noah · Accepted solution]

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
   @media screen and (min-width: 768px){
    .product__media-list{
      max-width: 50% !important;
      margin: auto !important;
     }
  } 
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[AnneP96]

Thank you, but unfortunately still the same issue with the media container width. There is a box around my images. Any ideas how to solve this?

[PageFly-Noah]

Hi @AnneP96  Can you help me provide again password, current password  is not correct. Thank you.

[AnneP96]

I managed to make it work, thanks!

[PageFly-Noah]

Thank you , Have a nice day !

[MorganBerger]

Thank you 

[MorganBerger]

To enhance your Shopify project page and better manage resources, you might want to explore some effective resource management tools . These can streamline your workflow and help you focus on optimizing page design while keeping everything organized efficiently.