Cafepress自定义CSS

Question

我在我的Cafepress商店中编辑自定义CSS。我试图让商店在移动设备和台式机上以不同方式显示。 Cafepress允许我添加头标记内容。底部的媒体查询是我添加了什么：

<style> 
body 
    { 
    background-color:#ffffff; 
    } 
#cpWrapper{ 
    padding:0; 
    background-image:url('http://i3.cpcache.com/image/110358274_400x400.png'); 
    border-bottom: 1px solid #e14c3b; 
    width:100%; 
    max-width:1000px; 
    margin:auto; 
    } 
#shopContainer{ 
    width:96%; 
    max-width:960; 
    background-color:#ffffff; 
    margin:0px auto; 
    }  
#shopBorder{ 
    border:0; 
    background-color:#e14c3b; 
    border-top:0; 
    } 
#shopWrapper{ 
    width:94%; 
    max-width:940; 
    background-color:#ffffff; 
    border:0; 
    padding:20px; 
    } 
#shopHeader{ 
    background-color:#ffffff; 
    } 
.bodyText a{ 
    text-decoration:none; 
    } 
.center 
    { 
    margin:auto; 
    width:50%; 
    } 
.smallsidebartext a{ 
    font-size: 12px; 
    text-decoration:none; 
    } 
#sidebarContent { 
    padding: 85px 5px 5px; 
    position: relative; 
    } 
#sidebarContent table { 
    width:auto; 
    } 
#sidebarContentTD { 
    min-width:200px; 
    } 
#shopCollection{ 
    font-family:Georgia,"Times New Roman",Times,serif; 
    font-size:15px; 
    font-weight:bold; 
    font-color:#e14c3b; 
    left: 7px; 
    position: absolute; 
    top: 40px; 
    } 
.promoBox{ 
    margin-top:40px; 
    } 
.sidebarbg { 
    background-color:#ffffff; 
    border-right: 1px dashed #e14c3b; 
    } 
#shopName{ 
    font-family:Georgia,Times,serif; 
    font-size:48px; 
    color:#e14c3b; 
    padding:10px 10px; 
    } 
#colorBar{ 
    height:16px; 
    } 
#topNav{ 
    background-color:#ffffff; 
    font-family:"times New Roman",Times,serif; 
    font-size:16px; 
    font-weight:bold; 
    color:#e14c3b; 
    text-align:center; 
    width:96%; 
    max-width:960px; 
    margin:auto auto 25px; 
    border-top: 1px solid #e14c3b; 
    border-bottom: 1px solid #e14c3b; 
    padding:0; 
    } 
#topNav ul, #topNav ul li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    float:left; 
    } 
#topNav ul{ 
    width:96%; 
    max-width:960px; 
    } 
#topNav ul li a{ 
    display:block; 
    padding:15px 10px; 
    line-height:100%; 
    color:#e14c3b; 
    text-decoration:none; 
    } 
#searchFormContainer{ 
    width:206px; 
    float:right; 
    left: -16px; 
    position: absolute; 
    top: 0; 
    } 
#submitSearch{ 
    float:right; 
    } 
#searchTerm{ 
    float:left; 
    width:125px; 
    height:16px; 
    padding:3px; 
    } 
@media (max-width: 849px) { 
.showOnDesktop { 
    display: none; 
    }} 
@media (min-width: 849px) { 
.showOnMobile { 
    display: none; 
    }} 

</style> 

下它可以让我的头，我已经做了这样的输入代码：

<div class="showOnDesktop"> 
    <div id="shopContainer"> 
     <div id="shopHeader"> 
     <div id="shopName"><a href="https://spaymart.org" rel="nofollow"> 
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner.png"> 
</a> 
     </div> 
     </div>  
      <div id="topNav"> 
       <ul> 
        <li><a 
href="http://www.cafepress.com/<cpstore:id>">Home</a></li> 
        <li><a href="http://www.cafepress.com/<cpstore:id>/s__t- 
shirts-clothing">Shirts &amp; Clothing</a></li> 
        <li><a 
href="http://www.cafepress.com/<cpstore:id>/s__mugs">Everything Else</a> 
</li> 
       </ul> 
      </div> 
     <div id="shopWrapper"> 

<div class="showOnMobile"> 
    <div id="shopContainer"> 
     <div id="shopHeader"> 
     <div id="shopName"><a href="https://spaymart.org" rel="nofollow"> 
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner- 
MOBILE.png"></a> 
     </div> 
     </div>  
      <div id="topNav"> 
       <ul> 
        <li><a 
href="http://www.cafepress.com/<cpstore:id>">Home</a></li> 
        <li><a href="http://www.cafepress.com/<cpstore:id>/s__t- 
shirts-clothing">Shirts &amp; Clothing</a></li> 
        <li><a 
href="http://www.cafepress.com/<cpstore:id>/s__mugs">Everything Else</a> 
</li> 
       </ul> 
      </div> 
     <div id="shopWrapper"> 

最后，它允许我来添加页脚代码，我已经像这样做：

 </div><!-- closing shop wrapper --> 

    </div><!-- closing shop container --> 

</div><!-- closing shop class --!> 

<div class="clear">&nbsp;</div> 

电流输出可以在这里看到：http://www.cafepress.com/spaymart

商店容器以及标题和导航正在显示。店铺包装内包含的内容/物品不是。

非常感谢您提供任何帮助。

Answer 1

代码中存在很多问题，但主要原因是您的移动横幅嵌套在桌面横幅内。当屏幕尺寸小于849px时，整个桌面容器（包含所有嵌套元素）消失。 在这里，你可以抓住一个干净workind代码：CodePen for cafepress.com

<div class="showOnDesktop"> 
    <div id="shopContainer"> 
    <div id="shopHeader"> 
     <div id="shopName"> 
     <a href="https://spaymart.org" rel="nofollow"><img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner.png"></a> 
     </div> 
    </div>  
    <div id="topNav"> 
     <ul> 
     <li><a href="http://www.cafepress.com/<cpstore:id>">Home</a></li> 
     <li><a href="http://www.cafepress.com/<cpstore:id>/s__t-shirts-clothing">Shirts &amp; Clothing</a></li> 
     <li><a href="http://www.cafepress.com/<cpstore:id>/s__mugs">Everything Else</a></li> 
     </ul> 
    </div> 
    <div id="shopWrapper"></div> 
    </div> 
</div>  
<div class="showOnMobile"> 
    <div id="shopContainer"> 
    <div id="shopHeader"> 
     <div id="shopName"> 
     <a href="https://spaymart.org" rel="nofollow"><img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner-MOBILE.png"></a> 
     </div> 
    </div>  
    <div id="topNav"> 
     <ul> 
     <li><a href="http://www.cafepress.com/<cpstore:id>">Home</a></li> 
     <li><a href="http://www.cafepress.com/<cpstore:id>/s__t-shirts-clothing">Shirts &amp; Clothing</a></li> 
     <li><a href="http://www.cafepress.com/<cpstore:id>/s__mugs">Everything Else</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 
<div id="shopWrapper"></div> 

和CSS：

body { 
    background-color:#ffffff; 
} 

#cpWrapper { 
    padding:0; 
    background-image:url('http://i3.cpcache.com/image/110358274_400x400.png'); 
    border-bottom: 1px solid #e14c3b; 
    width:100%; 
    max-width:1000px; 
    margin:auto; 
} 

#shopContainer { 
    width:96%; 
    max-width:960; 
    background-color:#ffffff; 
    margin:0px auto; 
} 

#shopBorder { 
    border:0; 
    background-color:#e14c3b; 
    border-top:0; 
} 

#shopWrapper { 
    width:94%; 
    max-width:940; 
    background-color:#ffffff; 
    border:0; 
    padding:20px; 
} 

#shopHeader { 
    background-color:#ffffff; 
} 

.bodyText a { 
    text-decoration:none; 
} 
.center { 
    margin:auto; 
    width:50%; 
} 
.smallsidebartext a { 
    font-size: 12px; 
    text-decoration:none; 
} 
#sidebarContent { 
    padding: 85px 5px 5px 5px; // add last padding 5px 
    position: relative; 
} 

#sidebarContent table { 
    width: auto; 
} 

#sidebarContentTD { 
    min-width:200px; 
} 

#shopCollection { 
    font-family:Georgia,"Times New Roman",Times,serif; 
    font-size:15px; 
    font-weight:bold; 
    font-color:#e14c3b; 
    left: 7px; 
    position: absolute; 
    top: 40px; 
} 

.promoBox { 
    margin-top:40px; 
} 

.sidebarbg { 
    background-color:#ffffff; 
    border-right: 1px dashed #e14c3b; 
} 

#shopName { 
    font-family:Georgia,Times,serif; 
    font-size:48px; 
    color:#e14c3b; 
    padding:10px 10px; 
} 

#colorBar { 
    height:16px; 
} 

#topNav { 
    background-color:#ffffff; 
    font-family:"times New Roman",Times,serif; 
    font-size:16px; 
    font-weight:bold; 
    color:#e14c3b; 
    text-align:center; 
    width:96%; 
    max-width:960px; 
    margin:auto auto 25px; 
    border-top: 1px solid #e14c3b; 
    border-bottom: 1px solid #e14c3b; 
    padding:0; 
} 

#topNav ul, #topNav ul li { 
    margin:0; 
    padding:0; 
    list-style:none; 
    float:left; 
} 

#topNav ul { 
    width:96%; 
    max-width:960px; 
} 

#topNav ul li a { 
    display:block; 
    padding:15px 10px; 
    line-height:100%; 
    color:#e14c3b; 
    text-decoration:none; 
} 

#searchFormContainer { 
    width:206px; 
    float:right; 
    left: -16px; 
    position: absolute; 
    top: 0; 
} 

#submitSearch { 
    float:right; 
} 

#searchTerm { 
    float:left; 
    width:125px; 
    height:16px; 
    padding:3px; 
} 

@media screen and (max-width: 849px) { 
    .showOnDesktop { 
    display: none; 
    } 
} 
@media screen and (min-width: 850px) { 
    .showOnMobile { 
    display: none; 
    } 
}