Hi Ismael, thanks for getting back to me.

That CSS only affects the fly-out burger menu. I’ve just changed it just to check and it’s made no difference.

Any other ideas?

HI.

I managed to create this using CSS on 1/2 columns. The design changed slightly, but the issue was the same. I’ve attach a screenshot for you to see.

I put the 3 rows into 3 colour sections, (the top one with an image background) then I added a custom class to each column in each colour section (so each of the 4 tiles you see in the screenshot has it’s own class), gave them all fixed heights in px according to the gap they needed to fit in, gave them all ‘position:fixed;’ then altered the top or bottom margins to negative values to move the columns up and down into place.

Like so:

/* tile position top*/
.tileposition {
    position:fixed;
    height: 450px;
    bottom: -200px !important;
}

/* tile position middle*/
.tilepositionmiddle {
    position:fixed;
    height: 450px;
}

/* tile position last tile*/
.tilepositionlast {
    position:fixed;
    height: 450px;
    top: -675px !important;
}

/* tile position with form in*/
.tilepositionform {
    position:fixed;
    height: 950px;
}

To get the gap right between the top colour section and the tiles underneath there’s a whitespace divider, which made the button in the top tile inaccessible, as the divider sat over the tile with the button in. So I added this to the top colour section to bring it to the front:

.bringtofront {
    position: relative;
    z-index: 10000 !important;
}

And that got me the look I was after. I thought I’d share the CSS I used in case someone else needs to do something similar. However, if there’s a more elegant/easier way of doing this do let me know. Otherwise I think we can close this thread.

Thanks.

• This reply was modified 3 years, 1 month ago by Thedogscreative.

Yes, no worries. It’ll be a week or two, but I’ll let you know. Thanks.

Ah nice, thanks. And then just adjust max-width to the width of the site.

What about the other thing I’m trying to achieve: having both columns be the same height?

Thanks.

OK thanks for getting back to me,
So is there a way to achieve a full image background with mix-blend-mode images over the top in enfold?

…Anyone…?

Hi, thanks for the replies.

The page isn’t published yet and I haven’t added the section this button needs to be on – the screenshot is from the photoshop design file I’m working from.
It’s a standard link, not a blog post. I see the confusion; It says ‘read more’ not because it’s a blog but because the section outlines one of the services the company offers and the link takes you to more info. But it looks like it might be possible with similar CSS?

HI. I figured out it was to do with the space I’d set either side of the logo. I’d set it as a vw value, so when the browser window was too wide it was pushing menu items down onto the next line.

All sorted now, thanks.

Hi Victoria,

Thank you very much for getting back to me. Apologies for the slow reply – the covid pandemic makes for some interesting work arrangements.

Thanks for the suggested changes, however now, when I reach the breakpoint the logo jumps to the left and all the menu items to the right – as can be seen in this screenshot.

Any further adjustments? Thanks.

Hi. Thanks for the response.

There was no broken HTML anywhere that we could see (three of us looked at it).

And would broken HTML explain the ALB looking all screwed up like in the screenshot?

Hi Victoria,

I’m very sorry I’ve only just seen this! I’m too busy for my own good.

Thanks for finding this out. I’m assuming there’s nothing that can be done by me of anyone else to fix the issue?

Yes, no worries, close away.

Thanks for you help, everyone.

Apologies fo the slow reply – too many projects! (which is a good thing, I guess.)

Please see the screen shot here

The blue guides show the width of the site, with the space outside showing the width fo the browser window. The text in the left stays inside the width of the website container, the image on the right responds to the width of the browser.

Hopefully that makes sense.

Thanks,

Perfect. That worked. Cheers.

Is there any way to make a fullwidth caption not extend the width of the header? Could I make the caption half the width, for example? (So it’s like it’s in a two column layout.)

Thanks