Hi,

I am trying to build a custom page from scratch with two views: a mobile view and a desktop view. I first built it for desktop, then realized my content was too small on mobile so had to go back and create the mobile view.  I did this by adding CSS classes “mobile-hide” and “desktop-hide” to the elements. Then I added custom code to hide the mobile content if the viewport was greater than 601px, and hide the desktop content if the viewport was less than or equal to 600px.

It is working for the mobile view. On my phone I can see only the mobile content. But on the desktop view, I see both the mobile and desktop content and I’m not sure why.

Here is the URL: http://blog.gregorypacks.com/about/

Here is the custom code I am using. Note that not all of this code relates to this page, I’m just providing it all for context for your team. The code we want to target is at the end:

/* remove whitespace on home page */
.home.blog #content {
width: 100%;
padding: 0;
}

.home.blog #content article {
width: 33.3%;
}

/* remove whitespace on category page */

.category #content,
.home.blog #content {
width: 100% !important;
padding: 0;
}
.category #content article,
.home.blog #content article {
width: 33.3%;
}

/* hide author on blog entries */
.post-meta-author {
display:none;
}

/* hide icons when hovering over blog entry */
.post-container .sh-table-full {
display: none;
}

/* force footer heading text color */
.sh-footer .sh-footer-widgets h3 {
color: #383838 !important;
}

#page-container .sh-footer .sh-copyrights a:hover {
color: #e62601 !important;
}

/* custom About Us page */

@media screen (min-width: 601px) and (max-width: 2560px) {
.desktop-hide {
display: none;
}
}

@media screen and (max-width: 600px) {
.mobile-hide {
display: none;
}
}

Additionally, I provided 2 screenshots of the desktop view so you can have a working example of what elements are desktop only and which are mobile only.

I’m hoping you can help me with this. Looking forward to your response.

Thank you!

-Kristy