Transparent Background

Beaver Builder
1

Hi Folks,

I am trying to add a transparent background to the content area of my posts page (I am using ACF) but I can’t seem to target the correct element. The page (still in development) is http://osctr.org/event/test-event/

I have tried targeting [itemprop=“mainContentOfPage”] but no luck.

I know I’m missing something simple here. Can anyone help?

Thanks

2

Hey Mark,

I just took a peek at your site and I gather you’ve figured it out? :slight_smile:

Ben

3

Hi Ben. Kinda, but I still can’t get it for the individual events - EG http://osctr.org/event/test-event/

And on http://osctr.org/event/test-event/, I can’t seem to get the background to apply to the entire content container … there seems to be a margin or padding on the left hand side that I can’t seem to get rid of … perhaps not targeting it properly …

4

Hi Mark,

Is this now resolved, as I am not seeing any margin or padding on the left hand side?

If it isn’t resolved, I apologise in advance and therefore, would it be possible for you to provide a screenshot of the issue, please?

Thanks,
Danny

5

Hey Danny,

Still working on it for both of the pages. On the archive page, I am string to get the transparent background to cover the entire container (fl-page-content [itemprop="mainContentOfPage]) but there seems to be a margin issue. (see image)

For the individual events, I can’t seem to get a transparent background at all …

I am trying to target the area highlighted in green …

6

Hi Marc,

Thanks for the images, they were most helpful.

Can you try the following CSS, please.

.fl-page .container {
  width: auto;
}

Thanks,
Danny

7

Hey Danny,

Awesome!! That worked perfect for the http://osctr.org/event/ page. Thank you!

Any idea what element to target so that I can get the same effect on the individual event pages (such as http://osctr.org/event/test-event/)?

Thanks,

Mark

8

Sorry, just saw that this also affected other elements on the page (it also made the header and header and main nav full width), so I had to back out the changes. Is there to target a more specific element?

9

Sorry for the multiple follow-ups … I got http://osctr.org/event/ working with:

.fl-archive.container {
width: auto;
}

Only thing remaining is to figure how get the same functionality on http://osctr.org/event/test-event/

10

Hey Mark,

Can you remove the styling you have above and try the one below and see if it’s what you’re looking for?

.fl-page-content > .container {
  width: auto;
}

Ben

11

That works! Thanks Ben.

12

Awesome! And no worries at all, Mark. :slight_smile:

Enjoy BB!

Ben