Gradient Over Section Background

[InspireCreative]

Hi All,

This one is tripping me out…

I have a gradient applied to a column with Heading and Text inside it using the following CSS:

@media only screen and (min-width: 481px) and (max-width: 1600px){
	$el {
		background-color: rgb(255,255,255);
		background-image:
			linear-gradient(
				to right,
				rgb(255,255,255) 30%,
				rgba(255,255,255,.0));
	}
}

@media only screen and (max-width: 480px){
	$el {
		background-color: rgb(255,255,255);
    background-image:
      linear-gradient(
        to right,
        rgb(255,255,255) 50%,
        rgba(255,255,255,.0));
  }
}

• I don’t have an ID assigned or a class as I’m using $el. Is this incorrect?

My issue is, in conerstone it appears correct with the gradient over the text as per the attached screenshot-1. However, when I view it in my browser the gradient does not appear on the section like screenshot-2.

Can you help please, let me know what I’ve done to mess this up. lol

Thanks,
Jonathan

[ruenel]

Hello Jonathan,

Thanks for writing in!

Please use the Upper Layer option to have a background color overlay and then use this code instead:

@media only screen and (min-width: 481px) and (max-width: 1600px){
  $el .x-bg .x-bg-layer-upper-color{
    background-image:
      linear-gradient(
        to right,
        rgb(255,255,255) 30%,
        rgba(255,255,255,.0));
  }
}

@media only screen and (max-width: 480px){
  $el .x-bg .x-bg-layer-upper-color{
    background-image:
      linear-gradient(
        to right,
        rgb(255,255,255) 50%,
        rgba(255,255,255,.0));
  }
}

We would love to know if this has worked for you. Thank you.

[InspireCreative]

Hi RueNel,

Thanks for this. Unfortunately, the same thing happens. In cornerstone the gradient appears, but does not appear in chrome. Yet it does appear on mobile. Is there something we can do to target chrome and other browsers?

Thanks,
Jonathan

[jade]

Hey Jonathan,

Would you mind providing the URL of the page in question and the section where you are trying to add the gradient background so that we can check it?

Thank you.

[InspireCreative]

Hi Jade,

The url is processgroup.pruvenmarketing.com/services/crane-services

This is applied to all pages under the services menu. It is the Our Services Include section. It’s the parallax section with the black text you can barely read due to the gradient not appearing.

Thanks,
Jonathan

[jade]

Hi Jonathan,

Is there a chance that you have a monitor which has a resolution with more than 1600px? Because when I adjusted my screen size, the gradient background shows for screen size below 1600px.

This is because of the media query:

@media only screen and (min-width: 481px) and (max-width: 1600px) {
  $el .x-bg .x-bg-layer-upper-color{
    background-image:
      linear-gradient(
        to right,
        rgb(255,255,255) 30%,
        rgba(255,255,255,.0));
  }
}

The code above will only take effect when the device screen size is less than 1600px. Try updating it to:

@media only screen and (min-width: 481px) {
  $el .x-bg .x-bg-layer-upper-color{
    background-image:
      linear-gradient(
        to right,
        rgb(255,255,255) 30%,
        rgba(255,255,255,.0));
  }
}

Hope this helps.

[InspireCreative]

Hi Jade,

Oooooooooooooohhhhhhhhh, Come Onnnnnnnnnnnnn!!!

Thanks for the extra set of eyes on this one. Totally missed that. It works now, well - I guess it was technically working the entire time… lol

Cheers,
Jonathan

[jade]

No worries! Happens to all of us.