radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator Another

Start a new topic

Product Page Layout (left alignment of product details on mobile)

Trying to get a nice layout with the FPD editor left of the product Title/Price/Description. If you are on a PC, with a wide enough desktop, it's fairly straightforward. But on tablets, mobile, or smaller screen resolutions desktop, there is a layout problem. You end up with the editor on top, and the product Title, price, etc. below the editor and offset to the right awkwardly. I don't really know enough about editing the css of the woocommerce product pages, and more specifically, when FPD is in play. 

So I have implemented the FPD requirements + the CSS code provided here: https://support.fancyproductdesigner.com/support/solutions/articles/5000583771-customizing-the-layout-of-woocommerce-product-pages

.fpd-product-designer-wrapper { float: left; width: 518px; //Here you need to know the width of the product image container that is normally displayed. If you do not know how to get it, just try different width values. }

Looks fine on desktop. But here is what it looks like mobile (both portrait and landscape)...

image


image

TRYING TO ACHIEVE THIS...

image



Can anyone help?


Tony


Sorry, not sure I was clear. Here is another example of what is bad, and what is good (desired layout). If it's something that you can easily evaluate and share - great! If you want to get paid, no problem.

Not sure if this is theme specific (using X), or if it is woocommerce specific css, but I did create a solution. This sizing is based on the size I set for the FPD editor. If I make the editor bigger or smaller, I would likely need to change this @media px size requirement. And I am not sure how it will work in all use case scenarios.


@media (max-width:1600px){

  .woocommerce div.product .summary {

    float: left;

    /* clear: right; */

    width: 96%;

  }

I already messaged [...]as you said you aren't doing customizations atm - thx for the reference.

Also, I wanted to be supportive to forum and posted a starting point for a fix to my topic using css.. So far, I have managed to get the product details left aligned below the FPD editor on devices with screen size up to 1600px (loosely based on the width I chose for the editor, which at this time is 700 px). Because I changed those from float: right to float: left, I increased the width of the product details to cover page width also.

I did notice that is is possible to select a much larger editor size like 1920x1920. Editor fits nicely on the left of the details (HD screen size), but when the page size is reduced, and the product details float left, the editor remains small (not full width). So there is more research to do :). Need to find a way to get the editor to occupy fullwidth of screen when details float underneath it.


Login or Signup to post a comment