Backround image with content overlap

[Racimo]

Dear Support Team,

Thank you for the xtheme product, I am having fun with the tools and am enjoying the speed at which I can create designs.

I am trying to achieve a consistent look across each of my pages and I am wondering how best to achieve it.
In the screen shot below, I have a full width image – about 600px tall, and I have my content overlapping onto it.
The way I did this was by making a full width section, and then adding rows to create the boxed effect.

I am experiencing a few challenges with this current setup.

1. If I want to add shadows, I have to go row by row
2. The top margin seems to be hard to control on phone and tablet – it doesn’t overlap.

I have a feeling there is a better way to create this overlap effect, and I am hoping you can point me to the best way to do it.

Thank you so much, I am on my third installation!

Dan

[ruenel]

Hello Dan,

Thanks for writing in!

1.) Yes, are doing it correctly. The shadows can only be added in the row settings.

2.) Do you want something like this in mobile or smaller screens?

If that is the case, hide the first and empty row in smaller screens. You can do this by going to the row settings > Customize and then use the “Hide During Breakpoint” option. To know more about this option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

And then in your second row, go to row settings > Customize and insert this inline element css:

@media(max-width: 767px){
  $el {
    padding: 1em !important;
  }
}

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

[Racimo]

The breakpoint command works perfect!

May I ask, what is the additional css?

I noticed that on mobile the padding is too strong, is there a way to reduce the padding for mobile/tablet as well?
(is that what the extra code is for?)

Thank you so much!

Dan

[ruenel]

Hi Dan,

You are exactly right. The extra css code is for the second row which will reduce the padding because it is too big in smaller screens.

Regards.

[Racimo]

I might need you to take a look.
It isn’t working.

I’ll create another login and private message it.

Thank you,

Dan

[jade]

Hi Dan,

The login you have provided has limited access and is not an admin user so I am not able to see the settings in the backend. However, I tried to check the site through the the code inspector and I do not see the code added to the row settings.

Kindly make sure you have added the code to the right place:

If you want to read more about the Element CSS, please check this KB article:

Element CSS | Themeco Docs

Hope this helps.

[Racimo]

Dear Jade,

I upgraded the access to that login so it has admin capabilities.
Sorry about that!

I may have placed it in the wrong area.
I have placed that code into the row’s inline css, but I can’t get it to work.
Please look at it because I believe I followed the instructions you provided.

I am deeply appreciative for the support!

Dan

[jade]

Hey Dan,

Apologies for the confusion. You are supposed to place the code in the Element CSS and not in the Inline CSS:

Hope this helps.

Element CSS | Themeco Docs

[Racimo]

Thank you very much.
I know I’m doing it right because it’s working right on another page, and even on the sections below it.
But for some reason the row pictured in the example above, isn’t affected by the css element.
Could it be that there are other styles affecting it that I can’t see?
This is truly a mystery to me.

Thanks a million to your team and you.
I’m learning a lot and the help is much appreciated.

Dan

[ruenel]

Hello Dan,

The code did not affect because of this broken css:

.e89-11.x-text > *,.e89-19.x-text > * {
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    break-inside:avoid;
}
color:#000;

I have resolved the issue by adding this custom css in the page content’s custom css section:

@media(max-width:767px){
    #individuals .x-container{
        padding:1em !important;
    }
}

Check your page now.

[Racimo]

Amazing!
I cannot thank you enough.
I would have spent hours upon hours looking for that code.

It’s a lot to ask, but can you tell me where that was?
If you can’t, I understand.
You’ve gone above and beyond already!

Thank you so very much.

Sincerely,

Dan

[ruenel]

Hey Dan,

I wasn’t able to find the source of the broken. What I have done is override the css and use the one above which I added in the page’s custom css instead of adding it to the row element’s inline element css field.

Hope this helps.

[Racimo]

Thank you!

[jade]

You’re welcome, Dan.