custom css parallax sections individually

Shapely
1

Hi,

I am creating a website for an event currently at http://bncball.doayee.co.uk and have used the custom css as follows:

.home .top-parallax-section {
  display:table;
  margin:0 auto;
	margin-top:100px;
  margin-bottom:100px;
  background: rgba(255,255,255,0.75);
  padding:25px 25px;
	 min-width: 80%;
   min-height: 80%;
   width: auto;
   height: auto;
	box-shadow: 5px 5px 10px grey;	
}

This achieves the desired effect on the three boxes for text lower down the page, but also displays on the top section, as that is also a .top-parallax-section I assume. Is there a way to stop it appearing on only the top section.

Thanks!
Tom

2

Hello there,

I hope you are doing well today.

You have the css using the top parallax section so it will affect the top section, you would have to remove that identifier and use another that only affects the sections that you want it to.

Best Regards,
Support

3

To help anyone else with this problem, the solution was to target the top-parallax-section only within the widgets that had been configured with a small background image (the text ones) using

.home .small-screen .top-parallax-section

4

hey there

So, is your problem resolved finally? :slight_smile: