Step-1
=====
Create a region.
Static ID: MY_REG
Step-2
=====
Go to inline CSS:
/* ================================
MOBILE VIEW FIX (Floating Safe)
================================ */
@media (max-width: 768px) {
/* Row layout fix */
#MY_REG .row {
display: flex !important;
flex-wrap: wrap !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2 column layout */
#MY_REG div[class*="col-"] {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
padding: 6px !important;
box-sizing: border-box !important;
}
/* IMPORTANT: Floating label visible --> minimum width */
#MY_REG .t-Form-fieldContainer {
min-width: 140px;
}
/* Input full width */
#MY_REG .t-Form-inputContainer {
width: 100% !important;
}
#MY_REG .t-Form-itemWrapper {
width: 100% !important;
position: relative;
}
/* Floating label tweak */
#MY_REG .t-Form-label {
font-size: 11px !important;
line-height: 1.2;
}
/* input height fix (better UX) */
#MY_REG input,
#MY_REG select,
#MY_REG textarea {
width: 100% !important;
height: 36px;
}
}
/* ================================
EXTRA SMALL DEVICE (Optional)
================================ */
@media (max-width: 280px) {
/* if your screen very small (lessthen width: 280px) then show 1 column */
#MY_REG div[class*="col-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}