Section overlapping element different on mobile

Support
#1

Hi,

I created a column that overlaps the previous or next section (with a class and css)
When I get it right on computer or tablet (horizontal), its not good on mobile.
Is there a way to make sure the column aways overlaps in the same way and doesnt conflict with content of neighbouring columns?

Thanks
Auke

#2

Hello Auke,

Thank you for the very detailed information. I have inspected your page and actually you are already on the correct path. You are using this custom css:

@media (min-width: 979px)
  .up-overlapping-class {
    position: relative;
    top: -150px;
  }
}

You have set the bottom margin to zero which also affects the smaller screens. I would recommend that you update your code and add a bottom margin for smaller screens. You might have something like this:

.up-overlapping-class {
  margin-bottom: 2em !important;
}

@media (min-width: 979px)
  .up-overlapping-class {
    position: relative;
    top: -150px;
    margin-bottom: 0 !important;
  }
}

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

#3

Great! That solved the conflict with other colums. Thanks.
Short note: in your post, mentioning my css, you missed one accolade. Its also missing in your solution.
If someone else decides to use this, it will probably not work if they copy the css.

I have one issue left: I want the column to be (about) in the middle between 2 sections.
It does that on my laptopscreen and also in my tablet in horizontal mode. But on tablet vertically and on mobile phone both my columns end up in the lower section, not overlapping the border anymore. Is there a solution to that?

#4

Hello Auke,

The given css for the overlapping columns will only take effect in device screens that is more than 979 pixels. Do you want to have the overlapping columns in smaller screens too? Please have your code updated and use this:

.up-overlapping-class {
  margin-bottom: 2em !important;
}

@media (min-width: 768px)
  .up-overlapping-class {
    position: relative;
    top: -150px;
    margin-bottom: 0 !important;
  }
}

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

#5

Thanks!
That was a bit stupid of me.

If I could ask one more question:
I have a specific image on several pages that has keeps white space on the right side, although I set everything in such a way it should have any space. On tablet its fine. On large screen, the space appears.

I will send you the url with a secure note.
Its the stretched image with green and the woman with glasses on the right (in the middle section of the page).

Tried everything but cant get rid of the space.

Thanks.

#6

Hi @rainmakernl,

Thanks for reaching out.

I assume you’re referring to the image that has spacing on the right. The image could only stretch to its original size, because if it stretches more than it can render then the quality will be pixelated. The responsive nature of the image should only works on its max width and to smaller devices to preserve quality. But, if you wish to override this then please inspect your image and change its size by adding this CSS to Element CSS

$el, $el img {
width: 100% !important;
max-width: 100% !important;
}

Cheers!

#7

Thanks!
I will redo the images so I dont have to stretch them

#8

You’re welcome.

#9

Hi,

There still seems to be a problem with the site.
On every device I checked the site appeared normal.
But this morning I saw the site on a larger screen of a colleague and it breaks something up.
I checked with a relative and he also saw the brwaking up onnhis larger screen.

On my site you have the 2 green block overlapping the slider above it.
Thats good.
Underneath the 2 green blocks you have 3 green circles with icons and text.
They should be horizontal next to each other.
But on larger devices they break up an do not stay aligned horizontally.
I assume that this still has to do with the 2 overlapping elements above?

Thanks for your responsen.
Auke

#10

I also noted the break up on a laptop with a smaller screen.
And when I check in cornerstone how it should look on different devices it all shows nice horizontal rows.
It seems to be related to Apple vs Windows.
When I login my wordpress and open Cornerstone on a Macbook, everything is horizontally aligned.
When I login on a windows laptop, then I see the three circles disorganized in Cornerstone.

#11

Hello @rainmakernl,

Because your columns were not of the same heights, it messed up the succeeding column’s alignment. To resolve this issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section {
    clear: both;
}

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

#12

Great! That solved it.
Thanks for you help.

One last question (if I may): is there a way in Cornerstone to force the two colums at the top (the green squares) to always be of the same height?

#13

Hello @rainmakernl,

You can have the same column heights by following this thread:

Hope this helps. Please let us know how it goes.

#14

Thanks!
Will check that thread.

#15

You’re very welcome!

#16

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