Skip to content
OverviewSolutions
0
Comments
31
Fernando FeN
@Fernando0654

All comments

  • Tarık•330
    @developertarikSubmitted almost 3 years ago

    I tried to make the share button a lot, I couldn't do it, can you help me, how can I do it? I don't have any knowledge about javascript yet.

    article preview component using css grid

    2
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    It's alright, everyone here we are learning and improving.

    First of all, you need to improve your CSS skills. Try to not use too many pexels, instead use vw, vh, rem and em. I see in your code you use height property with pexels, this isn't a good idea. There is plenty of articles and videos explaining how to use these

    If you want that the button show the pop-up menu, use the :hover state. It's not the same but it will allow to complete this challenge without JS

    Good luck and good coding 👍

    1
  • Camilo Gaviño•30
    @CamiloGavSubmitted almost 3 years ago

    Hello everyone! Thanks in advance for checking my code ... question: how could I have added a blue background to the eye image? I did not find the solution.

    Greetings from Argentina

    HTML + CSS

    3
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    Right now, as you have your css, replace this to your .img-container::before. You can do this by inspecting elements first to see it works fine

       content: " ";
    position: absolute;
    opacity: 1;
    background-image: url(./images/icon-view.svg);
    background-position: center;
    background-size: 20%;
    height: 100%;
    width: 90%;
    background-repeat: no-repeat;
    background-color: blue;
    border-radius: 10px;

    Of course, on background-color add the right color, I just wrote blue because I don't remember the color.

    Good luck, though

    Update: Don't forget to add space on content: " ", otherwise it won't work

    Marked as helpful
    1
  • Júlio César•80
    @jlcesarrSubmitted almost 3 years ago

    Hello friends. I'm new to the front end. I had some difficulties in carrying out this project.

    My main difficulties were: 1 - Overlay the view icon over the main image, I made the code below but I couldn't resize the icon (svg) without making changes to the background-color. Since the card__image--hover was positioned absolutely relative to the div card__images. 2- Align the main/container card to the middle of the page

        .card__images {
        position: relative;
        width: 100%;
        grid-column: 2 span;
    }
    
    .card__image {
        width: 100%;
        border-radius: 16px;
    }
    
    .card__image--hover {
        display: none;
    }
    /* img.card__image:hover+img.card__image--hover {
        position: absolute;
        display: block;
        opacity: 0.5;
        height: 100%;
        top: 50px;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 200px 200px;
        z-index: 1;
        background-color: hsl(178, 100%, 50%);
    }
     */

    I accept any kind of feedback, thanks for your attention.

    Response page using CSS Grid

    2
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    I recommend to you using a max-width property to avoid content gets too large. It looks too large on my desktop, Regarding to set content on the center, point 2, I use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%). Of course, this only will work fine on desktop sizes. On mobile use something with margin: auto and it'll get done almost like magic.

    Also, I don't recommend using px with the padding property because it will create you troubles. Instead, use em so they'll get a better response on big and small screens.

    Regarding to your 1 point, hope you find the answer. What I did with this one was to work with a filter css property when hovering along with the svg eye.

    Good luck!

    Update: If you don't want to use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%), you can do this to your main tag and it will work in your code to solve your problem:

    Get rid of the min-width: 100vw property

    Then write width: 90%, max-width: 500px and margin: auto and it should be work

    0
  • Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    The reason of your trouble is that top class is over the img, which has the hover state. So, it's not hovering because when you put the cursor over the img, actually you're hovering the top div and not the img

    Hope this can help you. Also, use a main tag to wrap the main content of the page. This will fix your accesibility issues

    1
  • Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    👋 It's not fitting well on my mobile device, the content is not center. I recommend to you using width: 95% along with max-width: *some value in px* and margin: auto on your main tag or wrapper

    Marked as helpful
    1
  • Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    👋 Heyo! It's positioned to the left on mobile device, also I don't recommend to use too many px on your css. This may be the cause of your error

    Hope this can help ♣︎

    0
  • Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    Heyo! The "Can I cancel my subscription" section has a bug. The answer it's positioned to the right on mobile device

    Good luck on fixing this 👍

    Marked as helpful
    0
  • Starlin de Jesus Medina•120
    @StarlkSubmitted almost 3 years ago

    i used react and styled-component as libraries in the front end to see how it would work in a "real" project but being a small project i think i overdid it when creating components. i ended up creating more js files than i should have, how would i solve this if i used the same technologies?

    To do app using react.js and styled-components

    1
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    I think there's nothing wrong with using small modules, it sets the basis for a scalability in case you want to grow your project

    On the other hand, it's not responsive. It doesn't fit well on my mobile device.

    Hope this can help you to fix this ♣︎

    Marked as helpful
    0
  • Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    On the total section it gets overflowed. I recommend to you using .toFixed(2) method to change 1.5899999999999999 for 1.58

    Hope it helps you!

    Marked as helpful
    0
  • Mikhael Opeyemi-Olatunji•150
    @mikhael-ooSubmitted almost 3 years ago

    Please provide general feedback on what I could do better in this project. I just started with web development and it would do me a ton of good to know how I could better grow in my journey of learning. Thank you.

    NFT-PREVIEW-CARD solution

    2
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    👋 Hey! I saw you used max-width property with %. This isn't a good idea because it will get smaller on smaller screen sizes. The best way of doing this is:

    max-width: 600px and width: 95% for example. This way, it's not gonna grow more than 600px on bigger screens and it'll be 95% on any kind of mobile device

    Good luck, browww.

    Marked as helpful
    1
  • Soumya Banerjee•425
    @soumya495Submitted almost 3 years ago

    Hey Everyone this was the first time attempting a challenge using React JS, It was really confusing at first but I somehow managed to work my way around It. Please provide your kind feedback and also if there are any other way of deploying a React project ?

    Job listings with filtering Using React JS

    2
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    You can use this commands to deploy your React App when using webpack and babel. It's super easy and it helps to improve the performance ​  ​"scripts"​: { ​"dev"​: ​"​webpack serve --open --config webpack.config.js --mode development​"​, ​    ​"build"​: ​"​webpack --mode production --config webpack.config.js​"​, ​    ​"deploy"​: ​"​gh-pages -d dist​"​, }

    • With dev, it opens you a server similar to run when you're developing

    • With build, web webpack creates for you a folder with the name, usually, 'dist'

    • And finally, with deploy, I use a package of npm called gh-pages that publish the project website live for you in Github

    This is the way I do this. Hope it helps you ♣︎

    Marked as helpful
    1
  • Jociel•90
    @jsmeyringSubmitted almost 3 years ago

    Hi folks I tried to insert de bakcground-image, but it didn't work. I think there is a problem with my .svg image. Could someone help me with this problem? body { background-image: url(..images/bg-pattern-top-desktop.svg), url(..images/bg-pattern-bottom- desktop.svg); background-position: bottom 50vh right 52vw,top 50vh left 50vw; background-repeat: no-repeat, no-repeat; ... }

    Social proof section

    2
    Fernando FeN•425
    @Fernando0654Posted almost 3 years ago

    To get a good background position I'd suggest using a div with width and height along with the img tag and other properties like position fixed for example

    To avoid any accessibility issues when adding these tags that I mentioned, don't forget to add the attribute aria-hidden: true

    Something like this:

    <div class="img-right"> <img src="path"> <\div>

    I hope this can help you, man. I did this on my last upload and worked well

    0