我正在尝试将this script实施到shopify页面中。
以下是我的进展：www.mak-home.com/pages/the-verve。
我已经使用了javascript，但我无法弄清楚尺码问题 理想情况下，我希望照片布局具有100％的宽度 - 边缘到边缘。
我知道现在不可能使用适用于限制宽度的所有shopify页面的main-content-wrapper。 （这也是我试图找出的东西 - 如何使这一页全宽）。
我做了一个测试，我将所有页面都设置为100％宽度（没有内容包装），并且照片网格的大小没有变化。我使用下载中包含的库存css并在index3.html文件中复制了html的结构。
我似乎无法确定为什么这件事情不会变得更大。
感谢任何帮助。
以下是一些有用的代码：
{% if template contains 'page' %}
{{ 'demo.css' | asset_url | stylesheet_tag }}
{{ 'style.css' | asset_url | stylesheet_tag }}
{{ 'fallback.css' | asset_url | stylesheet_tag }}
{{ 'modernizr.custom.26633.js' | asset_url | script_tag }}
{{ 'jquery-1.8.3.min.js' | asset_url | script_tag }}
{% endif %}
</head>
...
{% if template contains 'page' %}
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 3,
columns : 15,
animType : 'fadeInOut',
maxStep : 2,
interval : 2000,
preventClick : false,
w1024 : {
rows : 5,
columns : 6
},
w480 : {
rows : 6,
columns : 4
},
w320 : {
rows : 7,
columns : 4
},
w240 : {
rows : 7,
columns : 3
},
} );
});
</script>
{{ 'jquery.gridrotator.js' | asset_url | script_tag }}
{% endif %}.ri-grid{
margin: 30px auto 30px;
position: relative;
height: auto;
}
.ri-grid ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.ri-grid ul:before,
.ri-grid ul:after{
content: '';
display: table;
}
.ri-grid ul:after {
clear: both;
}
.ri-grid ul {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.ri-grid ul li {
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
margin: 0;
padding: 0;
float: left;
position: relative;
display: block;
overflow: hidden;
background: #000;
}
.ri-grid ul li a{
display: block;
outline: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Grid wrapper sizes */
.ri-grid-size-1{
width: 55%;
}
.ri-grid-size-2{
width: 100%;
}
.ri-grid-size-3{
width: 100%;
margin-top: 0px;
}
/* Shadow style */
.ri-shadow:after,
.ri-shadow:before{
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
max-height: 100px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.ri-shadow:after{
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.ri-grid-loading:after,
.ri-grid-loading:before{
display: none;
}
.ri-loading-image{
display: none;
}
.ri-grid-loading .ri-loading-image{
position: relative;
width: 30px;
height: 30px;
left: 50%;
margin: 100px 0 0 -15px;
display: block;
}<div id="ri-grid" class="ri-grid ri-grid-size-3">
<ul>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.48.58_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.19_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.10_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.52.01_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.54.46_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.54.24_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.53.34_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.53.18_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.53.03_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.52.33_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.52.18_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.51.33_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.51.20_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.51.11_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.50.51_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.50.37_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.50.15_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.50.05_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.59_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.52_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.43_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.36_PM.png?17299102800213359554"/></a></li>
<li><a href="#"><img src="https://cdn.shopify.com/s/files/1/0784/0657/files/Screen_Shot_2015-10-07_at_1.49.29_PM.png?17299102800213359554"/></a></li>
</ul>
</div>
<div>
答案 0 :(得分：0)
你在CSS的所有地方都有问题限制了事物的宽度。 您可以通过更改主题来修复shopify CSS。看起来插件样式限制了小部件的宽度，http://cdn.shopify.com/s/files/1/0784/0657/t/63/assets/fallback.css?13939960370831423999具有：
.ri-grid{
width: 600px;
}
看起来您应该颠倒样式表标记的顺序，以便demo.css规则覆盖其他两个样式的等效样式，而style.css覆盖fallback.css。
{{ 'fallback.css' | asset_url | stylesheet_tag }}
{{ 'style.css' | asset_url | stylesheet_tag }}
{{ 'demo.css' | asset_url | stylesheet_tag }}