Skip to content
OverviewSolutions
4
Comments
6
Harshit Joshi
@TheFoxian

All comments

  • Christopher Portorreal•70
    @crixferSubmitted over 1 year ago

    Centering and putting the image aside of the white box, then centering the text in the right-sided white box.

    I tried adding Bootstrap coding, but it broke my codes every time. I need more practice.

    What do you recommend to do these kinds of positioning and sizing without using so many codes? I really appreciate any help you can provide.

    Display Flex centering Perfume challenge

    4
    Harshit Joshi•120
    @TheFoxianPosted over 1 year ago

    Hey Christopher, congratulations on completing the challenge.

    Here are my few findings, you have used two images and displaying one image with hiding another at media breakpoint makes sense but it is not a good practice, instead use HTML source tag. Read more about HTML Source tag.

    Other than this you have used display flex directly to the main tag. This is not a good practice, instead use a div inside of main and wrap all the content inside it and apply the respective css to that wrapper. Read more about centring any element using flex

    Although you have used max width 600px but there are few standard for media breakpoints. Please refer this for better understanding -

    1. 320px — 480px: Mobile devices
    2. 481px — 768px: iPads, Tablets
    3. 769px — 1024px: Small screens, laptops
    4. 1025px — 1200px: Desktops, large screens
    5. 1201px and more —  Extra large screens, TV

    Keep up the good work! Enjoy coding :)

    Marked as helpful
    1
  • Harshit Joshi•120
    @TheFoxianPosted almost 2 years ago

    Hi Deepak!

    Congratulations on completing this challenge. You have used font-awesome-pro cdn in the link tag. Replacing the cdn link with this

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> will help.

    Also for the classes used in the 'i' tag replace fa-light with fa and your icon will appear.

    There is one more feedback related to the image you have used, currently you have used a single image for both desktop and mobile. As per the challenge you need to use 2 different images for 2 different devices using source tag. Read more about Source HTML tag

    Thanks

    1
  • Harshit Joshi•120
    @TheFoxianPosted almost 2 years ago

    Hey there!

    Congratulations on completing this task. Everything seems fine there is one thing with the card-image it's not showing right now. I've reviewed your code and there you need to change the src, currently the image path is from the directory 'image' and it is missing from your code architecture. Once you replaced the path from image/image.png to image.png everything will work fine.

    Thanks

    Marked as helpful
    0
  • Harley García Carmona•40
    @HarleyGCSubmitted almost 2 years ago

    The desktop design breaks when the width is less than 502px, I would like to know how I can fix this so that the layout does not break before reaching the mobile design.

    Product preview card solution

    2
    Harshit Joshi•120
    @TheFoxianPosted almost 2 years ago

    Hey Harley! Congratulations on completing this challenge. I've gone through your code and viewed you site preview. Here are my few findings listed below:

    1. I believe that by this statement "The desktop design breaks when the width is less than 502px" you must be referring to the image getting center aligned vertically. This is causing because of the wrapper card has display flex and align-items is set to be centered this yields the image getting center aligned with respect to the textual content. You can simply avoid this by changing the media breakpoint.
    2. By default for responsive media breakpoints, please refer to the official documentation Ideally max-width: 575px is the best breakpoint for smaller devices and min-width: 576px for min media breakpoint.
    3. For the card image source tag must be used hen we have to show 2 different images for 2 different screen sizes. Please read more about source tag through the official documentation.

    Other than these feedbacks Kudos to you for completing this challenge.

    Thanks, Enjoy coding :)

    Marked as helpful
    1
  • Harshit Joshi•120
    @TheFoxianPosted almost 2 years ago

    Congratulations on completing this project Here are few of my findings which may help you with the upcoming challenges.

    All the anchors should have a hover effect as of now it's missing which indicates that the button will not perform any action on clicking and on hovering. For the image better use d-none and d-sm-none classes accordingly, this will help you with displaying the required image at a time. Other than that instead of grid you can also use flexbox. Hope you know how to work with it.

    BTW everything seems fine. Great work keep it up!!

    Enjoy coding :)

    0
  • Blac_Koder•30
    @Eddie7145Submitted almost 2 years ago

    What I found difficult while building this project was most with the images, I had a tough time making them responsive, so I would like to ask my fellow developers for the best way to make images responsive (pinching them in and out).

    The areas of my code I'm most unsure of are mostly my JavaScript section more especially because I'm new to it, but here it is below:

    const CloseMenu = document.querySelector('.close-menu-sect'); const NavWrap = document.querySelector('.nav-wrapper');

    CloseMenu.addEventListener('click', () => { NavWrap.classList.toggle('hide'); })

    So my questions are :

    1. What are the best ways of making and image responsive?
    2. Is there an easier way to write JavaScript code other than the way I wrote it?
    3. Is there any way to write CSS code more easily and efficiently?

    Newspaper Landing Page Using CSS Grid Areas

    2
    Harshit Joshi•120
    @TheFoxianPosted almost 2 years ago

    Hey! Good job and congratulations on completing this challenge // Here I've few feedbacks based on my observation: - font family is missing, mobile menu is also missing same goes for the hamburger. Other than that for css improvisation I suggest use css preprocessor such as SASS, or simply use bootstrap with the basic required css customisation. Happy Coding :)

    1