Skip to content
OverviewSolutions
36
Comments
46
Josh
@josh76543210

All comments

  • Brandon EB•20
    @bbuglz81Submitted 12 months ago

    I had a good time with this project, but I can't for the life of me get the card centered vertically in desktop. I'd appreciate any pointers! Thank you for taking a look

    Responsive Product Preview Card

    2
    Josh•1,110
    @josh76543210Posted 12 months ago

    Hi @bbuglz81,

    Congratulations on completing the challenge!

    Here is a quick suggestion for centering your card:

    First, give your body a minimum height so that your page takes up the entire viewport and display it using flexbox:

    body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

    Next, you can center the card by simply adding a margin of auto all around main:

    main {
  margin: auto;
}

    Hope this is helpful for you.

    Happy Coding!

    Marked as helpful
    1
  • Fossll•10
    @FossllSubmitted about 1 year ago

    I struggled initially with getting the card centred, but figured out eventually I needed to set a viewport height for the body.

    I feel like I've 'fudged' it together to match the jpeg, not sure it's as responsive as it can be, so would be keen for comments on how I can improve the code overall.

    QR Code

    1
    Josh•1,110
    @josh76543210Posted about 1 year ago

    Hi @Fossll,

    Congratulations on completing the challenge. Looks good!

    The card is positioned nicely but I noticed that on smaller screens the footer overlaps on top of the card because of its fixed positioning. So I have one small improvement for your code to solve this issue:

    Remove the fixed positioning on the footer:

    .attribution {
  position: fixed;
  bottom: 0;
}

    And replace it with sticky positioning:

    .attribution {
  position: sticky;
  height: 2.75rem;
  top: calc(100vh - 2.75rem);
}

    This will improve the look of your site on smaller screens.

    Hope this is helpful for you.

    Happy Coding!

    0
  • Josh•1,110
    @josh76543210Posted about 1 year ago

    Hello @ughvop,

    Here is an example of how you can display and postion two background images:

    body {
  background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
  background-position: top -50rem left -28rem, bottom -57rem right -23rem;
  background-repeat: no-repeat;
}

    Also, I would recommend using flex-box or CSS grid to center the profile card instead of using margins. This will make the page more responsive. Here is an example using CSS grid:

    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

    Happy Coding!

    Marked as helpful
    0
  • bfc•160
    @bfc0Submitted about 1 year ago

    I don't understand how to position the background properly - either you set the height of body and html to 100% and get the unnecessary scrollbar, or have the lower image cut off.

    Responsive mobile-first layout using flexbox

    1
    Josh•1,110
    @josh76543210Posted about 1 year ago

    Hi @bfc0,

    Good job completing the challenge. Looks good!

    Here is what you can do to fix the background and prevent the scrollbar from appearing:

    First, set the body min-height to fill the entire veiwport:

    body {
  min-height: 100vh;
}

    Then, replace the margin-top on the main tag in the media-query with padding-top:

    @media (min-width: 900px) {
  main {
    padding-top: 8em;
  }
}

    Then, replace the margin-top on the h1 tag with padding-top:

    h1 {
  padding-top: 2.3em;
}

    Finally, remove the margin-inline: 1em; on the h1 tag and reset margin to 0:

    h1 {
  margin: 0;
}

    The margins were what was causing the scrollbar to appear unnecessarily.

    Hope that helps. Happy coding!

    Marked as helpful
    0
  • Mohsen Rostami•200
    @mohsenrostami2000Submitted about 1 year ago

    I have a problem with footer! I did set "height:100vh;" and "display: flex;" "flex direction: column", but in Chrome when I check in inspect, on a larger screen, the footer is not stick at the bottom. can anyone help me with that?

    Four card feature section

    1
    Josh•1,110
    @josh76543210Posted about 1 year ago

    Hi @mohsenrostami2000,

    Good job on your solution. Looks great!

    An easy way to make the footer stick to the bottom of your page on larger screens is to set a margin-top: auto; on the footer:

    footer {
  margin-top: auto;
}

    This works because you have are using flex-box for the body in the media query. If you also want the footer to stick to the bottom on smaller screens too then you have to use flex-box for all screen sizes:

    body {
  display: flex;
  flex-direction: column;
}

    Hope this is helpful for you.

    Happy Coding!

    Marked as helpful
    1
  • Josh•1,110
    @josh76543210Posted over 1 year ago

    Hello @biswarupgh0sh,

    Congratulations on completing the challenge!

    I do have a suggestion for you to improve the responsiveness of your page:

    Remove the fixed height from your result div. This property causes the component to always take up 60% of the viewport height which makes it to large on large screens and too small on small screens.

    .result {
  height: 60vh;
}

    One more suggestion:

    Remove the max-width on the body. The body will already take up all of the width by default so you do not have to include this in your code.

    body {
  max-width: 100%;
}

    Happy coding!

    0
  • MonicaSasGue•30
    @MonicaSasGueSubmitted over 1 year ago

    My first challenge.

    All feedback is welcome.

    (updated to add the "readme.md" file)

    QR Code Component

    1
    Josh•1,110
    @josh76543210Posted over 1 year ago

    Hello @MonicaSasGue,

    Good job on your solution. Looks great!

    One recommendation for you:

    Remove the fixed height on your main div

    .contenedor {
  height: 100%;
}

    and replace it with a min-height.

    .contenedor {
  min-height: 100vh;
}

    This will make your page more responsive and prevent your content from being cut off on smaller screens.

    Happy coding!

    Marked as helpful
    0
  • Josh•1,110
    @josh76543210Posted over 1 year ago

    Hello @newtothis90,

    Congratulations on completing the challenge!

    I have a recommendation for you to improve your code:

    Try to avoid using absolute positioning to center your main content. What happens, is that when someone views your site on a smaller screen that person will not see all of your content. This is because absolute positioning positions your content in a fixed spot no matter what the size of the screen is.

    Steps to change your code:

    1. Remove the absolute positioning for the container (don't forget the media query):

    .container {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 900px)
  .container {
    transform: translate(-50%,-25%);
  }
}

    2. Add an alternative method of centering your content. Two great ways of doing this are css grid and flexbox. Here is how to can do it using css grid:

    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

    The min-height is there to tell your body to use the entire height of the page unless the content exceeds it. In that case the user can scroll to view the other content.

    Well done! You have now improved the look of your page while making your code more efficient and readable. I hope this was helpful for you!

    Marked as helpful
    1
  • Josh•1,110
    @josh76543210Posted over 1 year ago

    Hello @Ay-shizzi,

    Great job on your solution!

    One recommendation that I have for you is to change the height: 100vh; of the container to min-height: 100vh;. This will prevent your content from being cut off on smaller screens (e.g. mobile devices) because the content exceeding the viewport-height will now be displayed properly.

    .container {
  min-height: 100vh;

    Hope this helps. Happy coding!

    Marked as helpful
    0
  • Sanjeet Rai•100
    @Sanjeet204Submitted over 1 year ago

    I was quite addictive of using position to relocate elements to their perfect location however, this time taken a challenge to use less position and manage to perform to task beautifully using margin and padding instead of position.

    In terms of interactivity it was quite easy only needed to validate email. Please share your views regarding this challenge .

    Mail validation using event listener

    3
    Josh•1,110
    @josh76543210Posted over 1 year ago

    Hello @Sanjeet204,

    Congratulations on completing the challenge!

    Here is another suggestion to improve the look of your page:

    Center the social media icons inside their respective divs using flexbox instead of padding. The divs are already displayed as flex so all you have to do is add align-items and justify-content. These can be used to center the flex-items (in this case the icons) vertically and horizontally.

    Just add them to your divs like this:

    .icons > div {
  align-items: center;
  justify-content: center;
}

    And then remove the padding:

    .icons > div {
  padding-top: 11px;
  padding-left: 11px;
}

    Your icons should now be perfectly centered inside your divs.

    Hope this is useful. Happy coding!

    Marked as helpful
    0
  • Josh•1,110
    @josh76543210Posted over 1 year ago

    Hi @itsale-o,

    Great job on your solution. Looks good!

    One recommendation that I have for you is to add a max-width to your container. This is generally a good practice because it will contain your content on larger screen sizes instead of everything being stretched across the whole page. Something like:

    #container {
  max-width: 1000px;
}

    Also, if you haven't already, I would recommend looking into using css grid. You did a great job using flexbox here but I think it would be better to use css grid. The reason being that you just have one grid to manage instead of multiple flexbox rows. If you are interested, here is a really good tutorial for learning css grid: https://www.youtube.com/watch?v=0xMQfnTU6oo

    Keep up the good work and happy coding!

    Marked as helpful
    0
  • Josh•1,110
    @josh76543210Posted over 1 year ago

    Hello @Lovethrech,

    Congratulations on completing the challenge!

    This challenge specifies a font-family of Karla and a font-weight of 400 and 700. The code to import the font to your css with these parameters is:

    @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

    To answer your other question, you can use text-decoration to remove the underline from any text or links:

    a {
  text-decoration: none;
}

    Happy Coding!

    Marked as helpful
    1