Mobile Issues with Overlap

Support
#1

Hello,

I was using this code to make an over lap effect on the home page:

.my-class {
position: relative;
top: -150px;
z-index: 16000;
}

I wanted the content in the first row to overlap the slider. I have used this on other sites and it works fine, however this time the overlap is happening on the mobile view.

Is there a way I can tweak the code to make it work?

Here is the website: https://njdynamicchiro.com/

#2

Hello @gallagherBD

Thanks for writing to us.

If you want the content section to be overlapped on the slider in the desktop mode only you need to add your CSS in Media Queries so it will only affect the desktop view, you can find examples of CSS Media Queries here.

@media (min-width:992px) {
 /* big landscape tablets, laptops, and desktops */
.my-class{
position: relative;
top: -150px;
z-index: 16000;
}
}

For the CSS code, I suggest that you get started with this tutorial. For the CSS code itself.

You can add custom CSS under Theme Options > CSS

Please note that the purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Thanks

#3

This is great but now there is a space underneath. If I mess with the margins then it is overlapped on mobile.

Any ideas on how to fix that?

#4

Hello @gallagherBD,

Instead of using the top: -150px, kindly remove that and replace it with margin-top: -120px. The margin CSS property will not leave any empty spaces at the bottom of the element. Please have it updated and kindly let us know how it goes.

Best Regards.

#5

Right as rain!

#6

@gallagherBD,

It’s our pleasure to help you.

Thank you.

#7

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