Responsiveness - Githubissues

CSS

`body{ padding-top: 70px; padding-left: 96px; padding-right: 24px; background-color: rgb(248, 248, 248); margin-bottom: 100px; } p{ font-family: Roboto, Arial; margin-top: 0; margin-bottom: 0; } .left-section{ display: flex; align-items: center; } .middle-section{ display: flex; align-items: center; flex: 1; margin-left: 70px; margin-right: 35px; max-width: 500px; } .search-bar::placeholder{ font-family: Roboto, Arial; font-size: 16px; } .search-bar{ flex: 1; height: 36px; padding-left: 10px; font-size: 16px; border: 1px solid rgb(192, 192, 192); border-radius: 2px; box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05); width: 0; } .search-button{ height: 40px; width: 66px; background-color: rgb(240, 240, 240); border: 1px solid rgb(192, 192, 192); margin-left: -1px; margin-right: 10px; position: relative; cursor: pointer; } .search-button .tooltip, .mic-button .tooltip, .upload-icon-container .tooltip, .youtube-apps-icon-container .tooltip, .notifications-icon-container .tooltip{ font-family: Roboto, Arial; position: absolute; background-color: grey; color: white; padding: 4px 8px 4px 8px; border-radius: 2px; font-size: 12px; bottom: -35px; opacity: 0; transition: opacity 0.15s; pointer-events: none; white-space: nowrap; } .search-button:hover .tooltip, .mic-button:hover .tooltip, .upload-icon-container:hover .tooltip, .youtube-apps-icon-container:hover .tooltip, .notifications-icon-container:hover .tooltip{ opacity: 1; } .search-button, .mic-button, .upload-icon-container,.youtube-apps-icon-container, .notifications-icon-container{ display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; }

.search-icon{ height: 25px; } .mic-button{ height: 40px; width: 40px; border-radius: 20px; border: none rgb(192, 192, 192); } .mic-icon{ height: 24px; } .right-section{ display: flex; justify-content: space-between; align-items: center; margin-right: 20px ; width: 180px; flex-shrink: 0; }

.notifications{ height: 24px; } .youtube-apps{ height: 24px; } .notifications{ height:24px; } .upload{ height: 24px; } .channels_profile{ height: 32px; border-radius: 16px; cursor: pointer; } .top-bar{ height: 55px; display: flex; flex-direction: row; justify-content: space-between; } .menu-bar{ height: 24px; margin-left: 24px; margin-right: 24px; cursor: pointer; } .youtube-logo{ height: 20px; cursor: pointer; }

.naruto{ width: 100%; cursor: pointer; } .profile-pic{ width: 34px; border-radius: 18px; cursor: pointer; } .channel-info{ display: grid; grid-template-columns: 50px 1fr; width: 370px; margin-top: 8px; } .video-stats{ color: rgb(96, 96, 96); font-size: 12px; } .video-author{ color: rgb(96, 96, 96); font-size: 12px; margin-bottom: 4px; cursor: pointer; }

.video-title{ margin-top: 0; font-size: 14px; font-weight: 500; margin-bottom: 10px; line-height: 20px; cursor: pointer; width: 300px; } a{ text-decoration: none; color: inherit; } .youtube-videos{ display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 16px; row-gap: 40px;

} @media (max-width: 750px){ .youtube-videos{ grid-template-columns: 1fr 1fr; } } @media (min-width: 751px) and (min-width: 999px){ .youtube-videos{ grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 1000px){ .youtube-videos{ grid-template-columns: 1fr 1fr 1fr 1fr; } } .top-bar{ position: fixed; top: 0; left: 0; right: 0; height: 50px; background-color: white; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(228, 228, 228); z-index: 100; } .sidebar{ background-color: white; position: fixed; left: 0; bottom: 0; top: 50px; width: 72px; z-index: 100px; padding-top: 5px; } .thumbnail-row{ position: relative; margin-bottom: 8px; } .video-time{ font-family: Roboto, Arial; font-size: 12px; font-weight: 500; padding:4px; border-radius: 2px; color: white; background-color: black; position: absolute; right: 15px; bottom: 15px; } .notifications-icon-container{ position: relative; } .notification-time{ position: absolute; top: -2px; right: -5px; background-color: rgb(200, 0, 0); color: white; font-family: Roboto, Arial; font-size: 11px; padding: 2px 5px 2px 5px; border-radius: 10px; } .sidebar-link{ height: 74px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; } .sidebar-link:hover{ background-color: rgb(235, 235, 237); } .sidebar-link img{ height: 24px; margin-bottom: 4px; } .sidebar-link div{ font-family: Roboto, Arial; font-size: 10px; } .channel-info{ position: relative; } .tooltip1{ position: absolute; bottom: -5; display: flex; flex-direction: row; border-style: solid; background-color:white; width: 260px; margin-top: 10px; align-items: center; justify-content: center; border-radius: 10px; border-style: none; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .tooltip1 .profile-pic{ width: 50px; height: 50px; border-radius: 50px; margin-top: 10px; margin-bottom: 10px; margin-left: -10px; } .tooltip1 .author{ font-family: Roboto, Arial; font-size: 20px; font-weight: bold; padding-left: 10px; } .tooltip1 .stats{ font-family: Roboto, Arial; font-size: 15px; color: grey; padding-left: 10px; } .title:hover .tooltip1{ opacity: 1; } .title{ height: 40px; }

thegreatfeez / HTML-CSS

Responsiveness #1

HTML