Hug02• 230
@Hug02
Submitted
Rimsha
@rimshub
All comments
- Rimsha• 240
@rimshub
Posted
Hi, congratulations on getting the challenge done!
Great solution, everything is working smoothly and nicely. However, I have noticed the flag images of the country are not responsive to screen sizes. The image completely disappears on mobile screens. So I looked into the file
CountryCard.scssimg { width: 100%; height: 200px; object-fit: cover; }I think the following are the issues with these rules:
- The image has a fixed height of 200 pixels, which leads to cropping or distortion if the original image's aspect ratio is different.
- The
object-fit: cover;rule will make the image cover the entire container while maintaining its aspect ratio, potentially cropping parts of the image to fit the specified height of 200 pixels.
The following approach allows the image to automatically adjust its size based on the width of its parent container. Here's how you can do it:
img { max-width: 100%; height: auto; }-
max-width: 100%;This rule ensures that the image will never exceed the width of its parent container. It scales down the image proportionally to fit within the container's width. -
height: auto;Setting height to auto maintains the image's aspect ratio, which means it will adjust its height proportionally to the width changes imposed by max-width: 100%;
You can learn more here How to make images responsive - CSS
Hope my answers did help you! Happy learning😄
Marked as helpful
1 - Ana-Zezo• 10
@Ana-Zezo
Submitted
This is First Task in Webiste
Rimsha• 240@rimshub
Posted
Hi @Ana-Zezo, congratulations on getting the challenge done! Great effort.
The layout for desktop-size screens looks good but it's not working for other screens. You can learn more about CSS responsiveness from here: Responsive Web Design - Media Queries
I also want to highlight the issue with the Font link. In your HTML <head>, you're trying to link to a Google Font named "Outfit," but the URL provided is incorrect. You should link to Google Fonts using the correct format.
Update this line:
<link rel="stylesheet" href="https://fonts.google.com/specimen/Outfit">To this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Outfit">Hope my answers did help you! Happy learning😄
Marked as helpful
0 - Ayoife• 300
@Ayoife
Submitted
Wow!, my first Junior challenge! , I'm hoping you'll leave an honest review of this solution. And I also added some animations....Were they good?, were they too much?, Let me know in your feedback!. And also, I'm facing a problem with increasing the height of the container as the text increases, I'll be glad if you could help me with that bug. :)
Rimsha• 240@rimshub
Posted
Hey @Ayoife good solution!! Animations are looking good and smooth.
Some points i noticed while testing:
-
The pattern divider overlaps with the dice-icon (button) when text of advice increases. I think you should set some height of paragraph as well, not only width in advice class. OR see if you can set the pattern divider image position to not change when text length increases.
-
Also, its better idea to go with one animation. It looks too much when type of animation changes with every advice. Otherwise animations really look nice!!
I hope this helps. Keep going✨
0 -
- David• 8,000
@DavidMorgade
Submitted
Hello and welcome to my Creative agency, single page solution
Extra Features:
- Sticky Navbar for easier navigation.
- Smooth navigation clicking the links from the navbar
- Custom Swiper.js Slider.
- Personal changes on hover, image sizes, buttons sizes
Breakpoints:
- Mobile: 375px - 768px
- Tablet: 768px - 1440px
- Desktop: 1440px+
Things that I learnt:
- CSS Mask
- Improved a lot on pseudoelements (thanks to kevin powel vids)
- More components, and more reusable components
Built with:
- React
- Styled Components
- Swiper.js
Question to the community:
Sticky navbar, do you think is a good idea? Thoughts on navbar size when navigating on the page?
Hope you like it!, any feedback would be appreciate, I would apply all the changes that you suggest me here!
Rimsha• 240@rimshub
Posted
Hi David, great solution, everything is working smoothly and nice.
About your question, I think it is great idea to have a sticky navigation on home page for large screens but on small screens there's space issue sometimes so its better to go with non-sticky. Also you can just make hamburger icon sticky for small screens.
Also, it depends on necessity of it. For example for large sites it is good to have a sticky navbar as it enables customer to navigate swiftly. But for a one page small website or where there's little or no scrolling then there's no need of it.
1 - Pablo Solares• 160
@PabloSolares
Submitted
Rimsha• 240@rimshub
Posted
Hi,
Nice attempt. Your approach is differnet and good. Well done!
I noticed some elments of design are missing. You could add more features like:
- Completed Tasks
- Active tasks
- How many tasks are left to do
- Theme changer and so on
It would be perfect solution then. All the best! 😄
1 - 👾 Ekaterine Mitagvaria 👾• 7,640
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the Testimonials grid section.
I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
Rimsha• 240@rimshub
Posted
Hey Catherine,
Great work. Thank you for mentioning chrome extension. 😅
0
