How can I display a banner only on mobile and hide multi-column on desktop?

Technical Q&A
1

Hi,

I have a multi-column on my homepage which displays perfectly on desktop but resizes quite small on mobile. I want to know if I can input code to hide the multi-column for mobile. Instead I have created a banner which I would like to show on the mobile view only & hide from desktop.

Currently I have both visable on my store here: www.webse.co.uk

slatty_0-1654884526962.png
slatty_0-1654884526962.png1920×1034 323 KB

Please advise if this is possible

Thanks!

2

HI @slatty ,

Try this code below.

  1. Go to Admin page > Online store > themes > Actions > Edit code
  2. Open the base.css under the Asset folder then add the code below.
@media only screen and (max-width: 750px) {
#shopify-section-template--16080774562046__1651180914186d9120 {
display: none !important
}
}
3

Thanks @made4Uo it’s worked like a charm to hide on mobile. Is it possible to make the space between the image banner on top a little greater as they are touching now

slatty_0-1654887645948.png
slatty_0-1654887645948.png1284×2778 379 KB

Also how do I hide the multi-column on desktop so it’s just the banner showing please

thansk again!!

4

Hi @slatty ,

I think you mean hide the Banner on desktop?

Here is the code below to adjust the spacing and hide the banner on desktop

@media only screen and (min-width: 750px) {
#Banner-template--16080774562046__1654858810235d233c {
display: none !important
}
}

#Banner-template--16080774562046__1654858810235d233c {
margin-top: 25px !important
}
5

Thank you so much @made4Uo That is perfect!