Hello OutSystems Community,

I'm currently developing a mobile app using the New Employee Onboarding theme and have encountered an issue with the login page responsiveness on mobile devices. The screen is designed with two columns which are not stacking correctly on smaller screens, causing a split view in mobile devices.

I've tried to adjust the CSS for the 'columns2' block to make it responsive, but when I attempt to edit the stylesheet, I receive a message stating, "Theme is read-only. Copy the CSS rule into a local theme to override it." I'm unsure how to proceed with copying the rule into a local theme to achieve the desired mobile responsiveness.

Here's the approach I'm considering for the CSS, but I need guidance on how to implement this correctly given the read-only status of the theme:

Code // 

@media screen and (max-width: 768px) {

  .columns2 > div {

    float: none;

    display: block;

    width: 100%;

  }

}

// 

Could anyone please advise on the best practices for overriding read-only theme styles in OutSystems? Also, is there a recommended workflow for creating a local theme that allows for customizations without affecting the original theme?

Thank you in advance for your assistance!

Best regards, 

Jose Luis