Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
10
Jesse
@jesse10930

All comments

  • Pranav•500
    @pranav1597
    Submitted almost 4 years ago

    Loopstudios-landing-page(Html,Css,Js)

    2
    Jesse•430
    @jesse10930
    Posted almost 4 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 helpful
  • Kofi Nartey•650
    @kofinartey
    Submitted almost 4 years ago

    Room product page with slider

    1
    Jesse•430
    @jesse10930
    Posted almost 4 years ago

    Hey 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 helpful
  • Abhishek Singh•15
    @abhisheksinghwork7
    Submitted almost 4 years ago

    Completing using SASS and BEM

    1
    Jesse•430
    @jesse10930
    Posted almost 4 years ago

    Hey 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 helpful
  • Urmi Jana•10
    @Urmi-Jana
    Submitted about 4 years ago

    Desktop optimized design using HTML and CSS

    1
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hi 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!

  • Beshoy S.•460
    @BeshoyS
    Submitted about 4 years ago

    Fylo dark theme landing page - mobile version first

    1
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hey 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@example.com" 
        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!

  • Kristina•175
    @kristinalesnjakovic
    Submitted about 4 years ago

    Article Preview Component - HTML/CSS/JS

    2
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hi 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 :)

  • Saumya Verma•565
    @nikkuv
    Submitted about 4 years ago

    Rest-country-api-with-theme-switcher-using-react and tailwind CSS

    1
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hey 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!

  • Kris Pietrzak•340
    @krisp-dev
    Submitted about 4 years ago

    Huddle lading page | HTML, SCSS | Gradient animated button

    2
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hi 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!

  • Daniel Ejekwu•55
    @Danielejekwu
    Submitted about 4 years ago

    HTML & CSS

    2
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hey 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.

  • Naman Kandol•250
    @namankandol
    Submitted about 4 years ago

    Testimonial Grid Section

    2
    Jesse•430
    @jesse10930
    Posted about 4 years ago

    Hey 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!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub