@Yazdun
Posted
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:noneto desktop version, then using media queries, when user reaches wider screen you can adddisplay:blockto the desktop version anddisplay:noneto 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
@TomasScerbak
Posted
@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
