Can't align content correctly in WooCommerce product page

Question

I’m using WordPress and SiteOrigin (plugin) and it's North theme to create a t-shirt printing website and have a particular issue with aligning a few sections of a product in the product page.

Here is the link to the particular page:

http://7dollarprintedtshirts.com/product/custom-t-shirts-for-kids-and-adults/

Basically, I want the designer to be on the left with the product info on the right and the product details on the bottom.

I’ve revised the CSS with the following code so the page is full width:

body.responsive .container {
    width: 100%;
    max-width: 1500px;
}

The content seems to be aligned correctly using the following code:

.woocommerce.single #content div.product div.entry-summary {
    margin-top: 0;
    width: 54%;
    float: left;
    padding-left: 50px;
}

but when I resize my window so I can see if everything aligns correctly, it doesn’t. :(

At one point, the product info on the right moves to the below the designer which is what I want but now it’s too close to the bottom edge of the designer, but when I resize the screen even smaller, the product info seems to squeeze to the right of the designer section.

Please see attached screenshot:

http://7dollarprintedtshirts.com/wp-content/uploads/2017/04/now-text-is-squeezed.png

I tried revising the CSS but it doesn’t seem to end up the way I want.

What can I do so each part of the page

• Designer • Product info • Product details

Is spaced and aligned correctly and no matter what size the window is, everything will be spaced and aligned so it looks sectioned correctly?

Any help would be very much appreciated!

Please note that the custom CSS code has been deleted so I can start from scratch. :)

Update:

Ok, I entered the following CSS Code:

@media (max-width: 768px) {
         .fpd-product-designer-wrapper:after {
            content: '';
            display: table;
            clear: left;    
        }
      }

.fpd-product-designer-wrapper {
    margin-bottom: 50px;
}

.woocommerce div.product .summary {
    width: 38% !important;
}

.woocommerce div.product .summary {
    float: right;
    clear: right;
    width: 48%;
}

@media (max-width: 945px) {
         .woocommerce div.product .summary {
            float: left;
            clear: left;    
        }
      }

@media (max-width: 768px) {
         .woocommerce div.product .summary {
            float: left;
            clear: left;    
        }
      }

It seems to seperate the sections how I want depending on the width of the screen but when I get to lower than 944px for the product summary, it floats to the right when I believe I set it to the left. How can I correct this because what I entered above isn't working.

Update again!

I entered the following CSS code to make the designer at the top, the product summary in the middle and the product details at the bottom:

.fpd-product-designer-wrapper {
    margin-bottom: 50px;
}

body.responsive.woocommerce.single #content div.product div.entry-summary {
        width: 100% !important
}

Is this formatted correctly? When I resized it, everything seems to be aligned correctly but it's always nice to have input. :)

Answer 1

Looking at your site, the container holding the shirt stills floats left at screen size 768px and the container holding the summary is set to "float: none"

To fix this, at screen width 768px the div that holds the shirt image should not be floating. You can achieve this by either clearing the float. I hope this helps

@media (max-width: 768px) {
         .fpd-product-designer-wrapper:after {
            content: '';
            display: table;
            clear: left;    
        }
      }

OR

 @media (max-width: 768px) {
     .fpd-product-designer-wrapper {
        float: none; 
    }
  }