Question

我们使用以下代码显示来自＆＃34; TOP OFFERS＆＃34;到＆＃34; TOP品牌＆＃34;在主页。

网站在主页上看起来并不响应＆＃34;顶级类别＆＃34;顶级charactar＆＃34;部分仅表示图像在较小的屏幕中拉伸

＆＃13;

<div class="offers ">
  <br />
  <div class="horizontal_line">
    <div>
      <span>TOP OFFERS</span>
    </div>
  </div>
  <br />
  <br /> 
  <a href="20-off.html">
    <img class="fluid2" style="max-width: 23%;" src="{{media url="wysiwyg/category/20c.jpg"}}" alt="" />
  </a> 
  <a href="50-off.html">
    <img class="fluid3" style="max-width: 50%;" src="{{media url="wysiwyg/category/50f.jpg"}}" alt="" /> 
  </a> 
  <a href="10-off.html"><img class="fluid22" style="max-width: 23%;" src="{{media url="wysiwyg/category/10c.jpg"}}" alt="" /> 
  </a>
  <br />
  <br />
  <br />
  <div class="horizontal_line">
    <div>
      <span>TOP CATEGORIES</span>
    </div>
  </div>
  <br />
  <br />
</div>
<div class=" grid_24">
  <div class=" grid_12 alpha">
    <a href="girls-toys/soft-toys.html">
      <img class="fluid5" src="{{media url="wysiwyg/category/sof33b.jpg"}}" alt="" />
    </a>
  </div>
  <div class=" grid_6">
    <a href="boys-toys/remote-control-toys.html">
      <img class="fluid6" src="{{media url="wysiwyg/category/ele33.jpg"}}" alt="" />
    </a> 
    <a href="girls-toys/arts-crafts.html"><img class="fluid7" src="{{media url="wysiwyg/category/art33.jpg"}}" alt="" />
    </a>
  </div>
  <div class=" grid_6 omega">
    <a href="boys-toys/bikes-trikes-ride-ons.html">
      <img class="fluid8" src="{{media url="wysiwyg/category/rid33.jpg"}}" alt="" /> 
    </a> 
    <a href="boys-toys/educational-learning-toys.html">
      <img class="fluid9" src="{{media url="wysiwyg/category/edu33.jpg"}}" alt="" />
    </a>
  </div>
</div>
<div class=" grid_24">
  <br />
  <br />
  <div class="horizontal_line">
    <div>
      <span>FEATURED PRODUCTS</span>
    </div>
  </div>
  <br />
  <br />
  <div class=" grid_6 alpha">
    <a href="darling-bear-pink-25-inch.html">
      <img class="fluid11" src="{{media url="wysiwyg/category/fea1a.jpg"}}" alt="" />
    </a> 
    <a href="heavy-truck-machine-super-power.html">
      <img class="fluid12" src="{{media url="wysiwyg/category/fea2.jpg"}}" alt="" />
    </a>
  </div>
  <div class="grid_12">
    <a href="top-speed-car-black-blue.html">
      <img class="fluid13" src="{{media url="wysiwyg/category/fea5.jpg"}}" alt="" />
    </a>
  </div>
  <div class="grid_6 omega">
    <a href="boys-toys/jana-police-jeep.html">
      <img class="fluid14" src="{{media url="wysiwyg/category/fea3.jpg"}}" alt="" /> 
    </a>
    <a href="model-car-remote-control-762.html">
      <img class="fluid15" src="{{media url="wysiwyg/category/fea4.jpg"}}" alt="" />
    </a>
  </div>
</div>
<div class="horizontal_line">
  <div class=" grid_24">
    <br />
    <br />
    <div class="horizontal_line">
      <div>
        <span>TOP CHARACTER</span>
      </div>
    </div>
    <br />
    <br />
    <div class=" grid_6 alpha">
      <a href="shop-by-character/barbie.html">
        <img class="fluid17" src="{{media url="wysiwyg/category/bar.jpg"}}" alt="" />
      </a> 
      <a href="shop-by-character/mickey-mouse.html">
        <img class="fluid18" src="{{media url="wysiwyg/category/mic.jpg"}}" alt="" />
      </a>
    </div>
    <div class=" grid_6">
      <a href="shop-by-character/doreman.html">
        <img class="fluid19" src="{{media url="wysiwyg/category/dor.jpg"}}" alt="" />
      </a>
      <a href="shop-by-character/chota-beam.html">
        <img class="fluid20" src="{{media url="wysiwyg/category/cho.jpg"}}" alt="" />
      </a>
    </div>
    <div class=" grid_12 omega"><a href="shop-by-character/spider-man.html">
      <img class="fluid21" src="{{media url="wysiwyg/category/sup.jpg"}}" alt="" />
      </a>
    </div>
  </div>
</div>
<div class=" grid_25">
  <br />
  <br />
  <div class="horizontal_line">
    <div>
      <span>TOP BRANDS</span>
    </div>
  </div>
  <br />
  <br /> 
  <a href="20-off.html"> 
    <img class="fluid51" style="max-width: 31.6%;" src="{{media url="wysiwyg/category/brand1.jpg"}}" alt="" /> 
  </a> 
  <a href="50-off.html">
    <img class="fluid52" style="max-width: 31.6%;" src="{{media url="wysiwyg/category/brand6.jpg"}}" alt="" /> 
  </a> 
  <a href="10-off.html">
    <img class="fluid53" style="max-width: 31.6%;" src="{{media url="wysiwyg/category/brand7.jpg"}}" alt="" /> 
  </a>
  <br /> 
  <a href="20-off.html"> 
    <img class="fluid54" style="max-width: 31.6%;" src="{{media url="wysiwyg/category/brand4.jpg"}}" alt="" />
  </a>
  <a href="50-off.html">
    <img class="fluid55" style="max-width: 31.6%;" src="{{media url="wysiwyg/category/brand8.jpg"}}" alt="" /> 
  </a> 
  <a href="10-off.html">
    <img class="fluid56" style="max-width: 31.6%;" src="{{media url="wysiwyg/category/brand9.jpg"}}" alt="" /> 
  </a>
</div>

＆＃13;

但该网站看起来没有响应能力，在手机和平板电脑上看起来不太好。

Answer 1

您的问题是由这个特定的CSS引起的：

left: -43px; /* This tells the image to position itself outside the grid */
width: 120%; /* This makes the image too wide to fit in the grid */
min-height: 175px; /* This deforms the image because it will not be scaled properly */

您拥有left课程的所有图片都有自定义width，min-height和fluid。这会导致图像变形并退出网格。

因此，只需删除此CSS并使用主题附带的适当CSS。

Answer 2

CSS中有许多错误输入的元素和类，然后不能从CSS中获取正确的媒体查询。

第一个热门优惠图片上的课程不正确，应该是fluid22，而不是fluid2。

Top Brands容器正在破坏这些图像。当所有其余容器都是grid_25时，您正在使用grid_24。

将其更改为：

<div class="grid_24"></div>

页面的其余部分只需要稍微清理间距，你应该很好。

以网格格式在主页上传图像后，网站没有响应

2 个答案: