@Nishant-afk
Manoj Kumar Singh
@manojks092All comments
- @manojks092
Nishant let me give you my personal opinion on your issues : a) It doesnt matter whether you use basic or advance html/css, what does matter is the semantic of the site. b) for active states you can use pseudo-classes, along with the container that can be set using pseudo-elements(::before) and thus with the help of opacity and z-index you will achieve the hovering over effect over the image. c) as this site is simply from top to bottom you dont need to do anything exceptionally, as the site layout is same for smaller and larger devices, yea somewhere you might need to use flex for aligning items vertically or horizontally. For your height issues, to fit it in a single page, you can wrap the whole document in a container and set the height of the container as
height:100vh;and then for different sections you can distribute the height accordingly. The last point might be confusing for now but when you'll use semantic html then things will become more clear to you. Hope this will be helpful. Happy Coding :DMarked as helpful - @mahnoork18@manojks092
Hey there, if you want to input to turn red or any other color when incorrect, then use outline property in javascript. Like this :
inputElement.style.outline = " 2px solid red"; PS: here inputElement is the reference to the form input element , can be for password or text. Hope you'll find it helpful. Happy coding :DMarked as helpful - @darwinsanchez9018@manojks092
Hey buddy, good try. But there are some fixes regarding responsiveness of your site. Resize the window at 700px or 890px you'll see that the slider section and the main section overlap. What i'll recommend is rather using Javascript, first try to make your site fully responsive. then you can add your javascript accordingly. Hope this will be helpful. Happy coding
- @MariAleCas@manojks092
Hey there, few manipulations that you need to do : a) The navigation menu b) On smaller devices its not responsive, the contents are overlapping to each other(375px) c) site layout on size 1024px
Hope it will help your layout of the page get better and responsive. Happy coding.
Marked as helpful - @shamsjor@manojks092
Hey, please use the appropriate size of the image for smaller devices.
- @SakiCode@manojks092
Hey there, kindly review your code as the site isn't fully responsive, check the site layout when its above 375px or 376px, you'll see the difference. On the desktop/laptop screen the site appears fine, but if you check your site in toggle device toolbar(where you can check the responsive nature of your site on different devices) then you'll see that your site isn't fully responsive. Hope it'll help you. Happy coding. :D
Marked as helpful - @nigel-sys@manojks092
Hey there, try to use AJAX technology such as Fetch API or XmlHttpRequest. The data will be uploaded as the page loads or as you wish to be. Hope this will help :D Happy Coding.
Marked as helpful - @MinHien-git@manojks092
Hey there, nice try. Solution:
- first of all set width of the header element as 100%
- remove left 30px;
- inside the header element set the flex-grow property of the h1 element to 1 , flex-grow:1;
- set the text-align:center to h1. And tadaaa!!! here that goes as center :D hope this was helpful. There can be other ways as well so keep trying. Happy coding and stay safe :D
- @suman-somu@manojks092
Hey suman, first of all, good work! You can remove padding either by individually setting it using property
padding:0or by setting it universally like this*{ padding:0; }
It will set padding to 0 for every element in your web page.
Hope it's helpful. Happy coding
Marked as helpful - @rspatz@manojks092
Kindly update your js code in github repository. Else the menu wont appear. Thanks
- @yasminbraga@manojks092
Hey there good try. Well there need to be some fixes:
- It's not responsive, kindly use
@mediaormedia-queryas required. - Upload your code in github so that the code can be accessible to review. Hope it'll be helpful. Happy coding
Marked as helpful - It's not responsive, kindly use
- @medali198@manojks092
That was nice try, there're some improvements needed as mentioned :
- on the right-side chat put the
border-radius - make the background colored element smaller, i guess because of it we'll get vertical scrolling. But if you make the background element smaller then you can overcome the vertical scroll bar.
- the input area of the text message should have button inside it. Also set height and width for the text box(input) and then push the button inside it.
Hope it will be helpful. Happy Coding!!
Marked as helpful - on the right-side chat put the
- @rspatz@manojks092
Hey Robert, first of all really good work and i appreciate your efforts: -For the hover effect you can use CSS3 with
pseudo-classeswhich is used to style the element based on its state. Or you can use javascript on that element as well with events or event handlers. Depends on what you're comfortable with, but in my opinion using CSS3 would be easier as sometimes if Javascript failed to load still your hover effect will work.-For the screenshot to be appeared in the github repo kindly check whether you've uploaded design images or design folder(this folder comes in the zip file that you've downloaded for the particular project). Once you create folder named 'design' in your main github repo, and upload the images, you'll see the screenshot of the image in the readme.
-In your solution the page is overflowing on size 735px and lesser, you're showing modal but that modal is overflowing. Kindly look over the code once again. Hope it'll be helpful. Happy Coding.
Marked as helpful - @peterjsmyth@manojks092
hi pete, concerning your issue, i'd like to suggest, rather using width property for the images, use max-width. or use width along with max-width. this will help the image from stretching vertically. You can also give absolute size for the image rather using relative sizes. You can even try object-fit property as well. Depends on you, what makes you perfect to use it. Just give it a try. Also keep the mobile first approach, you've used desktop first probably.
Hope it'll be helpful.
- @iStealerSn@manojks092
Nice try, the image is not fitted completely in the container height, check it at the size of 1120x670 . Also set the responsive media query from screen size 768 and above. Hope its helpful. Enjoy coding
Marked as helpful - @Vitya23@manojks092
Hey!!Nice work, kindly align it at the center vertically, no need for extra margin on the top of the card. Extra margin just increasing the height of the overall body of the page. Hope it'll be helpful
Marked as helpful - @distephano30@manojks092
Hey Stephane, as you haven't uploaded your code in Github repository so i couldn't review your code, still you did good work, though you need to work in the responsive part of the CSS, as you resize the screen you'll notice that the page or the card isn't responding relevant to the size of the screen, somewhere it's covering full page somewhere its having proper view(for example when width is **1044x670 ** then its covering whole page and at 1067x670 then card is small). Probably you created the page for the desktop first and then tried to change its size for different devices, so in my opinion you should try mobile first approach , this will help you a lot. And use flexbox or grid.
I know its lot to digest, but still its just few code lines that you can update and fix it. All the best.
Marked as helpful - @annab6@manojks092
Nice work out there, but its not completely responsive, resize the screen and around 769x657 you'll find that the cards isn't responsive, it should increase or decrease the height of the cards together. Kindly revisit your code or it'll be better if you use flexbox(as flexbox always keep same height for the elements) . Hope it'll be helpful. Enjoy coding
Marked as helpful
