Skip to content
OverviewSolutions
8
Comments
10
Miguel Segura MX
@miguelseguramx

All comments

  • Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    You have a really good solution, it's a really cool animation on mobile! ;3

    1
  • Sudharson•70
    @Sudhar611Submitted over 4 years ago

    Please provide your valuable feedback for the below questions. These questions are based on the problems that I faced while developing the solution.

    • When I try to adjust the height and width of the SVG tag to my convenience, it just truncates the icon. So after a lot of scrapping on google and I found a way to resize with viewport. Is there any other way to resize the svg tags ?

    Mobile Responsive - Fylo data storage component master

    1
    Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    ¿Have you try to use an <img> tag and give it the svg on the src attribute?

    0
  • Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    The animations are really cool!

    0
  • Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    You have a really well organized JS, what if you could achive the same effect with only Css???

    Check my solution: https://www.frontendmentor.io/solutions/article-preview-without-js-using-checkbox-GRi3wnWXJ

    You could improve it because my social media container it's weird when the page is loading

    1
  • Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    You create the progress bar and the circle with two ::after elements

    I would be better if you create a span element to make the progress bar and a span::after to the circle.

    This way the circle would always follow the progress bar.

    0
  • Ranveer Singh•210
    @Ranveer251Submitted over 4 years ago

    I am new to React, I was not able to create hover effect on the social icons. I tried using hooks but for every icon I have to make a new state and make functions for each of them to handle their hover effect. Is there a short way of doing this?

    Is there a way that in the mobile size when the hamburger menu is clicked the scrolling of the body is disabled?

    EasyBank Landing Page using React

    2
    Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    To achive the effect on the icons you can use :hover https://www.w3schools.com/csSref/sel_hover.asp

    And maybe the css property: filter https://www.w3schools.com/CSSref/css3_pr_filter.asp

    0
  • Chris Stolba•170
    @chrisstolbaSubmitted over 4 years ago

    Nit picking.

    1. Not sure how to make the background pentagram thicker like in the design example.

    2. Not sure of a convenient/graceful way to transition the open rules button's position as the screen height shrinks without effecting the rules modal. This happens at heights shorter than the height of the rules background ~750px.

    3. Why does my generated screenshot appear 'short'. It looks fine when I visit the site directly.

    ReactJS and plain CSS

    1
    Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    This is a wonderfull version of Rock, Paper, Scissors, Lizard, Spock! This is Amazasing! I love it! :3

    1
  • Veronica•70
    @VJones2112Submitted over 4 years ago

    I have a ton of questions!

    1. I started this project by sectioning off and styling with only divs. That worked fine on the small-screen, but I couldn't figure it out on the desktop version. Using display:grid was much easier. How would I do it if I wanted to stick with just divs?

    2. What is the difference between the desktop-design.jpg and the desktop-preview.jpg?

    3. I considered using h1, h2, p tags to set up the sections, but I remember an accessibility tutorial said screen readers use those to kind of summarize a page and I wasn't sure if that was applicable here, so I just styled <p> tags. Thoughts on that?

    4. I felt like the opacity of the paragraphs was different than what I styled, but is that maybe just a difference in colors?

    5. Finally!- In the Why Us section, I originally set it up as a ul, but then changed it to using <br>. Is one way preferred over the other? Or is there a different preferred way to do this?

    frontendmentor_singlepricegrid

    1
    Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    This's a cool project

    1. Using a grid is the best way to create someting like this, you can use: https://cssgrid-generator.netlify.app/

    2. desktop-preview.jpg is to show a general view of the project, it has more sense if you have multiples states and pages,

    3. If you were working on a real pricing component, you made the right decision In this case, the pricing component is all the content of the page, I don't see why not use h1 or h2 tags

    4. it could be the opacity but if you want to change the color, you can use Chrome Dev Tools to achive the right color! I have a small tutorial on my instagram @miguelseguramx

    5. You should use an ul because you would have a syntactic HTML, the content it's a list, so you need to use a tag for a list

    6. Try to indent your HTML code, because you are writing for yourself and for other developers

    7. The tag body has weid margin, you should override the default styles of some tags

    You're doing a good job, keep it up!

    1
  • Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    I'm using sass because I need to practice for my next job!

    0
  • Claire Porter•50
    @claireporter26Submitted over 4 years ago

    Hi, In this project I have tried to use the BEM method to organise my CSS but I sometimes get confused about the best class names to use and how to write them so it would be good to have some feedback on how I can improve these going forwards. I am also new to using SASS so any recommendations with how I can improve this or look into other elements of SASS that would help in this type of project would be great.

    Thank you.

    Mobile first solution using SASS and CSS Flexbox

    1
    Miguel Segura MX•280
    @miguelseguramxPosted over 4 years ago

    There's an issue on the images, they are stretched, it's a really important thing

    0