Skip to content
OverviewSolutions
8
Comments
8
Sankara Gomathy M
@sankaragomathym

All comments

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey Mubaraq Wahab.. Great work! Its very neat and scaling well.. For the mac image, first you need to remove the padding and margin set to its left. Then add a negative left margin. In mobile view, it can be set to auto. Hope this helps.. :)

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey Giovanni! I guess you have complicated your code. Just keep it simple. Have 2 containers A and B (each inclusive of image, text, name). On initial load, let B have 'display:none'. In JS all you have to do is toggle displays of A and B based on ID or whatever selector you use.

    The above is fine since there are only 2 testimonials. But when we have to deal with more number, instead of having containers for each testimonial, we can simply have one container in HTML and the content stored in JSON format. When slider is clicked, just fill in the corresponding content using JS.

    Hope this helps.. You can refer my code if needed.

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey!! Nice work.. Adding 'box-sizing: border-box' to all elements will solve half of your problem. The padding will affect the width of the element when you resize. Next, instead of changing flex-direction to column, you can go for 'flex-wrap: wrap'. And try to avoid unnecessary margins. These are increasing the space between 2 elements in mobile view. Hope this helps.. :)

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey!! Glad to see another great work of yours.. Here are my suggestions..

    1. Your error image is working but its still in 'display:none' and that's the problem.
    2. And try to position the error image relative to the input field as the field width may change based on the device width.
    3. The error message can be aligned to the right.

    Hope this helps.. :)

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey! Nice work. There are few suggestions that I would like to give.

    1. It is always a good practice to load your script file at the end of the body as the DOM would have fully loaded and available for access in JS file.
    2. The share button in not visible in mobile view.

    Hope this helps.. :)

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey! Good work.. I would like to give some suggestions. Try to have a closer look at the colors given in the design and implement them. You can use linear-gradient wherever 2 shades of colors are used. And for radio buttons, text field and send button, you can use input elements in place of icons and p element.

    Hope this helps.. :)

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey! You can hide the default radio button and position your custom radio button over it. So clicking your custom radio button would in turn trigger the default. You can write custom styles for checked state based on default's state. For more info, you can google custom radio buttons. Hope this helps.. :)

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey! I guess you have got a typo in your JS file (in 2 places) where the 'tooltip' is misspelt.