Blank Space Where Mobile/Desktop Image should be Hidden

Store Design
, , ,
1

Hello! I edited the code of my image banners to have the option to show on Desktop, mobile, or all devices. It worked to have the option in settings but now there is a huge blank space where the other image would be. Is there any solution for this? My website is https://shebangin.com/ and if there is a password it is “slate”. Thank you!

2

Hi @shebangin ,

I understand that there is a huge space from the hidden banner.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.
  4. At the bottom of the file, add the following CSS code:
div#Banner-template--16888077189369__8973dfd9-d168-42a8-a51d-610032500e61 {
    display: none;
}
3

Hi, thanks for your help. I don’t have a “theme.scss.liquid” or “styles.scss.liquid” file, what file should I copy that code into then?

4

Sorry for that, find a file that ends with .css or i think you have section-image-banner.css

5

Okay, I did that. It took away one of the blank spaces but there are still other spaces left. Any ideas what I can do to fix that now? Thank you for all the help!

6

Yeah, I thought its the design. :sweat_smile: There is 3 empty banners. Anyway you cant hide them in the theme editor? Here is the 2nd and 3rd.

div#Banner-template--16888077189369__0f74445b-a902-4122-8787-713fef9350a2 {
    display: none;
}

div#Banner-template--16888077189369__ed303060-93ed-4037-88e2-6e3ec6854db7 {
    display: none;
}

same instruction.

7

Hello @shebangin

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->section-image-banner.css>Add this code at the bottom.

div#Banner-template--16888077189369__8973dfd9-d168-42a8-a51d-610032500e61 {
    display: none !important;
}
div#Banner-template--16888077189369__0f74445b-a902-4122-8787-713fef9350a2 {
       display: none !important;
}
div#Banner-template--16888077189369__ed303060-93ed-4037-88e2-6e3ec6854db7 {
    display: none !important;
}
div#Banner-template--16888077189369__c93f2fdd-5a6b-47ab-a197-077334578ac1 {
   display: none !important;
}
8

This worked for the desktop view, but hid the mobile view banners. Any idea for a solution for that? Thank you for the help!