@smahidv
Posted
In the desktop version, both the image and content share equal space in the container. To make it responsive, it's best to use CSS Grid like this:
.container { display: grid; grid-template-columns: 1fr 1fr; } This gives better control compared to using flex
Marked as helpful
@smahidv thank you bro !
I've tried as you suggested and after several overall changes I managed to match the given design
Another issue that I face is the image size gets broke down when it's resized, and when you change the viewport the image gets much smaller before to get mobile version, I don't know actually where I'm missing something to improve, I've tried a lot of changes but didn't get any result (
@smahidv
Posted
@orazdaurenov It's completely normal for the image to adjust its size in this situation as it needs to fit within the constraints of the grid layout. to fix this, you can modify the media query by using 'min-width: 720px'. Remember to update the image size in your HTML accordingly and for the button, apply 'padding: 1em 2em'. Using 'em' units ensures the padding adjusts proportionally based on the font size of the current element, making the button responsive as for 'rem' it depends on the root element . you can check out this : https://www.youtube.com/watch?v=JHregeIsjPQ
