Z-index not working on front-page-1 Studio Pro theme

[Marijn]

I'm trying to get a widget area to show half overlapping front-page-1 but I can't get the widget to show on top of front-page-1. Tried multiple z-index settings but nothing happens.

I'm using studio pro theme, newest version.

Other widget area's like front-page-4 and -5 are working but front-page-1 isn't.

Any help is much appreciated as I 'm stuck here 🙁

Thanks in advance

https://liposomahealth.com/new/

[Victor Font]

What widget do you want to overlap what content in front-page-1. You front-page-1 has a custom header, a wrap, and 2 widgets within the wrap. You have to be more specific with what you want if anyone is going to help you.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Marijn]

Alright, sorry.

I want the image inside this widget (liposoma-technology-1):

<div class="liposoma-technology-1 widget-area" id="liposoma-technology-1">
<div class="wrap">
<section id="custom_html-12" class="widget_text widget widget_custom_html">
<div class="widget_text widget-wrap">
<div class="textwidget custom-html-widget">
<div class="liposomen-image"><img src="/new/wp-content/uploads/2019/04/liposomen.png" alt="Liposomes" scale="0">
</div>

to overlap front-page-1, there are no widgets at the bottom so it seems to me that .front-page-1.hero-section needs to be adjusted but I can't get it to work:

<div class="front-page-1 hero-section" role="banner">
<div id="wp-custom-header" class="wp-custom-header">
<img src="/uploads/2019/04/cropped-technology-bg.jpg" width="1500" height="784" alt="Technology</div>
<div class="wrap">
<section id="custom_html-3" class="widget_text widget widget_custom_html">
<div class="widget_text widget-wrap">
<div class="textwidget custom-html-widget">
<h2>text</h2>
<h4>text</h4>
<a href="#second"><i class="fas fa-angle-down"></i></a></div></div></section>
<section id="custom_html-7" class="widget_text widget widget_custom_html"><div class="widget_text widget-wrap"><div class="textwidget custom-html-widget"><div class="usp" id="second">
<div class="container">
<div class="left first">
<img src="/uploads/2019/04/liposomal-formulas.png" alt="experience" class="icons-usp">
</div>
<div class="right">
<p>text</p>
</div>
<div class="more"><a href="#front-page-5"><i class="fas fa-chevron-down"></i></a></div>
</div>

<div class="container">
<div class="left first">
<img src="/uploads/2019/04/network.png" alt="Knowledge" class="icons-usp">
</div>
<div class="right"><p>text</p></div>
<div class="more"><i class="fas fa-plus"></i></div>
</div>

<div class="container">
<div class="left first">
<img src="/uploads/2019/04/customers.png" alt="Customers" class="icons-usp">
</div>
<div class="right">
<p>text</p>
</div>
<div class="more"><a href="#front-page-6"><i class="fas fa-chevron-down"></i></a></div>
</div>

<div class="container">
<div class="left first">
<p>text</p>
</div>
<div class="right">
<p>text</p></div>
<div class="more"><i class="fas fa-plus"></i></div>
</div>
</div></div></div></section>
</div></div>

[Marijn]

Sorry again.. 🙂 fixed it. Overflow hidden was the issue. Thanks

[Author]

Posts