Problems with vector images in mobile menu

[greyorangestudios]

I'm having trouble with vector graphics in Muse on a mobile version of a website. I'm hoping someone here can help. Here's the situation:

I have a site with 2 breakpoints: one at 961+ as a fixed width for desktop viewing, and one at 960 or less with fluid width for mobile viewing. My mobile version uses a menu button at the top right that opens a graphic menu with clickable icons as links. The menu button opens a lightbox that has the icons within it and centers to the page automatically. When I was using raster images they worked fine but looked terrible on mobile screens with high resolution (Galaxy S8, iPhone 6+). This is because the text at the bottom "click to close" was being rendered in full resolution while the mobile icons were stuck at 72dpi. So I tried switching the icons to vector images (SVG) but then Muse would freeze anytime I would try to export, even just to preview.

Now I've made all the icons into .AI files linked within my CC Library. The icons look great on mobile, but they don't load right away. When I click on the MENU button I see the lightbox I've created but the icons are not present. If I scroll up and down a little bit the icons appear and everything looks great. But my client isn't going to be happy with this behavior.

The website is currently here

Am I doing something wrong? Is there a better way to do this? Should I be using vector images or is there a way I can get the raster images within the mobile menu to be as sharp as the rest of the text?

Thanks in advance

[greyorangestudios]

One thing I forgot to mention: you can only see the mobile menu if your browser width is 960 or less. It's best viewed on a mobile device.

[Günter Heißenbüttel]

Could you please delete all pages except the homepage and all elements except the mobile menu with its icons. Then upload this reduced .muse file to Dropbox or a similar file sharing service and provide the download link here. The we can have a look.

[greyorangestudios]

I'll do this when I get a chance. One question: should I keep it with the 2 break points or just the one?

[fotoroeder]

Two breakpoints at 961 and 960 makes no sense because between those two, what should happen to your design?

Breakpoints are for the purpose to keep layout inside the canvas without distracting each other.

It`s interesting to use only one breakpoint, so keep us in touch.

Uwe

[greyorangestudios]

There is nothing between 960 and 961. If the browser is 961 or larger it displays the desktop version. If it's 960 or less (minimum of 320) then it shows the mobile.

[fotoroeder]

That`s what I tried to say with a rhetoric question: there´s no need for two breakpoints with a distance of 1 px.

Keep on and try your very best …

Uwe

[greyorangestudios]

Are you trying to solve my problem in the original topic? If not, then there's no reason to continue posting here. I understand I don't have two breakpoints, I'm only using one. I said two breakpoints to differentiate between the mobile version and the desktop version. I'm only looking to solve the vector image problem in Muse, I'd rather not talk about terminology. Thanks.

[fotoroeder]

greyorangestudios  schrieb

I'll do this when I get a chance. One question: should I keep it with the 2 break points or just the one?

That was my answer to your question.

[Günter Heißenbüttel]

Give us the .muse file, and we'll see …

[Günter Heißenbüttel · Accepted solution]

Try the following:

Your menu is a composition, set up as a light box.

Since compositions and its lightboxes aren’t responsive in the actual version of Muse, it is unnecessary to set up the icons to scale „responsive width and height". When you set the icon not to scale, all works fine.

This seems not to be the „fundamental" cause, because your composition works fine, if pasted onto a newly created site/page without any other elements, but nevertheless: It works!

[greyorangestudios]

That solved it, thank you!

It was an oversight on my part. I didn't realize Muse was placing the .AI files from my CC library as responsive height and width. Changing them to fixed height and width fixed it right away. I'll remember to always check elements for responsive properties when facing problems in the future.

Though I'm still confused about the vector problem, why my Muse would freeze when exporting a page using SVG images. Maybe I'll try to replicate it and see if it was the responsive properties causing the issue.

Thanks again!