How can I hide banner text on mobile using the XStore theme?

Technical Q&A
1

Hi guys! My website is www.avrri.co.uk - Basically, I’m using the XStore theme that I had paid for and I’m having a bit of trouble with the hero banner. On desktop, it’s fine - the text is exactly where I want it and it looks perfect. On mobile however, the text is completely sprawled across the image.

I’ve thought about it and since resizing it may be a pain, I wouldn’t mind hiding it on mobile, but since I’m using a theme, I have no idea how to code this. Can anyone help me figure out how to hide it on mobile only? The theme does not have an option to do this.

Thank you guys, I owe you a lot.

example.png
example.png599×272 93.6 KB

2

@Smedly

@media only screen and (min-width: 600px) {
.s-banner-content .banner-item {
    margin-top: 20px !important;
    margin-bottom: 0;
}
.section-show-1573462595816 .home-slideshow .swiper-slide {
    display: none !important;
}
}

@Smedly

  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/home.scss.css ->paste Above code at the bottom of the file.
  3. Save it.
3

Hi @Zworthkey thank you so much for your time!

So, I gave that a go and it seemed to make the banner disappear completely on desktop, but was still there on Mobile haha :slightly_smiling_face:

Here’s what I mean. I’ve also shown the code incase I did it wrong?

All I would like to try and do is make the overlay text not appear on mobile only.

correct.png
correct.png2254×1114 112 KB

new_img.png
new_img.png492×254 71.4 KB

4

@Smedly

@media only screen and (max-width: 600px) {
.s-banner-content .banner-item {
    margin-top: 20px !important;
    margin-bottom: 0;
}
.section-show-1573462595816 .home-slideshow .swiper-slide {
    display: none !important;
}
}

@Smedly
Remove the previous code and add it.

5

OK, that worked out!

Thank you for your time my friend :slightly_smiling_face: