... ero in dubbio se pubblicare la discussione qua...
[MOD]
Ciao, l'argomento potrebbe abbracciare più sezioni (HTML, CSS ed eventualmente JavaScript) ma per il momento continuiamo su questa.
[/MOD]

tramite "<iframe>", viene mostrata la pagina di login sul sito-vetrina
[...]
Googleando un po' penso che il "trucco" si quella di lavorare sul tag meta-viewport
E questo è già ciò che avviene sul sito vetrina. Dalle immagini deduco infatti che è stata applicata una "impostazione responsive" per la viewport, per tale motivo l'intera pagina non viene semplicemente scalata per farla entrare nella finestra (come normalmente accade per un sito non responsive), ma i contenuti sono appunto ridisposti mantenendo la scala a 1.

Il punto è che le impostazioni della viewport applicate al top-level hanno effetto sull'intera pagina compresi i contenuti caricati. Ciò significa che anche se tu applicassi altre impostazioni nella pagina login, queste non hanno effetto una volta che la carichi dentro un iframe.

Lasciando le impostazioni della viewport così come sono, il problema sta nel fatto che l'iframe stesso risulta più piccolo rispetto alle dimensioni del breakpoint CSS più piccolo impostato per la pagina login. Penso che il layout si sfasci proprio per questo motivo.

Non ho idea di come siano impostate le media query nella tua pagina login ma a mio parere potresti impostare un ulteriore breakpoint in cui gli elementi del form login possano disporsi correttamente per la visualizzazione dentro l'iframe.

Verifica magari le effettive dimensioni dell'iframe nel punto critico; puoi eventualmente usare gli strumenti del tuo browser per analizzare l'elemento e risalire alle dimensioni esatte.

Mettiamo il caso che sia 360x240px

Fatto questo, se per esempio il tuo breakpoint più piccolo è (min-width: 480px), aggiungi un altro del tipo (min-width: 360px) e quindi imposta le varie regole per disporre al meglio gli elementi: riduci eventuali margini/padding tra gli elementi, riduci magari le dimensioni stesse dei campi, del font, delle icone, ecc. Verifica quindi che il tutto stia dentro la dimensione dell'iframe; tra gli strumenti di sviluppo del tuo browser puoi usare la visualizzazione flessibile, per aiutarti.

Chiedi pure, se hai ulteriore bisogno di aiuto.