Overlapping image

Support
#1

Hi,

Would you please help me achieve a responsive overlapping effect?
I have tried on my own as seen on the image here:

However I am not able to achieve the same layout but reversed as seen below this section on the website.

I have used the following CSS:
.text{
left:10% !important;
height: 420px !important;
}

.text2{
right:10% !important;
height: 420px !important;
}

For smaller screen sizes I have hidden this section and created another section with a simple layout. It looks good on large screen sizes and small sizes as well, however, at around 1024px, the section with overlapping effect is used but doesn’t look good.

Thanks in advance!

#2

Hi there,

Thanks for posting in.

It’s a bit complicated to make the absolute positioning, it’s mostly done and calculated through javascript.

I tried fixing it through CSS and it’s not doable due to the container size, and the content’s height (taller in smaller screen). I recommend hiding them from medium device and create stacked layout starting from that device’s dimension.

Thanks!

#3

Hi,

OK I have hidden these sections on all screen sizes except large, however I am not able to get the reversed overlappting layout functioning as the one above, could you please help me with this?

The image doesn’t stay in the same position and the line of the right column is visible through the image.
I can’t figure out what I have done differently on the first section which works well.

#4

Hi there,

Please inspect the column where the left image is added, then go to its inline CSS option under Customize section and add this

z-index: 2;

It’s only normal since the right most and will always appear on top on what’s on the left.

Thanks!

#5

Hi,

Thank you!
In your previous message, did you mean that it’s not possible with CSS to make this work on large screen only?

Now the first section works perfectly fine but the 2nd section below will always move the image depending on screen size.
Is it possible to fix this?

#6

Hi there,

For the second case please add a unique class to the row or teh section by going to the customize tab of the section options, jus like the text class you added in the first one. For example add an additional class of text2, so the class item will be like this: text text2.

Then please change the image CSS and do not add a 500px add for example:

.text2 .x-image {
width: 78%;
}

By the way never use a code like this: .e5-6.x-image, .e5-34.x-image . Classes like .e5-34 are auto-generated ones and they may change if you change the position of the section or the image or after the update of the theme. Always add a unique class and add your CSS code according to that.

Alternativelty you can use the Element CSS feature instead of the unique class.

Thank you.

#7

Hi,

I have done the following but it doesn’t work. Are you considering the CSS I already have as well?
Just to be clear we are discussing Section# 4

Added class “text text2” to the row of the 2nd section

Changed from 500px to auto

Added in custom CSS:
.text2 .x-image {
width: 78%;
}

Thanks in advance!

#8

Hi again,

Actually the image doesn’t move around now but it changes size so it doesn’t look good like section# 1.
Also the whole row moves to the left when increasing screen size.

#9

Hi There,

Please try adding this custom CSS also:

@media (min-width: 980px) and (max-width: 1024px){
    .x-column.text {
        left: 5% !important;
    }
    .x-column.text .x-text,
    .x-column.text2 .x-text {
        width: 100%;
        margin: 0;
    }
}

The custom CSS wil affect on the min 980px and max 1024px screen size.

Let us know how it goes!

#10

Hi,

It’s still messed up at larger sizes.
The image is changing size depending on screen size and doesn’t stay in the middle of the text column.

#11

Hey @Hugobosss,

The image size is changing because it’s set to 75% width while the image on top is set to fixed value of 500px (see https://youtu.be/ul5un9R0tBE). Regarding the staying in the middle, it is tricky to achieve with your current setup/structure. The image and the text should have been in the same container. I’ll show you a speed setup because actually putting it in written form would take a lot of time. Also please understand that this requires custom coding and it would be your responsibility to implement it on your site, enhance and fix it if issues arise. Please see this screencast. Slow the video down and pause and play to follow along. That is possible with your current setup but what I’ve shown you is just easier. If it’s a bit hard to follow, I’d recommend that you hire a developer for this.

Hope that helps and thank you for understanding.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.