SVG problem on breakpoints

Report · Nov 20, 2016

Hi!

I have a problem on SVG upon publishing. Viewing the SVG object on desktop is perfectly fine but when it comes to breakpoints, the problem occurs esp. on mobile.

It will be fixed if you rotate your screen, and I'm using the latest Adobe Illustrator for the SVG. Below is the screen shot for reference. (Used IE for testing purposes)

Report · Nov 21, 2016

Hi Cyrille,

Maybe you are not aware of the fact that you can insert an image and a video in a thread:

Which version of IE (not the 'best' browser for HTML output at all, developing discontinued now that Edge appeared)? Did you try with other browsers?

How did you set up the position panel for the SVG in the breakpoints for landscape tablet and mobile? Do you have 5 breakpoints? The default 3 breakpoints are: desktop landscape, tablet portrait and mobile portrait.

Report · Nov 21, 2016

Hi Lily!

I'm aware just copy my link that I post on your blog and just paste the link on the "Insert Image".

Anyways, I'm using IE 11 but when testing the course I preview it also on Chrome. And upon testing on mobile, I usually use Safari & Chrome. For the set up of the SVG, set it 24.5% rel, center horizontally. I have 5 breakpoints but since the client needs landscape so I have 3 landscape breakpoints, I just disregard the layout for portrait and we just inject a code for portrait view. For each breakpoints I have different scale for each breakpoints. Desktop is 1000px x 600px, landscape tablet is 896px x 627px and landscape mobile is 667px x 410px.

Report · Nov 21, 2016

The image you inserted that way is not rescalable, reason I commented about it.

What is the height setting for the SVG? It should be Auto.

You cannot ignore the Portrait breakpoint views, AFAIK you cannot even delete them. It is always a hassle to get everything working of all devices. Really cross my fingers that the work flow will improve. What is the 'code' you are talking about?

Report · Nov 21, 2016

Height setting for SVG is Auto, width is 96.3%. What I mean by ignoring the portrait view is retain the layout as is. Meaning I didn't do any layout on portrait view since we only need landscape views. For the code, I have a screenshot please see the red highlights below.

For the result on the said codes see below: