""" <div className="row email-phone-main-wrapper"> <div className="col-md-6 phone-col-wrapper"> <div className="mb-3"> <label htmlFor="phoneNumber" className="form-label phone-number-label w-100"> Phone Number* </label> <div className="d-flex"> <Autocomplete disablePortal id="combo-box-demo" placeholder="+971" options={isdCodesList} isOptionEqualToValue={(option: any, value: any) => option.label === value.label} renderInput={(params) => ( <TextField {...params} {...register('isdCode', { required: true, })} /> )} onChange={(e, newVal: any) => { console.log('newVal', newVal); setPhoneNumber(newVal?.label); }} /> <input type="text" className="form-control-phonenumber" id="phoneNumber" aria-describedby="phoneNumberHelp" placeholder="xxx xxxx xxxxxx" {...register('phoneNumber', { required: true, })} onChange={(e) => setPhoneNumber(e.target.value)} /> </div> { errors?.phoneNumber?.type === 'required' && ( <span className="error"> please enter your phone number </span> ) } </div> </div> <div className="col-md-4 email-col-wrapper"> <div className="mb-3"> <label htmlFor="email" className="form-label w-100"> Email Address </label> <input type="text" className="form-control" id="email" aria-describedby="emailHelp" placeholder="eg:abc@mail.com" {...register('email')} onChange={(e) => setEmail(e.target.value)} /> </div> </div> </div> """ You aree CSS expert. You have to do following design changes written inbullet points: parent element - email-phone-main-wrapper child elements - phone-col-wrapper, email-col-wrapper 1. childs of email-phone-main-wrapper div element should appear in row format ie top and bottom style when screem with is equal or below 768px and height 1024 px. 2. Both the child element should have same width when responsive. code for your reference is above. 3. YOu can media queries to achieve this result. 4. Return the updated sass code having media queries.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter