Open samueltumewu opened 5 months ago
<div class="container-grid"> <img class="cardgrid-image" src="Assets/Chart.avif" width="400px" height="300px"/> <h3 class="cardgrid-title">Analysis</h3> <p class="cardgrid-desc">Dapatkan data penjualan yang akurat dan analisis mendalam<br>untuk meningkatkan dan Pantau stok secara real-time<br>dan optimalkan pengelolaan persediaan</p> <a class="cardgrid-link" href="#" class="btn">Explore Now</a> </div>
.container-grid{ display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto auto; align-content: center; justify-content: space-evenly; } .cardgrid-image{ grid-row: 1 / 4; grid-column: 1 / 1; } .cardgrid-title { grid-column: 2 / 2; grid-row: 2/2; text-align: right; } .cardgrid-desc { grid-column: 2 / 2; grid-row: 3/3; text-align: right; } .cardgrid-link{ grid-column: 2 / 2; grid-row: 4/4; text-align: right; } @media only screen and (max-width: 500px) { .cardgrid-image{ width: 300px; height: 200px; grid-column: 1 / 2; grid-row: 1 / 1; } .cardgrid-title{ grid-column: 1 / 2; grid-row: 2/2; } .cardgrid-desc{ grid-column: 1 / 2; grid-row: 3/3; } .cardgrid-link{ grid-column: 1 / 2; grid-row: 4/4; } }
@khairulrafiudin nanti bisa coba refer solution ini ya untuk issue yang kemarin. sekalian implementasiin display grid
Issue
overlapping text with image
Solution
Expected Responsive result (desktop, tablet, mobile)
HTML
CSS