'Linking' text frame and image in responsive site

[chloem56448998]

A bit of help please.

I am designing a responsive site using Muse. All is going well with one exception that has got me stuffed.

On one page, I have an image with a desciptive label (text) positioned below it. My problem is that, when the pade width decreases, I can find no way to keep the text and image aligned to each other. Obviously, I can correct this at every breakpoint, but I'd need 100+ breakpoints to preserve any relationship accuracy. This is caused, I guess, by the image being height and width responsive while the text is only width responsive. Pinning them doesn't seem to help.

I would welcome any assistance possible.

Many thanks....Scotty

[Nancy OShea]

One way is to use an SVG viewbox.

See this JS Fiddle for a working example of what I mean.

https://jsfiddle.net/NancyO/y6bousx2/1/ 

[chloem56448998]

Nancy,

thanks so much for taking the time to reply. Your suggestion did work well thanks. I just need to teach myself a little mode so I format image a little more. 
Thanks again. 
Stuart

[fotoroeder]

Of course, as you realized correct, images resize in width and height - if set so - and text resizes in width only.

Why not use the out of the box slideshow with just one image. That one should be aligned correct at any breakpoint. Of course 100+ breakpoints should be avoided. I also recommend to use fixed with breakpoints instead of fluid width breakpoints. By using fixed width breakpoints your issue disappears by itself.

Unfortunately using a svg viewbox does not help in your case because something like this is not done for using Muse.

You may share a link or a screenshot if I got you not 100%.

Kind Regards,

Uwe

[chloem56448998]

Use,

many thanks. Great advice. I will try your solution when I get home. 
I'll let you know how it goes.

Many thanks again. 

[chloem56448998]

Sorry. UWE. Bloody autocorrect!!

[fotoroeder]

No problem - easy - love-peace-and-happiness 🙂

Me, I love autocorrect, too.

Uwe

[chloem56448998]

Uwe, 

I have been trying to use your suggestion but I seem to be missing something.

I have set up the slideshow widget and included all the items I need therein. All works great until I reach my first breakpoint, then it seems to fall apart a little. Nothing major, but the caption box separates from the rest of the slideshow. I set up the slideshow in the full width as a fluid breakpoint, as I think this is required to enable responsive design (?). 

I have posted a link below to the muse file. I would really appreciate you having a quick look at it to see what I have stuffed up.

Thanks so much for your help.

Cheers.....Scotty

Muse file 

[fotoroeder]

Would you please be so kind to reduce your file to your issue? I don`t want to download the whole .muse and search for your issue. Reduce it to one page with your issue - save it as - with a new name and share a link, please. Much faste for me and much faster for you. And no fluid doesn`t mean responsive. You can have responsive with fixed width breakpoints as well and most of the times better and much more organized.

Kind Regards,

Uwe

[chloem56448998]

Uwe,

so sorry. I didn't mean to upload the entire file but have somehow managed to do that. I really didn't mean to give you a 'find the problem' challenge.

Here's a link to the single page

Single Page File 

Thanks again for taking the time to help out.

Cheers...>Scotty

[fotoroeder · Accepted solution]

I must admit still not to know how to help. Anyway, I would avoid non-web-save-text as this does not appear as real text in the browser but as an image. What about these images outside the canvas? This leads to an error I guess as well.

[chloem56448998]

Uwe,

sorry for the delay in replying. I seem to be getting closer to a solution. Your advice has been invaluable. There just seems to be a few issues when trnsitioning from one breakpoint to another. 

Where I am not is not perfect but it is functional. This is way in advance of where I was before you helped out.

Thanks so much again.

Cheers....Scotty