Skip Navigation

[Resolved] Expand Product Image width in Astra theme

This thread is resolved. Here is a description of the problem and solution.

Problem: I am using the Astra theme, and the product image is small. I would like it to expand horizontally to fill up more of the space allowed in my design. The solution recommended here does not seem to work for me: https://toolset.com/forums/topic/product-image-wont-resize-to-full-width-or-any-other-size/

Solution: Use the following code specifically created for Astra:

.woocommerce-page #content .ast-woocommerce-container div.product .ddl-full-width-row div.images{  
  width: 100%;
}
This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by stephenG-3 6 years, 12 months ago.

Assisted by: Christian Cox.

Author
Posts
#601174
Screen Shot 2017-12-22 at 18.28.07.png

Hi,

I'm following along with the WooCommerce tutorial, and I'd like to expand the product image so that it fills the left hand 6 columns and removes/reduces the large group of white space between the image and the product title, authors name, product price on the right-hand side.

I've added the updated CSS from another toolset support ticket here
https://toolset.com/forums/topic/product-image-wont-resize-to-full-width-or-any-other-size/

but I still have a large gap of white space on the desktop view.

The link to the page I'm trying to create is
hidden link

I'm on WordPress 4.9.1 running Astra Pro theme (no child theme), Elementor and Elementor Pro.

Cheers

Stephen

#601316

Hi, try the following CSS instead:

.woocommerce-page #content .ast-woocommerce-container div.product .ddl-full-width-row div.images{  
  width: 100%;
}
#601324

Hi Christian,

I wasn't expecting a response over the weekend but thank for coming back so quickly.

That did exactly what I needed it to do.

Thank you again for coming back so quickly and I hope you have a great holiday.

Best Regards

Stephen