Streaming live at 10am (PST)

Trouble making a widget responsive to different monitor sizes/zoom levels

Hey guys, Im having a bit of trouble with the scaling of the objects inside of an embedded element

it looks proper on 100% zoom, on a native 1920x1080 screen and looks like this:

Though if it goes to a smaller screen size, Or if someone zooms in, It will break like so:

Here is a gist of the custom code used:

Any help with this would be much appreciated as this has been one of the major roadblocks with me publicly releasing my website for my community

Read only link:

Could you post your published site as well? It is a little hard to see all of the embeds going on without seeing how they interact live.

However I do see you have a lot of pixel widths. I would suggest using percentages instead. then as you size down, the percentage will size according to the screen size. (also in that embed mentioned above, try changing the width: 900px, to 100%. Its hard to tell how it will look when scaled down, but might be a good start)

And for your columns, where you are using flexbox, as you get to smaller screen sizes, you can then change from horizontal to vertical to stack the columns. Then change the width of each column to 100%.

Heres the live site :smiley:

I Tried putting it to 100%, it looks fine on 100%, but still only shows one column of songs when zoomed in at all

Yeah I can see that. There is quite a lot to get it working the way you would want.

I would recommend going to the Webflow university and looking up learning a bit about flexbox. Should be a good place to start.

1 Like

I looked through the entire thing and put the webpage into a flexbox. But still the same result sadly. The wierd thing is it scales properly when zooming out. But the moment you hit 110% it screws up


If there is anyone that can help with this it would be much appreciated