Make Product Description Wider

Store Design
,
1

I would like to make my product description wider.

This is what I currently have:

Screenshot 2024-10-21 at 11.15.30.png
Screenshot 2024-10-21 at 11.15.30.png1278×719 140 KB

I would like the product description to start at about 50% of the screen width - not exactly 50% of the screen width because I need the spacing to be neat and consistent throughout. The product description and image must be evenly distributed across the screen.

If you can supply the code, I can manipulate the values to get it to where I need it.

Can anyone help?

It would be much appreciated.

Here is my store link: https://8ae3b9-27.myshopify.com/products/grange-contisuit-classic-2-piece

Thanks in advance.

2

Hi @ProconMarketing
Hope you are doing well you can achieve this by adding this CSS code into your theme editor >> base.css

.product.grid {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
}

.product.grid .grid__item {
    width: 100%;
    max-width: 100%;
}
3

Thanks, but now it looks like this:

Screenshot 2024-10-21 at 12.04.57.png
Screenshot 2024-10-21 at 12.04.57.png1261×685 122 KB

I would like the text to stretch across the rest of the screen.

Here is an example:

Screenshot 2024-10-21 at 12.08.21.png
Screenshot 2024-10-21 at 12.08.21.png1265×572 144 KB

4

Replace this CSS

.product.grid .grid__item {
    width: 100%;
    max-width: 100%;
}

With this CSS in base.css

#MainContent .product.grid .grid__item {
    width: 100%;
    max-width: 100%;
}
5

Thank you.

Worked perfectly.

Much Appreciated.

6

Mention not just mark this as a solution and like the comment

7

Hi @Mehran_Ali

This code is making the mobile appear like this now:

IMG_1070.PNG
IMG_1070.PNG1290×2796 230 KB

I’d like it to look like it did before with the image at the top and the description underneath:

IMG_1071.PNG
IMG_1071.PNG1290×2796 322 KB

I tried the code like this to make it for desktop only, but it does not help.

Screenshot 2024-10-29 at 10.21.26.png
Screenshot 2024-10-29 at 10.21.26.png419×137 10.7 KB

Please help.

8

Hi @ProconMarketing

So Sorry about this kindly try this this will make it work only on a desktop

@media screen and (min-width: 990px) {
    .product.grid {
      grid-template-columns: repeat(2, 1fr);
      display: grid;
    }
    #MainContent .product.grid .grid__item {
        width: 100%;
        max-width: 100%;
    }
}
9

Thanks so much - worked perfectly! Really appreciate the help!

10

HI @Mehran_Ali , is it possible that this code is preventing my related items from showing up under my products?

My related items are not displaying.

11

Hi @ProconMarketing

The related product is not showing this issue is not related to the above code it something else I think you don’t have any related product in that product collection or you can go and check the editor if that doesn’t work you need to look into liquid code for that may be you need liquid expert

But the related product not showing issue has nothing to do with the CSS code for that I have to debug that

12

Thanks for the help and insight. I appreciate it!