From the course: WordPress: Customizing WooCommerce Themes

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Resize image column width

Resize image column width - WordPress Tutorial

From the course: WordPress: Customizing WooCommerce Themes

Start my 1-month free trial

Resize image column width

- [Instructor] In an earlier video, we reduced the product image, so we can have more space to display content about our products. We need to change the width of the columns, so we can make use of that extra space. I'm going to open up the Chrome Element Inspector, and you can see that we have two columns here. There's the images column and the summary column. I'm going to write CSS to increase the width of the summary column and decrease the width of the images column. Before I go to my theme's style.css file, I'm going to be lazy and copy as much of this code as possible. I'm going to click on this, and in the Element Inspector, I can already see the CSS that controls the width. I'm going to copy all of this and then go to my style.css file and paste it in. Sometimes it doesn't include the brackets for the media query up here, so you may have to add those brackets manually. Now I just need to write the CSS property that affects the width. This will reduce the width of the images…

Contents