Skip to main content
C
cyrille_miasco
Participant
November 21, 2016
Question

SVG problem on breakpoints

  • November 21, 2016
  • 1 reply
  • 213 views

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)

img.png

This topic has been closed for replies.

1 reply

Lilybiri
Lilybiri
Legend
November 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.

C
cyrille_miascoAuthor
Participant
November 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.

Lilybiri
Lilybiri
Legend
November 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?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices