@pranav1597Submitted over 3 years ago
When I click on the hamburger icon, the icon overlaps the close icon. How to remove the hamburger icon when I click on it so the close icon can show. Any feedback appreciated.
Jesse
@jesse10930All comments
- @jesse10930Posted over 3 years ago
Great project, Pranav! Another option to fixing the issue you raised is to create a class to toggle on the hamburger image, the same way you do for the '.active' class. Something like:
.hide { display: none; }So when the hamburger is clicked, its image will not be displayed. When the close is clicked, the hamburger will come back into view. Hope this helps!
Marked as helpful0 - @kofinarteySubmitted over 3 years ago
Hi. I struggled with this a lot. Having issues with the alignment of the different images when switching to smaller screen widths. There is also an annoying upward movement of the items in the lower row when the slider buttons are clicked. Counting on anyone who will be kind enough to offer solutions. Thank you
@jesse10930Posted over 3 years agoHey Kofi! Nice job so far with this project!
The annoying upward movement on the images when you scroll is caused by the transition on the 'indicator_circle' class: transition: all 0.3s ease-in-out; Because the transition is taking place over 0.3 seconds, the bottom images slide up as the highlight eases out, and then slide back down as the highlight eases in. If you want to keep the transition, you could make the '.slide_indicators' div's height 15px greater, to take the height of the highlighted circle into account, and then add -15px margin-bottom to the same div, so the images below are still lined up correctly. There are definitely other ways to solve this issue, but this should work.
Keep up the good work!
Marked as helpful1 - @abhisheksinghwork7Submitted over 3 years ago
This was my second challenge in the Junior category. Took a lot of time to complete this challenge but was surely a learning experience. I had faced a few issues on this one:
-
At times the styling on one element can drastically affect the elements around it, which becomes difficult to handle, especially when trying to make the page responsive.
-
what would be the best way to make the images responsive and still not let them affect the page's layout? on this project, the images sometimes take absurd dimensions which would affect the layout of my page.
-
Lastly, right now the login and signup button on the top right keeps moving down when I open my menu on the left. I tried setting it to float: right, but it doesn't work.
Also, I feel I need to take a modular approach to each section of the page so that my final sass file is not too big. Are there any models that I can follow to implement the design in a modular manner?
Any feedback would be appreciated.
@jesse10930Posted over 3 years agoHey Abhishek! Great job on the project, looking good so far!
As to your third question, adding the styling 'align-self: flex-start;' to the 'nav-login' class should fix that problem. Right now, the div is centered because of the styling 'align-items: center;' on the 'nav-menu' class. When the dropdown on the left opens, the parent div becomes larger. Then the 'nav-login' div moves to the center of that larger div. If you add the align-self attribute, the div will be unaffected by the size of its parent div.
Hope this helps!
Marked as helpful0 -
- @Urmi-JanaSubmitted over 3 years ago
This is my first time creating a design using only HTML and CSS. I had some problems regarding the hover state of the buttons and optimizing the design for mobile devices. Any help/feedback will be greatly appreciated!!!
@jesse10930Posted over 3 years agoHi Urmi Jana, your project is looking good so far! For the hover-state of the buttons, you just have to add 'button:hover' to your stylesheet, and then add any changes that you want to happen. For example, if you want to change the arrow to a pointer, you could add the following:
button:hover { cursor: pointer }As for responsive design, I'd recommend not using fixed pixels when styling the different elements because as the screen size changes, the element sizes will remain the fixed-pixel size that you defined in your original styling. Using unites like rems, ems, or percentages will respond when the screen size changes because these units are dependent upon their parent divs or the root element. So as the screen size changes, these elements will change size as well.
Other tools you could look into for mobile CSS design are Flexbox, Grid, and mediaqueries.
Hope this is helpful! Keep up the good work!
1 - @BeshoySSubmitted over 3 years ago
Hi guys, this challenge was pretty good but I have two questions:
- how I can customize the error message for the email input in an easy and simple way?
- I always confused about which sizing parameters (px, %, em, rem ...etc) it's suitable to use to make a good responsive design?
I will be grateful to someone explaining these questions to me.
@jesse10930Posted over 3 years agoHey BeshoyS, your project is looking good!
For your first question, if you are just wanting to change the message text, you can add the 'oninvalid' attribute to the input element. It has a bit of a wonky format, which you can see below. You can then set the text to whatever message you would like to send the user.
<input type="email" name="email" value="" placeholder="[email protected]" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required="" oninvalid="this.setCustomValidity('Please enter a valid email address')" >If you are looking to change the popup box styling, I'm not really sure how to go about that.
Hope this is helpful! Great project!
0 - @kristinalesnjakovicSubmitted over 3 years ago
Hi everyone! These are my first challenges with JS and I'm still working on this one because for some reason even listener stops working, so any feedback or suggestion is welcome. Thanks!
@jesse10930Posted over 3 years agoHi Kristina, your project looks great so far!
As to your issue with the event listener, the problem is that the target differs depending on where the mouse clicks inside the button, so the parent to which you are adding 'active' also differs. For example, if you hover on the very edge of the button and click, the 'body' element toggles the class of 'active'. If you hover on the svg image inside the button and click, the 'container-card' element toggles the class of 'active'. And if you hover inside the button but not on the svg and click, the 'article-container' element toggles the class of 'active'. So the reason it seems like it stops working is because if you click on the button to add 'active' but then move the mouse and click on a different spot in the button, the function is adding 'active' again, but to one of the other elements. And then to get rid of the active state, you'd have to click on each of those positions to remove 'active' from each of the elements to which 'active' was added.
I think your best bet would be to use querySelector to target a specific element to which you want to toggle the 'active' class inside your function, just like you did in the 'button' variable. This way the function always changes the same element rather than being dependent on 'e.target'.
button.addEventListener("click", function(e) { document.querySelector(".container-card").classList.toggle("active"); });Hope this helps! Happy coding :)
1 - @nikkuvSubmitted over 3 years ago
There is much space for improvement for this solution...So I would like to get some valuable feedback...😁 I need help on the second page in "Border Countries" there is the name of the countries but we are getting three letter country code. How do get names for the countries there? If you have any method to do it please tell...Thank you so much.
@jesse10930Posted over 3 years agoHey Saumya, your project is looking good so far! In order to get the full name of the country rather than just the 3-letter country code, you have to find the country name that corresponds to the 3-letter country code from the API.
If I'm following your code correctly, you first store all the data for all the countries in the 'country' state when the home page loads. If you pass that state as a prop down to the CardDetails component, you can loop through this data to find the 'alpha3code' that matches the 3-letter country code for your border countries, and then return the 'name' from that country instead of the 3-letter code.
If you don't want to deal with props and React Router, you could fetch and store the data from 'https://restcountries.eu/rest/v2/all' each time the CardDetails component loads, but this would slow your app down quite a bit.
Hope this helps! Happy Coding!
1 - @krisp-devSubmitted over 3 years ago
First time using SVG's and struggled to make them respond to screen width, especially the illustration. Can you let me know if my use of SVG's is good or how I could improve on it?
Tried yet another animation, this time decided to animate the button with a gradient "breathing" animation.
Once <810px and making the screen smaller and smaller the illustration gains top and bottom margin and not sure how to fix to stop it from pushing the text down.
Also, in these challenges when it says "Desktop: 1440px" width in the README.md should I be doing max-width:1440px on the body to mimic the design?
@jesse10930Posted over 3 years agoHi Kris, great job on this project! It looks great! I can't answer your question about SVGs, as I'm not too familiar with how to use them.
To your second question about the smaller screen sizes, the HTML for the SVG with a class of 'container__col1--img' has a 'height="506"' attribute, which is preventing the height of that div to be responsive. So as the screen width gets smaller, the image is responding but the container's height is staying constant, which gives the appearance of those margins. If you add:
svg.container__col1--img { height: auto; }to the media query for smaller screens, I think that will fix the issue.
To your last question, if we set a max-width to 1440px, it could have adverse effects for anyone using your app on a large monitor. I think they give us that info just so we know the relative size of the screenshots we are looking at. But again, not something I'm sure of.
Anyway, hope this is helpful! Happy coding!
1 - @DanielejekwuSubmitted over 3 years ago
Suggestions as to how to make the button text the same color as the container background color would be very helpful. Thanks
@jesse10930Posted over 3 years agoHey Daniel, your project looks great! To change the color of the button text, you just have to add a 'color' attribute to a class attached to the button. It looks like you made a 'button1' class for all 3 buttons, but I don't see it ever referenced. If you change the classes for the second and third buttons to 'button2' and 'button3', then add:
.button1 { color: orange; } .button2 { color: blue; } .button3 { color: green; }to your CSS file (with the colors you want), your page should reflect the desired changes.
0 - @namankandolSubmitted over 3 years ago
I was facing problems to center the grid the grid in desktop version of the website. Can you please tell me how to center a grid?
@jesse10930Posted over 3 years agoHey Naman! Your project looks great! To solve your centering issue, one thing you could try using flexbox on the '.container' class.
display: flex; align-items: center; justify-content: center;'align-items' should center the grid vertically and 'justify-content' should center the grid horizontally. You would probably have to remove any margin/padding that you have on the '.container' and '.mainbox' classes and perhaps set the 'height' or 'min-height' of the '.container' class to '100vh' to ensure it centers the grid relative to the height of the screen rather than the height of its parent element.
Hope this helps!
1
