Blog content disappears in mobile version

[EricD]

Can someone please help me?

I'm creating a site at www.ampedit.uk

It includes a blog for which I've used DropInBlog code.

The blog works in standard pc format, but disappears when I switch to mobile (either by shrinking my pc browser window or viewing on my phone).

I've tried resizing the placeholder on the mobile version but without success.

DropInBox say it's not a fault of theirs and suggest that it's to do with CSS or Javascript.

Can anyone advise me what to do?

[Acorn]

Can someone please help me?
I'm creating a site at www.ampedit.uk
It includes a blog for which I've used DropInBlog code.
The blog works in standard pc format, but disappears when I switch to mobile (either by shrinking my pc browser window or viewing on my phone).
I've tried resizing the placeholder on the mobile version but without success.
DropInBox say it's not a fault of theirs and suggest that it's to do with CSS or Javascript.
Can anyone advise me what to do?

Xara's Variants put all the page code into one big file, here http://www.ampedit.uk/blog.htm. It then hides away the Variants that are not in use and reveals the appropriate ized one as the viewport changes.

Your Blogs code is referencing an ID (<div id="dib-posts">). HTML IDs, however, are only designed to be recognised on the first mention; a second one will just be ignored.
You could try creating separate Blogs for each Variant.

Acorn

[EricD]

Thanks for that, Acorn. I'll have to think about what best to do, as this is proving to be far more difficult than I'd anticipated.

[Acorn]

Thanks for that, Acorn. I'll have to think about what best to do, as this is proving to be far more difficult than I'd anticipated.

I have found similar problems in the past and have just about managed to get round them by using IFRAMEs.

Here is the essence:

1. Create another (sub-)site just for the Blog return.
2. Ignore Xara's moans and name the page blogposts.
3. Publish to the same location as your main site, ensuring you do not have the same page name.
4. In the main site and Variants, use the 'Embed a website' widget or create a Placeholder with body code of:

5. <iframe src="blogposts.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="blog_iframe" ><p>Your browser does not support iframes.</p></iframe>

Hopefully, the blog content seems to be adaptive so it should all fit into the width of any Variant's IFRAME.

Acorn

[EricD]

Acorn, my apologies for the slow response. I tried your IFRAME suggestion, which worked but didn't look great. I therefore opted for your initial idea of creating a separate blog for the mobile version and that seems to work fine. Thanks for your help.

[Acorn]

Acorn, my apologies for the slow response. I tried your IFRAME suggestion, which worked but didn't look great. I therefore opted for your initial idea of creating a separate blog for the mobile version and that seems to work fine. Thanks for your help.

Eric, kind to report back.

Acorn