Hi Guys

Just wondering if anyone can help with either a fix to what I have done or a better way of doin git.

This is an rsd file which shows what will be shop panels which link to the relevant shop sections.

Now the way I have done this (and I am not saying its the *right8 way, just the way I did it and if you have a better solution I would love to hear it!) is by creating a container which then will use an image appropriate to that section.

To make it clickable, I have then overlaid a transparent png which then acts as the link. the overlay image is 400px x 400px

Now the problem I am trying to solve occurs between the breakpoints 1024 -> 768 and 530 -> 320

at the lower end the overlay image doesnt cover the whole background image
at the higher end (particularly at 769) the overlay flows over into the panel below

As I said, I dont know if this is the best way to do it, but its the way I have done it. Am happy to amend as is or start it again from scratch using a better methodology.

All input, as ever, gratefully received.

Many thanks in advance

Jamie

Input an href to the proper shop location on each element image in the design tab.

Do you mean here http://prntscr.com/944370 Eric? If so, not sure how that helps in getting the overlay to cover the entirety of the panel?

What's the overlay for?

as the actual image itself is a background, it cant be a link so am using a transparent overlay to do that

They all look like picture links to me.

Here is an RSD file showing the principle I would be tempted to use for the effect I believe is wanted. I have changed the suffix to txt, and changing the suffix to RSD will allow it to be viewed.

1. At full width I started with a container into which I put the horse picture as a picture link'
2. To the picture and the container I gave a max width of 300px, and to the container a width of 30%
3. Into the same container I put text links above and below the picture, gave them a relative position with a Z index greater than that of the picture, and used negative top/bottom margins on them to bring them over the picture.
4. I used a couple of break points to adjust the negative top/bottom margins at item 3 above.

The second page (subgrid.html) is just to show that the principle works equally in a subgrid.

Frank

cheers Frank and I see what you did there. The problem with that is, and its why I went the way I did, that if the images are of different proportions, then the panels lose their uniformity - see the attached - and as the client is able to update and add images and the panels themselves it causes problems....

Is there any particular reason not to just use images? I.E. the picture link element? I use this often and this way you can use a standard subgrid column, or a container if you want to, whatever, and the image will resize with your website, you can move things around for breakpoints without trying to track overlays, etc.
I even go so far as to use transitions for a very mild, but slightly noticeable 'bubble' effect, so when hovered over or tapped/clicked on the picture will shrink/swell/normalize just a little bit for a nice highlight effect.
Basically use the same methodology you've used here, just with picture links...
Column cell -> Picture Link (no width restriction) -> two text link elements (one that is on right and margined to top, the other that is left to bottom, margined to butt against image) -> Duplicate that cell however many times. Once done, you can shrink and grow however you want without distortion.
Worth a shot - I just threw together a quick test and it works without any issues I can see.

If you are worried about panel uniformity, then set width min/max restrictions. Otherwise you would wind up with panel distortions even changing the background image if you let people edit them. You might end up with a slight difference in vertical spacing, if their image is way large and narrow... but unlikely if they are even somewhat realistic with their images being reasonably symmetrical and sized.