@Natty-tech
Posted
Hello !, so I see your drawer image takes up always takes up almost half of the class called "article-preview". If you want to make the image smaller than the text part you can give the parent element the grid display and give the image lower "grid-template-column" percentage like the one below:
//give article-preview grid display .articel-preview{ display: grid; grid-template-columns: 40% 60%; //this will make the image width smaller than the text }
you can change the percentage however you like till you get the desired result! Hope this helps!
@Orekihotarou-k
Posted
Hi @Natty-tech. Thank you for taking the time to review my solution. I appreciate that a lot. I set the display: grid and the grid-template-columns: 40% 60% and I found that it does reduce the space that the image takes up.
These changes introduced a new issue however. The content of the second column overflows on top of the image. I think this is brought about by the image. Do you have any ideas on how this can be handled?
Thank you again for your time. Have a wonderful day/night✨
@Natty-tech
Posted
Hello @Orekihotarou-k, I see you are using flex properties on your text content article-preview--content class and sudden changes to its parent element ".article-preview" will affect your second column.
I recommend the following steps:
1.) wrap the drawer image with a div element (lets call it imgwrapper) and also the text content with another div element (lets call it text wrapper)Dont forget to give the image inside the imgwrapper div a width and height of 100%
2.) wrap these div (imgwrapper and text wrapper) with another div element (lets say masterwrapper) and give this a display: grid and also the grid-template-columns: 40% 60% property.
I think this should help with the overflowing situation you are having.
