HTML Placeholder / Widget - variant display

[Steven Cox]

Hi all,

I have added a Facebook Follow badge and a Twitter badge to the website and have display issues. The facebook badge displays on both the main and mobile variant just fine as expected.

However, the Twitter badge does not. After playing with this for a while I have figured out (I think) that when I pull it up in preview, it displays on the variant that is first opened. When the window size is adjusted and it switches to other variant, it disappears.

So, if I set the preview pane to full screen and open that page in preview, it appears as expected. If I then shrink the page down, when it switches to the Mobile variant it goes away.

If I set the preview pane to a small window, when I open the same page in preview it appears as expected in the mobile variant. When I stretch it out, it goes away.

After a lot of worrying I realized what was happening and can assume that if someone opens it on a mobile device, they will not get to the main variant and likely if they view it on a full size device they will not likely shrink it down to the mobile variant.

With this is mind, I am going to ignor it for now and move forward. However, I would like to understand what is happening and fix it if I can.

Any ideas? Please note that I am a novice and very likely missing something basic.

Thanks, Steven

[Egg Bramhill]

Until someone else comes along who can explain this better, you're correct re your assumption. Basically once the page is loaded and the code run it doesn't re-run when changing the browser width. I think this can be overcome by not sharing the placeholder codes between variants, but adding individual placeholders.

One problem you may run into is if someone views the mobile site on a phone or tablet in portrait & then changes their viewing to landscape which MAY supply the desktop version.