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: Neighborhood
• September 6, 2013 at 5:45 pm #20357
  Brookebot

  Member

  Post count: 112

  I have 1 simple request. I want to display a video 3/4 across the page & display 1 product (by the specific product ID) 1/4 across the rest of the page. It seems to me to be such a simple concept, but yet every way I try, I fail. So, I’m going to include an image attachment to this post (straight up Photoshopped), and I challenge anyone to help me get my product single page to look like this. Unfortunately, it’s just not possible with the current functionality of this theme/page builder/shortcodes. My eyes are almost starting to bleed & my brain is smoking from trying a million combinations of different methods. Please, please help me.

  September 6, 2013 at 5:53 pm #20359
  Brookebot

  Member

  Post count: 112

  CORRECTION: I challenge anyone to help me get my portfolio single page to look like this – NOT PRODUCT SINGLE PAGE

  September 7, 2013 at 2:54 am #20414
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  You want one product in 1/4 and a video in 3/4 in a portfolio item??

  You can create a Single portfolio item, Portfolio -> Add new -> Click swift builder.

  Drag a text widget, and make it 1/4 by clicking the <- arrow. and inside the text you can put this shortcode like [product id="9619"] the id will be the product id, and drag and drop a Video Widget and make it as 3/4 by using the arrow keys. (add the video in the instruction in the Video Widget). Is that you want? Let me know, what you got. Thanks, laranz.

  September 7, 2013 at 3:56 am #20421
  Brookebot

  Member

  Post count: 112

  Laranz,
  That was the 1st thing I tried. Unfortunately it did not work. See my results in the screenshot I’ve attached to this post. I’ll also attach a screenshot of my post edit screen w/ the Swift Page Builder so you can see that’s exactly what I did.

  September 7, 2013 at 8:35 pm #20470
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Try adding the following custom css to the box within theme options:

  .single-portfolio .woocommerce ul.products li.product {
  width: 100%;
  }
  

  The reason it looks like that is because of the standard WooCommerce styling. We may add a page builder asset for this soon to make it easier.

  – Ed

  September 8, 2013 at 5:08 am #20489
  Brookebot

  Member

  Post count: 112

  I applied the CSS. Product image still does not perform as expected (performs perfectly on “shop” page). See attached image. The product image is cut short, the hover is off (probably because of the way the image is being displayed), & there is no way to hide the top line.

  September 8, 2013 at 10:23 pm #20564
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  Can you send a direct link, what you tried?

  For thumbnail cut off, try this Go to Woocommerce -> Settings -> Catalog tab -> Scroll down Image Options -> Catalog images, try change width 270, height 320. And then remove and reupload that product thumbnail alone, if worked later you can use thumbnail regenerate plugin to regenerate the thumnail.. Let me know the result…

  Thanks,
  laranz.

  September 9, 2013 at 7:55 am #20627
  Brookebot

  Member

  Post count: 112

  This reply has been marked as private.
  September 9, 2013 at 8:00 am #20628
  Brookebot

  Member

  Post count: 112

  My catalog image was set to 270 x 360 before I started adding products. (Image attached for proof). Follow the link above & click on the “Shop” page to see that all catalog images work perfectly. Only the portfolio pages w/ product displayed by shortcode & width:100% have the issue with being squat (cut off) with bad hover. Do I really have to change to height of 320px? I really prefer my height of 360px for my type of product (book) rather than changing to height 320 & losing 40px off the bottom. I can see however, my ratios in the 3 types (Catalog Images, Single Product Image, and Product Thumbnails) of image sizes are off. Maybe that’s the problem?

  September 9, 2013 at 8:40 am #20631
  Brookebot

  Member

  Post count: 112

  Actually, there was only 1 number that was off in my ratios & that was the height of the Product Thumbnail (should be 160px). That number though should not make a difference in what we are trying to work on, right?

  September 9, 2013 at 9:26 pm #20823
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  Leave the catalog image size as it is!

  Try this in Custom CSS.

  .woocommerce ul.products li.product figure{
  padding-bottom: 360px !important;
  }
  

  Let me know, what you got.

  Thanks,
  laranz.

  September 9, 2013 at 9:35 pm #20826
  Brookebot

  Member

  Post count: 112

  Ehehe, I’m excited! It’s almost there! So, at normal browser window size that looks great! Re-size the window to see responsive design & it gets ugly. Can you help me fix that too?

  September 9, 2013 at 11:38 pm #20861
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  Put this in Custom CSS.

  only screen and (min-device-width: 480px){
  padding-bottom: 225px !important;
  }
  only screen and (min-device-width: 768px){
  padding-bottom: 293px !important;
  }
  

  Adjust the padding bottom according to your needs until you find the right, fit.

  Let me know, what you got.

  Thanks,
  laranz.

  September 10, 2013 at 12:37 am #20874
  Brookebot

  Member

  Post count: 112

  I think you maybe meant this & that’s not helping at all 🙁

  only screen and (min-device-width: 480px) {
  .woocommerce ul.products li.product figure {
  padding-bottom: 200px !important;
  }
  }
  only screen and (min-device-width: 768px) {
  .woocommerce ul.products li.product figure {
  padding-bottom: 260px !important;
  }
  }

  September 10, 2013 at 11:17 am #20975
  Melanie – SUPPORT

  Member

  Post count: 11032

  I’m afraid I don’t know if we can keep helping with those customizations, so I will forward this to laranz to see if he wants to take care of that.

• Back to forum

  Posted in: Neighborhood