Мобильная версияI want that cards moves from right to left with same height and width as shown in picture which works fine but i am getting window horizontally scrollable which i don't want. When i am putting width:100% the card width reduced which i don't want. when the number of cards is less everything works fine but not with no of cards increases. So please help me to get this work as i want.
Like cards should be the same height and width as shown in picture without horizontally scrollable window
.main-ind-card { box-sizing: border-box; display:inline-flex; flex-direction: row; /*align-content : flex-start;*/ /*!*max-width: fit-content;*!*/ /*align-items: flex-start;*/ overflow-x:hidden; align-items: stretch; } .ind-card { width: 280px; height: 150px; max-width:100%; background: rgb(17, 4, 134); border-radius: 15px; box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px; /*display: flex;*/ color: white; justify-content: center; position: relative; flex-direction: row; align-items: center; background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85)); cursor: pointer; transition: all 0.3s ease-in-out; overflow: hidden; margin-left:20px; box-sizing: border-box; animation: ind-card 8s infinite linear; margin-right:auto; } @keyframes ind-card { 0% { transform: translateX(0px) } 33.333% { transform: translateX(-200px) } 66.666% { transform: translateX(-400px) } 99.999% { transform: translateX(-600px) } 100% { transform: translateX(0px) } } .ind-card:hover { box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px; } .top { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; margin-block-end: .5rem; } .pfp { position: relative; height: 40px; width: 40px; background-color: white; border-radius: 5px; display: flex; justify-content: center; align-items: center; } .title-1 { color: white; font-size: 1.25rem; font-weight: 900; } .playing { display: flex; position: relative; justify-content: center; gap: 1px; width: 30px; height: 20px; } .greenline { background-color: #1db954; height: 20px; width: 2px; position: relative; transform-origin: bottom; } .line-1 { animation: infinite playing 1s ease-in-out; animation-delay: 0.2s; } .line-2 { animation: infinite playing 1s ease-in-out; animation-delay: 0.5s; } .line-3 { animation: infinite playing 1s ease-in-out; animation-delay: 0.6s; } .line-4 { animation: infinite playing 1s ease-in-out; animation-delay: 0s; } .line-5 { animation: infinite playing 1s ease-in-out; animation-delay: 0.4s; } @keyframes playing { 0% { transform: scaleY(0.1); } 33% { transform: scaleY(0.6); } 66% { transform: scaleY(0.9); } 100% { transform: scaleY(0.1); } } Real Estate
Real Estate
Real Estate
Real Estate
Real Estate
Real Estate
Real Estate
Real Estate
Источник: https://stackoverflow.com/questions/781 ... scrollable
