ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• March 11, 2016 at 6:49 pm #254971
  alexanderchristiansen

  Member

  Post count: 179

  Hi SwiftIdeas!

  I am currently tweaking my product-page, and I would like to change a bit on the current padding.
  I would like the padding and general setup to be like my split-screen lander on my main-page new.organicbasics.dk – and as you can see in the attached photo (please don’t think too much about the blue lines – from photoshop).

  Hope that it’s possible to setup the image and text area as attached.

  I guess it’s mainly setting the padding around image and the text-area.

  Attachments:

  You must be logged in to view attached files.
  March 11, 2016 at 7:20 pm #254973
  alexanderchristiansen

  Member

  Post count: 179

  I figured out the most of it, now the only issue is how to remove the spacing between the product image and the summary to the right.

  March 14, 2016 at 3:04 pm #255288
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Within the Theme Options => WooCommerce Options => Product Options => Override Product Image Width => On

  Change the width to 52%.

  Thanks

  March 15, 2016 at 2:32 pm #255563
  alexanderchristiansen

  Member

  Post count: 179

  Doesn’t seem to make a difference.
  http://new.organicbasics.dk/product/boxers-2-pack-14/

  I still need the padding between the split-view to be gone.

  March 15, 2016 at 2:38 pm #255567
  alexanderchristiansen

  Member

  Post count: 179

  Please see my attachement made in first post.

  March 15, 2016 at 3:36 pm #255582
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  @media only screen and (max-width: 479px) { .woocommerce div.product div.summary {
    width: 52%;
  }}

  – Kyle

  March 16, 2016 at 4:00 pm #255837
  alexanderchristiansen

  Member

  Post count: 179

  Kyle absolutely amazing!
  Can we make the div.summary to be the same size as the photo? So they are aligned in the bottom as well? 🙂
  Would be amazing! 😀

  March 16, 2016 at 4:01 pm #255839
  alexanderchristiansen

  Member

  Post count: 179

  This could potentially cause some problems when resizing browser window.
  However it could be fine with a fixed-sizing of the image if need for this.

  March 16, 2016 at 4:03 pm #255840
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Sorry, css should be:

  @media only screen and (max-width: 479px) { .woocommerce div.product div.summary {
    width: 52%;
  }}

  – Kyle

  March 16, 2016 at 4:14 pm #255842
  alexanderchristiansen

  Member

  Post count: 179

  Seems like the same css as before?
  However if I add this css into custom css under theme options, nothing happends. Though it works when i do this:

  .woocommerce div.product div.summary {
  width: 52%;
  }

  However still not resizing the background of div.summary as the featured-image. Could be amazing if these could allign in the bottom.

  March 16, 2016 at 4:29 pm #255849
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Try this:

  @media only screen and (min-width: 479px) { .woocommerce div.product div.summary {
    width: 52%;
  }}

  – Kyle

  March 16, 2016 at 4:34 pm #255851
  alexanderchristiansen

  Member

  Post count: 179

  Now it works with the padding in the middle.
  Though not aligning the bottom of the summary and photo.

  http://new.organicbasics.dk/product/boxers-2-pack-14/

  March 16, 2016 at 4:36 pm #255852
  alexanderchristiansen

  Member

  Post count: 179

  And still seems like there’s somewhat of small padding between them.

  March 16, 2016 at 4:50 pm #255854
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Unfortunately it’s not possible to set the height to match the height of the image as it’s dynamic and depends on the width of the browser

  – Kyle

  March 21, 2016 at 1:39 pm #256754
  alexanderchristiansen

  Member

  Post count: 179

  So I would need to fully customize this page to make it possible?

• Back to forum

  Posted in: Atelier