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
• February 11, 2016 at 5:48 pm #248427
  solidsn2004

  Member

  Post count: 208

  Hi,

  I am using 2 third party plugins to display my product in the shop (One called Fancy Product Designer:FDP and one called Multistep Product Configurator: MSPC). The plugins work with Woocommerce and I am trying to display them correctly inside the shop page.
  What I want to achieve is to get the MSPC (where you select the bags) on the left of the screen and the FDP (where you see the variation) next to it (see attached image).

  For now I am using the following css code to make the MSPC smaller (It normally goes full screen inside a wrapper):

  .mspc-wrapper.mspc-clearfix.mspc-module-accordion{
      overflow: auto;
      width: 400px;
  }

  As you can see the FDP display is 700px wide and I would like it to be displayed next to the MSPC.
  I have tried to use float:left to both mspc-wrapper and the div of the FDV but it doesn’t work.

  I could use the following CSS code but it only works on 13″ screens:

  .mspc-wrapper.mspc-clearfix.mspc-module-accordion{
      overflow: auto;
      width: 400px;
  }
  
  div#fancy-product-designer-120.fpd-container.fpd-shadow-1.fpd-clearfix.fpd-show-up{
      position: absolute;
      top: 150px;
      right: 70px;
  }

  However, I want it to be responsive and float it next to the MSPC.

  Is there a chance you can assist me with this?

  Thanks in advance.
  PS. To see the site you can use the same login password.

  Attachments:

  You must be logged in to view attached files.
  February 11, 2016 at 11:43 pm #248488
  solidsn2004

  Member

  Post count: 208

  I have actually managed to kinda make it work but the way I did it doesn’t look very correct since I had to set a negative value for the margin.

  Here is the code I’ve used:

  .mspc-wrapper.mspc-clearfix.mspc-module-accordion{
      overflow: auto;
      width: 400px;
  }
  
  #fancy-product-designer-120.fpd-container.fpd-shadow-1.fpd-clearfix.fpd-show-up{
      float: right;
      margin-top: -720px!important;
  }
  
  @media only screen and (max-width: 767px) {
      .mspc-wrapper.mspc-clearfix.mspc-module-accordion{
      overflow: auto;
      width: auto;
      } 
      #fancy-product-designer-120.fpd-container.fpd-shadow-1.fpd-clearfix.fpd-show-up{
      float: right;
      margin-top: 0px!important;
      }
  }

  The only problem now is that when I click on the second tab called “2. Additional Flap” the canvas moves along with it.
  Is there a way to fix this? I noticed that this is happening because I have a 7nth option called “No additional flap” that pushes the FPD to move further down.

  Any tips?

  February 12, 2016 at 9:22 am #248550
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi there,

  Unfortunately that customisation is beyond our scope of support as it is customising a 3rd parry plugin, it’s not theme related. Please contact the plugin developer to help you with this. We only provide support for theme issues, and at times basic customisations. While we’d love to be able to support every customisation request, we simply don’t have the time.

  I hope you understand

  – Kyle

  February 12, 2016 at 12:15 pm #248644
  solidsn2004

  Member

  Post count: 208

  I understand Kyle,

  I was just asking in case you could take a quick look. But to be honest I’ll invest some more time to figure it out although it’s pretty much done using the code I am using above.

  Thanks anyway.

  February 12, 2016 at 12:16 pm #248648
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Ok no problem

• Back to forum

  Posted in: Atelier