I don't know how to radius the image from top-left, bottom-left radius to top-left, top-right when it change to mobile resolution
Sam
@Samcode001All comments
- @sova-mainSubmitted almost 2 years ago@Samcode001Posted almost 2 years ago
First of all give some padding at mobile size by using @media query , such as: @media screen and (max-width:768px){ };
then make the previous radius 0 and set the new radius as you wanted. Make Sure you give some responsive width like width: min(1440px,100% - "subtract the padding that u want here"); e,g --container-padding:2rem; min(1440px,100% -var(--container-padding));
By using above method u can easily target the mobile view . for more information visit: https://github.com/Samcode001/product-preview-card
for same card preview website.
Marked as helpful0 - @TothZoltan77Submitted almost 2 years ago@Samcode001Posted almost 2 years ago
For making same width columns , use : "display grid. grid-auto-flow:column; grid-auto:column:1fr;"
wrap the columns section into a single component like "even-columns" and use the above property . hope this will help you.
for more information about the same responsive site that u created visit: https://github.com/Samcode001/Sunny-Side
Marked as helpful0