article-preview-component-master

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted almost 3 years ago

  Hello dear Potato 🥔

  allright there is so many ways to get this done, I mention two main approaches I personally take for these scenarios.

  • for this challenge, I used media queries. I mean it's a same component, as long as it is within small screens it sticks to the bottom, but as soon as it hits wider screens, it completely transforms into different styles, but it is still same css class ! here is my solution on this challenge in case you wanna check it out.

  • there is another approach you can take, you can create two different elements for mobile version and desktop version, and add display:none to desktop version, then using media queries, when user reaches wider screen you can add display:block to the desktop version and display:none to the mobile version. ( I guess it got a little bit confusing but I did my best 😁 ). then using javascript you can toggle both these classes but always one of them is hidden according to the device's screen width.

  I hope you find this comment helpful

  Marked as helpful

  0

  ---

  

  Tomas Scerbak•720

  @TomasScerbakPosted almost 3 years ago

  @Yazdun Hi. display: none that was my approach but I think I have completely wrong HTML layout and also I don't know whether I should apply styles for arrow in JS or in CSS. I will check your solution definitelly. Thank you

  0