Responsive article preview component

Community feedback

• 

  Musie Misgun•40

  @Natty-techPosted 8 months ago

  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!

  0

  ---

  

  Levis Kim•1,200

  @Orekihotarou-kPosted 8 months ago

  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✨

  0

  

  Musie Misgun•40

  @Natty-techPosted 8 months ago

  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.

  0