Avatar for juanmesa2097

Juan David

@juanmesa2097 Medellín - Colombia

Mentor Score

930

Running out of challenges to solve 😿

No solutions submitted

No solutions submitted yet

Latest Comments

  • RE: Oscar Yiu Lap Sang's "Sass is dope!" solution

    1

    A website builder is good for when you have a repeated structure like home, contact, about and you only want to show some information, promote your brand and maybe have a blog but when you need to develop a complete, scalable and made to size application (mobile, desktop, web) those things won't be very useful.

  • RE: Aygulio's "Mobile first HTML,CSS" solution

    1

    Hello.

    The triangle isn't attached to anything so it will move whatever it wants depending on the resolution.

    I don't want to change too much your code, so I'll give you 3 simple steps to fix this:

    1. In the HTML put triangle-container inside of floating

    2. set the next properties in .triangle-container

    .triangle-container {
        bottom: 0;
        right: 0;
        position: absolute;
    }
    1. change the following in .triangle
    BEFORE
    
    .triangle {
         ...
         transform: translate(-329%, -150%);
    }
    
    AFTER
    
    .triangle {
         ...
         transform: translateY(20px);
    }

    The best solution would be using ::before and ::after pseudo-elements to make this type of shape but that would require changing some of your code.

    here's a working example

    Let me know if you have any doubt.

    Update: the background image is full height and doesn't correspond with the design.

    You can easily fix this:

    @media (min-width: 500px) and (orientation: landscape)
    body {
        background-image: url(/images/bg-desktop.png);
        background-size: 100% 50%;      // <---  x, y
        background-repeat: no-repeat;
        background-position: bottom;
    }