Color Section issue – Workaround From the Forum doesn´t work!

[Jo_Smud]

I need support for a Color Section Problem.
I want to use a Color Section for a Fixed Image Element on my Website.
The Element works fine in Desktops but on mobile Devices the Image is cut off.

I searched the Forum for this issue and found several CSS Workarounds, but there is a Problem left.

I used this Workaround:
https://kriesi.at/support/topic/hide-a-color-box-background-image-on-smartphone/

It works, the Background Image is Displayed on Desktop and Hide on Mobile. But the Problem is, that the fixed Image effect is not working anymore with this Workaround (like the author of the linked Thread says at his Last post).

So could you help me with the CSS Code to create a Workaround that does the Same than the linked Workaround, but with the fixed image effect?

Here The CSS from the Original Thread:

#bgimage{ 
	background: #000 url(image.jpg);
	background-size: cover;
	background-position:center center;        
}
/* Home page section images on mobile */
@media only screen and (max-width: 767px) {
#bgimage{ 
	background: #000!important;
}
}

You find my Website in private Content section.
On the Mainpage I created a Color Section to show you what I want (actual the CSS Workaround is inactive).

Would be great to get some help for this!

[Nikko]

Hey Jo_Smud,

Try adding this code in your Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:767px) {
  .home #av_section_1 {
    background-size: auto 100% !important;
  }
}

Let us know if this helps :)

Best regards,
Nikko

[Author]

Posts