Single product: reduce gap between photo and description

Hi @younlee!

Can you please link us to your site so we can take a closer look, and possibly provide some CSS code to resolve this?

Cheers!

Hi @rynald0s

Here is the Single product page description : https://tawleef.com/produit/book1

As i said above, all the content of the site is in Arabic, it means it is normal that everything starts from the right to the left ??

Currently the site is under construction, but you have everything you need (the structure) in the product page to identify the problem.

And here is the gap I want to reduce : https://imgshare.io/image/z579K

Thank you.

Cheers!

• This reply was modified 4 years, 7 months ago by younlee.
• This reply was modified 4 years, 7 months ago by younlee.
• This reply was modified 4 years, 7 months ago by younlee.

Please note that I would like to reduce the gap without moving the picture’s position. This means that I would like to move the text toward the image.

Cheers

Any help please ?

The gap exists because the image width is set to be 70% of the available width, due to this CSS code that you’ve added in the Custom CSS section of your theme:

.woocommerce div.product div.images img {
    display: block;
    width: 70% !important;
    height: auto;
    box-shadow: none;
}

To reduce the gap, remove the line width: 70% !important; from that section.
Note that this will make the image look much bigger. If you don’t want that, you can add this code to it as well:

@media screen and (min-width:769px) {
  .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 58%;
  }

  .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 38%;
  }
}

• This reply was modified 4 years, 6 months ago by Senff.

@senff

That was perfect !
Thank you so much Mark !

My very last question (almost the same as the previous) :

How to reduce the gap between the Buy button and the product number counter?
Same thing for the gap between the “Discount” tag and the name of the book.

See the following screenshot for more details: https://ibb.co/Q8TyFNm

And here is the Single product page description : https://tawleef.com/produit/book1

Kindly,

• This reply was modified 4 years, 6 months ago by younlee.
• This reply was modified 4 years, 6 months ago by younlee.
• This reply was modified 4 years, 6 months ago by younlee.
• This reply was modified 4 years, 6 months ago by younlee.

It depends what you want exactly. Should the buttons that are currently on the left be moved more to the right, or do you want the buttons that are currentlt on the right to be moved to the left?

Instead of an image of how it looks now with arrows, it may help to show us an image of how it should look, as that can clear it up a bit.

Hi @senff

Here is an image of the expected result: https://ibb.co/s1x3Vqr

Cheers !

To move the quantity and Buy button closer together, you can add this:

.woocommerce div.product form.cart {
  float: right;
}

.woocommerce div.product .product_meta {
  clear: both;
}

To move the SALE icon is a bit tricky, and will need some advanced CSS code, perhaps even some Javascript. I can’t find a way to do that easily, but maybe someone else here can help with that.

Perfect! Thank you so much @senff

It’s Okay for the SALE icon, I will keep it there ??
The most important is done!

Thank you again.

Regards,