Advise on page design

Support
#1

Hi

I’d like some advise about the best way to design a page…
https://www.skydivelangar.co.uk/?page_id=914

What I’d like to do is link the whole image and not just the button. The image is a background so I can’t link that. I can’t link the column because that extends to the text below (so that the text sticks with the image when is flexs on mobile).

It needs a bit of a rethink but I can’t figure out the best way to do this.

#2

skydive
skydive1538×726 121 KB

#3

Hi @redleaf,

Thank you for writing in, please have your image as an Image element instead so you can apply a link to it. Then use the position: absolute; property to position the button above the image.

CSS position: absolute; property.

Hope it helps,
Cheers!

#4

Hi - I tried that here https://www.skydivelangar.co.uk/pro/#/content/914 I used
$el {
position: absolute;
top: 200px;
left: 40px;
right: 40px;
}
on the buttons. It works OK on desktop at full size but it falls apart when the browser is at smaller sizes. I’d appreciate if you have any other suggestions.

#5

Hi @redleaf,

You can wrap the code in a media query so that it will only take effect on desktops like this:

@media (min-width: 768px) {
    $el {
        position: absolute;
        top: 200px;
        left: 40px;
        right: 40px;
    }
}

Hope this helps.

#6

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