Streaming live at 10am (PST)

Code embed icon breaks after mobile breakpoint


#1

I have a cart Icon code embed in several places. They get moved down about 100% of their own height on anything smaller than tablet size. This bug does not occur on buttons i have placed them in, but only if they are placed before text links. This is visible in the designer and in the published site.

As you can see the selection box is at the correct position, but the contents get moved down for some reason. I tried to use different kinds of svg code (compound paths and non-compound paths), the problem persists.

I will move the icons on mobile breakpoints as a quick fix for now but this bug should be addressed.

Code embed icon displays correctly:

Here it jumps down 100%


Here is my site Read-Only: https://preview.webflow.com/preview/r-tunes?preview=a5747f5a881d2fa9f8ca2b0945dbb32c


#2

Hi @henrymcgillis,

I have 2 solutions to propose.

1- set your o-cart-icon class to display flex. That’s seems to fix the alignement problem.
2- instead of using a custom code svg you could go on a site like https://icomoon.io/ that will make you able to create a font based on a set of svg you provide. This way you can upload the font in your project settings and use it throughout your project. This is usually how I do it and it gives you easy control on your svg as it will use the typography css properties directly within webflow.

I hope one of these two will make it for you. I’m style looking for a way to make it works within the custom code but couldn’t figure it out yet.

Max


#3

Sweet, thanks for the display flex tip. That way I don’t have to add more styling to the breakpoints!

Yeah Fonts would be a way to do it, but for only 1 Icon the Code embed was easier and faster.

Tanks for the help!


#4

Damn, adding display flex to larger breakpoints makes the icon disappear there :confused:


#5

On my end it works on larger breakpoints too. Not really sure where you see it disappear.


#6

Ah, I fixed it right before you wrote ;). FYI setting it to Flex fixed it on smaller screens but broke it on larger ones again. So I just added a combo class for that