Cafepress Custom CSS - css

Question

I'm editing custom css in my Cafepress store. I'm trying to get the store to display differently on mobile and desktop. Cafepress allows me to add to the head tag contents. The media queries at the bottom are what I've added:
<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>
Next it allows me to enter code for the header, which I've done as so:
<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>Home</li>
<li><a href="http://www.cafepress.com/<cpstore:id>/s__t-
shirts-clothing">Shirts & Clothing</a></li>
<li>Everything Else
</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>Home</li>
<li><a href="http://www.cafepress.com/<cpstore:id>/s__t-
shirts-clothing">Shirts & Clothing</a></li>
<li>Everything Else
</li>
</ul>
</div>
<div id="shopWrapper">
Finally, it allows me to add the footer code, which I've done like so:
</div><!-- closing shop wrapper -->
</div><!-- closing shop container -->
</div><!-- closing shop class --!>
<div class="clear"> </div>
The current output can be viewed here: http://www.cafepress.com/spaymart
The shop container, along with header and navigation, are displaying. Content/items contained within the shop wrapper are not.
Thank you in advance for any help you might be able to provide.

Answer 1

There are many problems in code, but the main reason is your mobile banner is nested inside of your desktop banner. When screen size is less than 849px, whole desktop container (with all nested elements) disappears.
Here you can grab a clean and workind code: CodePen for cafepress.com
<div class="showOnDesktop">
<div id="shopContainer">
<div id="shopHeader">
<div id="shopName">
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner.png">
</div>
</div>
<div id="topNav">
<ul>
<li>Home</li>
<li>Shirts & Clothing</li>
<li>Everything Else</li>
</ul>
</div>
<div id="shopWrapper"></div>
</div>
</div>
<div class="showOnMobile">
<div id="shopContainer">
<div id="shopHeader">
<div id="shopName">
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner-MOBILE.png">
</div>
</div>
<div id="topNav">
<ul>
<li>Home</li>
<li>Shirts & Clothing</li>
<li>Everything Else</li>
</ul>
</div>
</div>
</div>
<div id="shopWrapper"></div>
And 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;
}
}