Responsive FormLayout not responsive

Hello, I am having issues with the following registration form. It is not responsive when screen size is less than 490px as expected. It just stays as two columns regardless of the screen size.

I have been following this guide: (

Code in reply…

public class RegistrationForm extends FormLayout {

private H3 title;
private TextField firstName;
private TextField lastName;
private EmailField email;
private PasswordField password;
private PasswordField passwordConfirmation;
private Checkbox allowMarketing;
private Span errorMessage;
private Button submit;

public RegistrationForm() {

    title = new H3("Registration form");
    firstName = new TextField("First name");
    lastName = new TextField("Last name");
    email = new EmailField("Email");

    allowMarketing = new Checkbox("Subscribe to marketing emails?");
    allowMarketing.getStyle().set("margin-top", "12px");

    password = new PasswordField("Password");
    passwordConfirmation = new PasswordField("Confirm password");

    errorMessage = new Span();

    submit = new Button("Start your journey!");

    setRequiredIndicatorVisible(firstName, lastName, email, password, passwordConfirmation);

    add(title, firstName, lastName, email, password, passwordConfirmation,
            allowMarketing, errorMessage, submit);


            new ResponsiveStep("0", 1, ResponsiveStep.LabelsPosition.TOP),
            new ResponsiveStep("490px", 2, ResponsiveStep.LabelsPosition.TOP)

    // components below will use the full width of the form
    setColspan(title, 2);
    setColspan(email, 2);
    setColspan(allowMarketing, 2);
    setColspan(errorMessage, 2);
    setColspan(submit, 2);


Problem solved… I called registrationForm.setWidth(“600px”); in the registration view. Removing that solved the issue.