Grid Element's Layer Background Responsive

[burkiburak]

Hey there,

Is there any css workaround to make Grid Element’s Layer Background to disappear on the mobile view? Using the option “hide breakpoint” for smaller devices makes it completely disappear.

this is okay for the first four end devices:

But I would rather get rid of it here:

Thanks

[ruenel]

Hello Burak,

Thanks for writing in! Where have you added the background image, in the section or the grid element? By default there is no setting in the elements that you can disable the background image in smaller screens. You need to add CSS code into X > Theme Options > CSS to be able to hide it on smaller devices screens.

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

By default, the background image is using this selector:
When added in the lower layer:

.x-bg .x-bg-layer-lower-image {
  /* the background image css code here */
}

When added in the lower layer:

.x-bg .x-bg-layer-upper-image {
    /* the background image css code here */

}

And to specify that that the css will only take place in small screen, you need to use @media css block. Hence, the final custom css code to hide the background image would be:

@media(max-width: 767px){

  /* add which layer you have added the image and set the background image property to none:
  .x-bg .x-bg-layer-lower-image {
    background-image: none !important;
  }
}

This is just an example to resolve your issue. Feel free to modify to satisfy your needs for your background image. You will add the custom css code in the section or grid element, whichever you have applied the background image. Simply find the “Customize” tab and add the custom css as an inline element css.

Hope this explains it briefly.