Z-index bug? z-index not appearing the same for each device

Hi All,

Hopefully some kind soul can help me here.

There seems to be an issue regarding the z-index of elements on the blogs post template page.

All appears as it should for desktop and the vertical mobile view, but the z-index order doesn’t appear as it should in tablet and horizontal mobile view.

I’m a bit perplexed, as from what I can see the z-index settings for each device are the same. And I believe that the z-index value set in desktop should cascade down to mobile, so not sure why there are inconsistencies between the different devices.

So, thanks in advance for your help!

Please find a link to the project here.

In the screenshots below, the blog-post-container is correctly overlapping the hero image in vertical mobile view and desktop (pic 1 and 3, respectively), but not tablet/horizontal mobile view, despite the z-index value being the same (pic 2):


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Hannah,

This might help solve your issue.


Hey @Dylan_O_Connell, thank you so much.

Your video was really handy and bang on. Changing from sections to divs worked a treat!

I’m not too sure exactly why ha…But thanks again for taking the time to respond :grinning:

Have a lovely rest of your day!

No worries, I dont know why neither tbh but at least it works haha.

Btw, the way i tend to structure and I know others do the same is like this. I dont use sections because they are a bit annoying, just use div blocks and name them. For example:

Div block - (hero-section-wrapper)
Div Block - (hero-section-container)
Div block - (hero-section-content)

heres a project im working on it probs be easier to see what i mean by looking at an example.

Hopefully that helps.


1 Like

Ha yes, it works so I’m happy!

Cheers for the advice @Dylan_O_Connell. Sorry only now just seen your reply!

I’m not able to access your project link - do feel free to share again :slight_smile:

Sorry about the late reply! the description I gave about the structure was a little rubbish haha. I know its late but heres a screen shot which will probably explain better and for anyone that may come across this thread. You’ll see they are all div blocks within each other then labelled x-wrapper > x-container-(then what ever content you have inside singular div blocks)