Making mobile photo 100% width

[Gary Parkin]

First off, thank you for any help.

I'm a long time web developer, and I'm messing around with Xara. I really like it, but I can't figure out how to make my mobile variant automatically size a photo to the width of the screen.
I searched for an answer to this and can't seem to find anything.

I'm creating a comic website and I'd like my images to be able to display full width on the PC and be able to be zoomed on a phone.
So I spoke to a fellow developer and he said "Thumbnails are OK on the PC, but don't have them have to click a thumbnail on a mobile device" and suggested that I just set the width to 100%, and "the height should just follow". This sounded correct. It works in standard html/css.

So I dropped a few pics on the page (not using any widgets), and when I am in the PC (not mobile) site and I right click the photo in Xara Web designer, and go to image properties, I set the image to Pop-up photo with a width of 1280px which is the full width of the photo.

When I'm in the mobile variant, I uncheck this option and stretch the photo to 100%, because if not then the photo appears on the screen 100% width, and it's cut half height.
If I go back to the PC page it's unchecked. I think it's the link that's messing it up.

I know someone had done this before. Do I need to unlink the photos between variants and treat them as separate objects on the page?
I really don't want to create 2 sites. I'm used to using media queries in work and having 1 page.

What's the best way of having thumbnails on the PC and full width photos on the mobile in Xara?

[Acorn]

You can set an unShared photo in your Mobile Variant by right-clicking and set its Sticky/Stretchy Properties to Sticky, Full width or height and Scale stretched object, Origin Centre.

This appears behind the Page Background so you need to hide objects or apply a Transparency.

To render different images on the same page will be trickier.

Acorn

[Gary Parkin]

Thanks but it's not really what I wanted.
I want to have multiple images on the page one under the other, and they are all set to be the width of the mobile screen, which should set the height automatically.
On the PC side, there should be thumbnails to zoom into the images. I know I'll have to keep them separate for the settings.

What I want to do is set the width of the the photo to 100%, and leave the height to auto, so they stay in landscape mode. If I get it sorted out, I'll post my solution. Shame I can't get to the CSS.

[Acorn]

Thanks but it's not really what I wanted.
I want to have multiple images on the page one under the other, and they are all set to be the width of the mobile screen, which should set the height automatically.
On the PC side, there should be thumbnails to zoom into the images. I know I'll have to keep them separate for the settings.

What I want to do is set the width of the the photo to 100%, and leave the height to auto, so they stay in landscape mode. If I get it sorted out, I'll post my solution. Shame I can't get to the CSS.

Gary, you can get to the CSS if you Name (Utilities > Names) each image with an ID/Anchor.
You can then add a Page HTML code (head) and add <script> #<id_image#1> { width:100%; } </script>.

Acorn

[Gary Parkin]

Gary, you can get to the CSS if you Name (Utilities > Names) each image with an ID/Anchor.
You can then add a Page HTML code (head) and add <script> #<id_image#1> { width:100%; } </script>.

Acorn

I tried messing with the name, and I called it pic1 (catchy, huh?) then added the css into the header and nothing. But what I did find was even though I had the pics set to zoom in, I could still blow them up by pinching the phone device, so this might be all in vain, Acorn.

Personally, I don't see the hype of using a 5" device to see something that's supposed to be on a full size screen. (And I don't watch movies on my phone either).
I think I'm going to let it go and leave the click/popup alone so I don't have to recreate all the pages.
Thanks again for the help.

[Acorn]

Sorry but I sent you down a rabbit-hole; I should have said <style> not <script>!
Anyhow that doesn't work either.

I'll have another try when my head is on the right way round.

Acorn

[Egg Bramhill]

I'll have another try when my head is on the right way round.