How can I make a page on my site only visible on mobile?

[kenzkirk16]

Hello! I need to make one of the pages on my site visible only on mobile. The contents are too stretched out on desktop. Any idea how to do this? Website: pippbaby.com Page: Freebies.

[Wish-It]

You can add this CSS to make it not look too stretched on desktop, it would be a better experience than completely hiding it on desktop.

@media only screen and (min-width: 760px){
#freebies main#MainContent > div {
    max-width: 600px;
    margin: 0 auto;
}
}

[kenzkirk16]

Where exactly would I add this and in what exact format? Thanks!

[Wish-It]

Add it at the end of theme.css file (or themes.scss.liquid file), or you can also find apps on Shopify AppStore to add custom CSS / JS 

[kenzkirk16]

Thank you! Can I also do that for this page? https://pippbaby.com/pages/contact

The top graphic is also huge on desktop but perfect on mobile.

[Wish-It]

Yes, add this CSS,

#contact-us .brick__block__image {
    max-width: 760px;
    margin: 0 auto;
}

[kenzkirk16]

Thanks! Last thing - can I also do this for my homepage images that are super stretched out on desktop but perfect on mobile! Thank you so much - this has been SO helpful!

[Wish-It]

On homepage if you reduce the banner width it will also impact the rest of the banners, check screenshot. It will require code level change to customize section to have adjustable width, I'll need theme access to do that change.