Issue with Shape Sector on mobile devices

Hi all,

I’m having an issue with Shape Sector stack viewed on mobile. The shape is over the width of the screen…see screenshots.

I’m using Foundry for the site.

It only started happening when I added in the Shape Sector and Image Sector stacks but I’d like to use these is possible.

Any ideas please?

Thanks
Scott


Can you tell us who makes these stacks? I don’t think they come with Foundry (or perhaps I simply forgot).

Shape Sector is a OneLittleDesigner stack. I’d recommend you raise a support ticket on their website - they’re very quick to respond.

2 Likes

You have some corrupted SVGs showing as errors in Inspector. Looks like the angled dividers are using a viewpoint that is 1000px wide and that may be the issue.

Also something (maybe the same thing) is messing up the mobile view:

Hi, thanks Gary and Adam.

Yes I’ve contacted 1LD so will wait to see what they have to say.

@Webdeersign Gary, you mentioned that some SVG’s are corrupted and showing errors in the inspector…how can I see that in the inspector please? And which SVG’s ? Must be SVG’s used by Shape Sector I guess?

Cheers Scott

The Safari Inspector is a really useful tool and what would normally be your first thing to check, if something isn’t right. Don’t be put put off by it’s complexity and it is worth checking out the Google help and guidance on how to use it.

To call it up, use Option-CMD-i. This is your site when I do that, looking at your site.

Click on the red warning sign and you will see the screenshot above. I am pretty sute that those errors are all related to the SVG’s used inside the ILd stack to create the page divider.

My advise would be to create or download an SVG page divider shape you want and just pin, place or push it to the bottom of that section or in your simple use, just add that SVG to the page going full width and set the width and set the height to a vh (vertical height value to keep the ratio) such as 3vh.

The SVGs used in the 1Ld stack appear to have both a preserveAspectRatio="none" and a width and height definition. I always delete the width and height from within the SVG’s when I use these type of layouts. The SVG’s have a viewBox="0 0 1920 120" so I think this is the cause of your problem. 1920 refers to a width of 1920px.

It could also be caused by the way you used the 1Ld stack inside Foundry so I would build it with just Foundry if that’s possible.

On a positive note, the divider works fine in Firefox.

However, something is still wrong with the rest of the site and that may be caused by the divider.