I need help with responsive

I'm trying to make the mobile responsive, and I truly need your help. Also, I would like some advice to get better at doing responsive, thanks! Note: The image is not showing in code pen. https://codepen.io/Jonah-the-lessful/pen/mdgmOrE
Jonah
CodePen
mdgmOrE
...
No description
No description
14 Replies
SvenSplynter
SvenSplynter8mo ago
Which specific aspect would you like help with? It looks pretty good already. You do need to remove the border-radius on the container on mobile.
Jonah
Jonah8mo ago
The image I'm using is desktop image, the file comes with both, the desktop and mobile image. I want the image to be the same as the photo on mobile. I think I have to get rid of the desktop image to be replace of the mobile. This is my project.
No description
clevermissfox
clevermissfox8mo ago
Use a media query to change from row to column or reverse column with the two elements , content and imageWrapper as direct children
Jonah
Jonah8mo ago
I use it on my container and the image, it didn't work.
SvenSplynter
SvenSplynter8mo ago
You can put the image as a background image. Then change the background image on mobile.
clevermissfox
clevermissfox8mo ago
Didn’t work in what way? The direction didn’t change or..?
Jonah
Jonah8mo ago
It still remains the same. I had use flex-direction on my container.
SvenSplynter
SvenSplynter8mo ago
So, is the issue the direction/order of elements, or is the issue that you want to use a different image on mobile vs desktop?
clevermissfox
clevermissfox8mo ago
It’s switching from row to column for me
Jonah
Jonah8mo ago
Give me a second, I'm going to review my code. Yeah, I already have it in column. I use column-reverse to place the image at the top. But the issue is, The height of the image is too big, and I need to increase the width of it so, It can cover the spaces.
Jonah
Jonah8mo ago
Like this
No description
Jonah
Jonah8mo ago
I'm going to try to use the mobile image
clevermissfox
clevermissfox8mo ago
You’ll need to remove the padding from the parent element and add the inline padding back into the “left” element (which is not left when it’s on the bottom. Would suggest a class name like “content” or something, as an aside on naming conventions 🤣) And as Sven suggested using a bg image instead of an html img element
Jonah
Jonah8mo ago
Okay, thanks
Want results from more Discord servers?
Add your server