Israel Pina• 170
@IsraelPina32
Posted
Good job !
1
Ayça Gürler• 180
@aybegu
Posted
@IsraelPina32 Thank you!
0
Design comparison
Solution retrospective
It was harder for me than I expected! It is not responsive and doesn't have mobile version yet. I will later add these features. If you have any suggestions to improve my code, please feel free to share!
Community feedback
Enis Kerti• 590
@eniskrt
Posted
Well done. In addition to others, you can use bootstrap classes for responsive design.
1
Ayça Gürler• 180
@aybegu
Posted
@eniskrt Thank you! Will consider that!
0
Amir Hossein Peyvand• 550
@amirhossein-peyvand
Posted
Hey, well done :) You can use mobile-first approach. Using this method will be easier for you to style your project. First you style for mobile devices, then for larger devices. Use main tag for your card, then inside of it, use two divs, one for the content and the other div for your image container. Use display="flex", flex-direction="column" for mobile devices, and flex-direction="row" for large devices.
<main> <div class="content"> // your content </div> <div class="image-container"> // your image element </div> </main>1
Ayça Gürler• 180
@aybegu
Posted
@amirhossein-peyvand Thank you! I will look into that!
0
Kimo Spark• 2,190
@kimodev1990
Posted
-
You could insert your image inside a div, give the div width 50% of the container ( in your case main tag ) and the width of image 100%,so you can have responsive design.
-
You could clamp ( ) method in your coding ( font-size, width, etc ... ) ,so your design will change according to the viewport dimensions and will be suitable for any device layout.
-
Keep going on & nice work.
1
Ayça Gürler• 180
@aybegu
Posted
@kimodev1990 Thanks! I tried to insert image in a div but I guess i did something wrong because it didn't worked like I wanted. Will do what you said!
0
Kimo Spark• 2,190
@kimodev1990
Posted
@aybegu You're welcome any time ...
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord