无法在WooCommerce产品页面中正确对齐内容

Question

我使用的是WordPress和SiteOrigin（插件），它是北方主题创建T恤印花网站，并在对齐产品的几个部分时遇到特定问题产品页面。

这里是链接到特定页面：

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

基本上，我想设计者在左边与右边和底部产品细节的产品信息。

我已经修订，以下代码CSS使页面全宽：

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

内容似乎使用下面的代码，以正确对齐：

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

但是当我调整我的窗口大小，以便我可以看到一切正确对齐，但不是。 :(

在某一点上，右侧的产品信息移动到设计师的下面，这是我想要的，但现在它太靠近设计师的底部边缘，但是当我调整屏幕的尺寸时，产品信息似乎挤压到设计部分的右侧

请参见附件截图：

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

我试图修改CSS，但它似乎没有结束我想要的方式。

我能做些什么使页面的每个部分

•设计师 •产品信息 •产品细节

隔开并正确对齐，不管窗外是，一切都将被隔开并对齐等什么大小它看起来正确的部分？

任何帮助将非常感谢！

请注意，自定义CSS代码已被删除，所以我可以从头开始。 :)

更新：

好吧，我输入了以下CSS代码：

@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;  
     } 
     } 

这似乎单独我要如何根据屏幕宽度的部分，但是，当我得到降低对于产品摘要而言，这比944px要多，当我相信将其设置在左侧时，它会浮动到右侧。我该如何纠正这一点，因为我上面输入的内容不起作用。

再次更新！

我进入下面的CSS代码，以使在底部顶部的设计，中间产品总结和产品的详细信息：

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

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

这是格式正确无误？当我调整它的大小时，一切似乎都正确对齐，但输入总是很好。 :)

Answer 1

在你的网站看，粉盒保持衬衫的剧照漂浮在左边的屏幕尺寸768px和举行总结容器设置为“浮动：无”

为了解决这个问题，在屏幕宽度768px的拥有衬衫形象的div不应该是浮动的。您可以通过清除浮动来实现这一点。我希望这有助于

@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; 
    } 
    }