""" <div className="col-sm-6"> <div className="edit-remove-sustitute"> <div className="avatar-container"> <div className="initials-avatar">S</div> </div> <div className="profile-card"> <div className="profile-card__name">Shayne Anto</div> <div className="profile-card__role">Substitute</div> </div> <div className="action-buttons-container"> <div className="edit-button" onClick={editSubstitute} > Edit </div> <div className="remove-button" onClick={removeSubstitute} > Remove </div> </div> </div> </div> <div className="col-sm-6"> <div className="add-substitute-control"> <div className="add-substitute-icon-wrapper"> <img src={addSubstituteIcon} alt="Add Substitute Icon" onClick={handleOpenModal} /> </div> <div className="add-substitute-text-wrapper" > <div className="add-substitute-title">Add Substitute</div> <div className="add-substitute-subtitle">Click here to add substitute</div> </div> </div> </div> """ Suggest you are CSS expert. 1. I want to change the classname from of both the divs `col-sm-6` to `col-sm-12` when media quey size is width 768px and height is 1024px. 2. Return the updated changes. code for your reference is given below. ``` @media (max-width: 768px) and (max-height: 1024px) { .substitute-manager { flex-direction: column; } .edit-remove-sustitute, .add-substitute-control { margin-bottom: 1rem; } .add-substitute-control { margin-left: 0; } } ```
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