Support » Theme: Virtue » Move image and text on product page

  • Resolved jd3723

    (@jd3723)


    On the individual product pages, I would like to move the main product image a bit over to the right so that it isn’t so far to the left of the page. I also want to move the column that shows the product name, price, description, and “add to cart” button slightly over to the right. I want that column to be narrower than it is now, so it’s left edge should be moved further over to the right, but it’s right edge can remain at the same place that it currently is.

    My site is dorici.com. Currently the individual product pages are aligned like this: http://www.dorici.com/product/eaux-my-god-tee/

    Ideally, I want the location for the image and description width to be something more like this:
    http://unifclothing.com/womens/pusher-dress

    Please let me know if there is any shortcode or editing that I can do to scootch things over on the product pages. Any help is appreciated!

Viewing 7 replies - 1 through 7 (of 7 total)
  • hannah

    (@hannahritner)

    Kadence Theme Support

    Hey, Try pasting this into your custom css box in theme options > advanced settings.

    @media (min-width: 1200px){
    .span7 {
    width: 400px;
    padding-left: 120px;
    }
    div.product .product_image {
    padding-left: 70px;
    }
    }

    Let me know if that’s the look you’re going for! If not I’m happy to change things a bit.
    Hannah

    Theme Author Kadence Themes

    (@britner)

    First, I recommend updating the theme, you are using version 1.8.4 the current version is 2.2.1

    And for what your wanting to change I would use this css:

    @media (min-width: 992px){
    .product .entry-summary {
    padding-left: 80px;
    }
    }

    Kadence Themes

    Thanks! That helped to move the text over to the right, but it didn’t move the image over to the right. Is there any code I can add to scootch the product image over to the right by around 80 pixels?

    Theme Author Kadence Themes

    (@britner)

    In that case remove the css I posted above and use this:

    @media (min-width: 992px){
    .product .col-md-7.product-summary-case {
    width: 40%
    }
    .product .col-md-5.product-img-case {
    width: 60%
    }
    }

    Kadence Themes

    That worked perfectly! Thanks. However, I just turned on the Woocommerce Dynamic Gallery plugin. Is it possible to scootch the Dynamic Gallery over to the right on the product pages?

    Theme Author Kadence Themes

    (@britner)

    @media (min-width: 992px){
    .product .col-md-5.product-img-case .images.gallery_container {
    padding-left: 80px;
    }
    }

    Kadence Themes

    Perfect! Thanks so much.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Move image and text on product page’ is closed to new replies.