Skip to content
OverviewSolutions
13
Comments
5
Carlos Villarta
@caloyv

All comments

  • Carlos Villarta•260
    @caloyvPosted 9 months ago

    Hi, I'm not sure if its my computer's problem and I tried to refresh it, but you layouting just breaks to me. Your header title and darkmode button are next to each other, the search and dropdown are also next to each other, the map images are not centered, when i type to the seach bar while in darkmode I can't see the font color, when I go to a specific country the image is way too big, and the darkmode color does not follow the designed color. But overall functionalities are fine. I have a 1980x1080 resolution and I think the layouting breaks the moment I go beyond 1440px. Hope you fix this. Happy coding!

    0
  • joenigiri•10
    @nrl-izahSubmitted about 1 year ago

    I am absolutely new to HTML and CSS so I find it quite overwhelming at first. Though I managed to complete it in 3 hours, I'm not quite sure if my solution is good. As a disclaimer, I think my solution can only be opened on a desktop browser (I'm not entirely sure).

    There's this particular part that I don't really understand:

    .attribution {
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 99%;
    padding: 20px 0;
}

    It was supposed to put the text at the center bottom of the body but, if I put width: 100% It's not quite at the center.

    The HTML part is here:

    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Nurul Mohamad</a>.
</div>

    Also, any advice on how to learn HTML and CSS effectively is welcome!

    Building a QR Code design

    2
    Carlos Villarta•260
    @caloyvPosted about 1 year ago

    Hi, its going to get complicated if you keep using the position: absolute; on every parent elements especially if your code gets longer and a lot more content. And if you don't quite get how position absolute works, basically when you set a tag as position absolute, that tag will look for the closest parent tag that is set to position: relative;, and if it didn't find one, the body tag the will automatically be the relative. But, I would suggest that you learn flexbox first and stop using position absolute for now. It'll make layouting much easier.

    Also, most html tags' default display property is block, that's why you don't have to set the display: block on the body tag.

    0
  • Dan•820
    @Gitit2meBabySubmitted over 1 year ago

    I have an issue with the Tech page, 50% of the time it works fine, For others I get a return of null and am not fetching the JSON data correctly. not sure why... I think I will watch the tutorial now to get a better handle on the correct methods to get this site looking and functioning properly.

    Vanilla CSS, JS

    2
    Carlos Villarta•260
    @caloyvPosted over 1 year ago

    Hi, I think I found the issue to your problem regarding to the tech page. Your data is not updating when you press the button because almost the whole button is covered by the parent <div class="technology-toggle-btn"> but the <h3> tag is so small. Your button changes state when you press the parent div but the data wont update if you miss the <h3> tag. Open the dev tools, enable the select element and hover to the buttons to verify it. Hope this helps :).

    0
  • Carlos Villarta•260
    @caloyvPosted over 1 year ago

    Hi, I noticed your github page is showing your "README.md" file and I've had that similar problem. To fix it, go to your App.js then to <Route/>, change all your path's first path to your repository name, in your case <Route path="/interactive-rating-component/" element={<Rating/>} />, and same as the other route.

    You can visit this site for more info.

    Marked as helpful
    0
  • myrh•100
    @myrhisyoinkedSubmitted over 1 year ago

    hello everyone, hope y'all have a good day. my question is how can I better position elements horizontally and vertically? like how can I make footer at the bottom of the page? Is there any other good practices to positioning elements horizontally and vertically

    Single price grid component

    2
    Carlos Villarta•260
    @caloyvPosted over 1 year ago

    Hi, regarding to your question, flexbox can do most of the job. Look up on how flex-direction, justify-content and align-items works and with that, you can easily adjust the elements horizontally and vertically. And you can also use all the flexbox properties even when it behaves like a display: block. There are other ways to do it but i find it easy using flexbox especially when i want a specific element to become horizontal from a vertical state or vice versa when changing the screen size.

    My technique on making the footer stay at the bottom is calculating the amount of height of header, main and footer in percentage and they must equal to 100%. here is an example:

    header{
    height: 10%;
}

main {
    height: 80%;
}

footer {
    height: 10%;
}

    If you don't have a header or footer, just make the the main{height: 90%}, or whatever you prefer. Just make sure that when you add it all up, it equals to 100%.

    This website can also be handy while coding.

    1