Good evening fellow creators,

I have encountered a weird issue and wanted to know if anyone else experienced this.

One image is what is displayed on my canvas in SD5 the second is what it exports and also what shows in preview mode. In full screen it looks good. when you get to mobile it gets all disformed.

Live site is here
https://misterwebguy.com/glazed-elegance_exported/

I am very tired of banging my head!!

The preview seems to be the correct presentation.
Since the div with the class “orbit” shows at break point 1024px a width of 100% . Beneath that the width is not set. Also, check the height of the ul element (inline-style) at that break point.

Hi Steve

Rene is about right

The width of the orbit component at lower viewport sizes is determined by the width of the image, so since you have replaced the image with blockquote (or text or whatever, then you need set them as the appropriate
width for the lower viewport sizes.

You also need check the height again as Rene says but at ALL breakpoints as there is some text hidden on some of the breakpoints

Good catch guys!!! Thanks I will make some adjustments. I was focusing so much on the containers it never occurred to me it was the actual paragraph that was causing this issue.

I will let you know how I make out.

This is a comment regarding the seeming canvas discrepancy.

It's worth remembering that there can be two different canvas displays: one when the Styles panel indicates Design For Fallback First, and one when it indicates Design For Display Grid.

If that is the situation here, it might be worth checking the settings of the relevant grid.

Frank

Hi Steve
You should also take your slider right down. The image that you sent shows the slider nowhere near even where the mobile devices start. Which is why if you preview at that position it looks ok but in reality on most mobiles will be different.

Good morning everyone,

Thanks for all the suggestions. Setting the width to 100% on the orbit container did the trick!

Thanks again
Steve