Rich-text Reply

Desktop/Mobile Page Isn't Displaying As Intended

WordsThatClick 02-24-16

Desktop/Mobile Page Isn't Displaying As Intended

Hi there,

 

In conjunction with:

 

https://community.optimizely.com/t5/Using-Optimizely/Mobile-View-Screwed-Up/m-p/14313#M4770

- "Mobile View Screwed Up"

 

We are getting views in our browser and mobile devices that are not displaying properly. I've been scouring the forums and tech sections, but no luck so far. 

 

I've set up mobile only and desktop only audiences to separate the two as well (as per the instructions in the link above). 

 

Attached are 2 screenshots were you can see there are grey/blank spaces to the right of the actual site. 

 

I am not a technical guy and hope that this can be fixed quite easily. Any insight, direction or help topics would be greatly appreciated. 

 

Thank you.

 

APFC-image1.PNGpfc-Image2.JPG

Re: Desktop/Mobile Page Isn't Displaying As Intended

Anyone have any thoughts on this? It has to be a common issue.

Update (but still an issue). I’ve found this Knowledge Base - “Use Move and Resize judiciously; Rearrange is worth using” at https://help.optimizely.com/hc/en-us/articles/200039725?flash_digest=87e0618cdcc251d7b083ccd0a48f276...

However…:

I’ve tried “Move & Resize” to resize the container first, then “Rearrange” the element inside and the element doesn’t move. The reverse doesn’t work at all.

“Rearrange” doesn’t really move the element (i.e. line of text). The only option that will move the element is the “Move & Resize”. The only functionality that “Rearrange” has is to perhaps move the element (and its contents) outside of it’s (for lack of better words) container (i.e. to another completely different location on the site).

From what I can tell, one must locate the encompassing container first, expand it using “Move & Resize”, then move the element within this encompassing container with again “Move & Resize”. While a bit of a pain (as you have to locate the main container first), something I can deal with.

However….

Just shifting the text around, my pages are still displaying as the above screenshots. I’ve only made slight changes to test and no luck. I still get that empty border on the right side.

I’m missing something obvious here and have no idea what - and I'm at my wits end after quite a few hours of messing around with it.

Any insight is greatly appreciated.

Thank you.
JDahlinANF 02-25-16
 

Re: Desktop/Mobile Page Isn't Displaying As Intended

[ Edited ]

Historically speaking, I have had horrible luck using WYSIWIG editors on responsive websites.

If you need to rearrange things, try doing it in your console directly using things like:

 

$('#thingToMove).detach().insertAfter('#placeToMoveItTo');

$('#thingToMove).detach().insertBefore('#placeToMoveItTo');

$('#thingToMove).detach().prependTo('#placeToMoveItTo');

$('#thingToMove).detach().appendTo('#placeToMoveItTo');

 

etc.

 

If you are a Chrome user, you can run the code in your console and then "Toggle Device Mode" (ctrl+shift+M) (top left of your developer toolbar) to switch among a variety of pre-set screen sizes to see if everything flows appropriately and make any necessary CSS changes that you might need so that the new arrangement behaves correctly in each of the different resolutions and orientations.

Once happy, copy and paste your code from your Console into your Experiment's variation.

Re: Desktop/Mobile Page Isn't Displaying As Intended

Thanks Napoleon,

We appreciate your response. At this point, getting into coding/programming, etc was more than we/I wanted to tackle. I can understand how complicated a WISYWIG editor can be with so many variations out there.

We are in the process of exploring our options and will see what we can come up with.

Thank you for your insight once again.

Take care