[Resolved] Image at the top. Again.

[Hazel]

Hi there
I am trying to build a landing page at https://www.allanjackson.net/staging1/allan-jackson-brisbane-specialist-pr-writer/ with an image right at the top. I have disabled all the page elements including header etc. and used the following code I was given in Simple CSS:

.separate-containers .inside-article {
padding: 0;
}
.separate-containers .site-main {
margin-top: 0;
}

Everything worked momentarily but soon a margin appeared again. I have set bot image and section in elementor to have 0 margin and padding.

Any suggestions would be welcome.

[Leo]

Hi Alan,

There seems to be a lot of layers going on underneath that landing image but try the CSS below:

.one-container .site-content {
    padding: 0px;
}
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
    padding: 0px;
}

Let me know.

[Hazel]

Hi Leo
Nope, that improves things but it still leaves a margin, or padding or whatever. On the home page of this site I used the before header hook to load a slider. Could I use the hook to load this image and avoid possible theme/elementor problems. And what would the syntax for that be?

https://www.allanjackson.net/staging1/allan-jackson-brisbane-specialist-pr-writer/

It seems to be hard to a proper responsive hero image in WP.
Allan

[Hazel]

Hi Leo
It’s me again. I realised that I hadn’t been checking Elementor’s column padding setting and once that’s set as 0 your code does solve the issue. So that means that the image widget, section and column settings all have to be set to ) at the top before it’ll work.
Thanks very much.

[Leo]

You’re welcome 🙂

[Author]

Posts