Skip to content
OverviewSolutions
28
Comments
4

matias

@strikes7400 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • matias•400
    @strikes7Posted about 1 year ago

    hi, for this excercide is better to use <input type=radio> with a label due to the need to select only one value, and remove from the view the radiobuttons with css because you can interact with the inputs using the label, the html would look something like:

    <label for="first-value">1</label> <input type="radio" id="first-value" name="my-radio" value="1"> <label for="second-value">2</label> <input type="radio" id="second-value" name="my-radio" value="2">

    note that to use <input type=radio> in html the name need to be the same for all the inputs.

    Marked as helpful
    0
  • matias•400
    @strikes7Posted about 1 year ago

    hi, for the the background problem, you can solve it with background-size: 100% auto, the first value is for the width and the second for the height, the problem lies in that you are using the mobile background image in the desktop version of the page. also you can use other values for the height like rem, %, px to match more closely the design.

    Marked as helpful
    0
  • matias•400
    @strikes7Posted about 1 year ago

    the page looks nice. A little advice, it's not necesary put the input inside the label element when you use the for attribute of the label and the div is not necesary because the label element can have text. , so the code would look like :

    <label for="my-input">Text</label> <input id="my-input">

    instead of:

    <label for="my-input"> <input id="my-input"> <div>Text</div> </label>

    it looks cleaner and it's easier to style due to having less elements,. i personaly in a case like the one in the challenge just remove the input from the flow with position: absolute due to it's checked state can be manipulated with the label.

    0
  • matias•400
    @strikes7Posted about 1 year ago

    the image doesn't load due to the first "/" in the src in the <img> element, that slash transforms the url from relative ( can work from any place because the server starts looking for the image from the index.html folder ) to absolute ( the server starts looking for the file from the root of the web server ).

    0