I have just completed doing my first modal following a webflow guide and it all went very well, however, the transition from full screen to say a mobile looks quite messy. I really want to make it a smooth transition. My current modal in responsive looks like the following video
Does anyone know how to make the widths/lengths stay in a fixed position until they really NEED to move…? If you get what im saying?
I want to keep the modal fairly small on desktop also… Any ideas?
That is generally how responsive websites work. Keep in mind almost no one is going to actually drag the width of the browser like that so how it shifts doesn’t really matter. Generally, the browser will load one width where the modal will be static. The only way I can think of to make it not shift like that is to set a max width in pixels for the modal and make it like 90-95% width. That way it will stay the same size (max) on desktop until you reach that value with the width of the browser in which case the modal will get squeezed and increase height. Flexbox can also tackle things like this in cool ways.