Skip to content
OverviewSolutions
24
Comments
16
Yasmine
@Yasmine10

All comments

  • Yasmine•700
    @Yasmine10Posted over 1 year ago

    Hi @CuriousFullStacks

    When you remove the width: 70% in your <p> element and add padding-inline: 2rem; , the text should look the same as the design.

    Hope this helps 😊

    Marked as helpful
    1
  • Charles•170
    @cacti00Submitted over 1 year ago

    This was pretty easy to build

    I have a question tho, apart from setting a flex-basis on the container to display the image and its contents side by side. Are there any other ways to set them side by side

    I am open to any feedback on how I can improve and reduce unnecessary code.

    Responsive Product Preview Card Component with HTML,CSS

    2
    Yasmine•700
    @Yasmine10Posted over 1 year ago

    Hi @cacti00

    An easy way to display your image and content side by side is to use grid, you could do something like this in your .product-card class:

    display: grid; 
grid-template-columns: repeat(2, 1fr);  /* use grid-template-columns: 1fr; for mobile view */

    I also saw that you're using divs with an img inside to display the image in your html. There is an html element for that actually: '<picture>'

    Here's an example of what that would look like for this project:

    <picture>
  <source srcset="images/image-product-desktop.jpg" media="(min-width: 50em)" />
  <img src="images/image-product-mobile.jpg" alt="" /> 
</picture>

    Hope this is helpful 😊

    Marked as helpful
    3
  • bilguun1130•380
    @bilguun1130Submitted over 1 year ago

    How do I decrease the size between the bottom of the card and creator's avatar and info? The very bottom part has too much space between elements but I don't know how to decrease that size. Tried margin-bottom and did not work. Anyway, this is the best I can do for this one.

    NFT preview card component

    2
    Yasmine•700
    @Yasmine10Posted over 1 year ago

    Hi @bilguun1130

    The reason for the spacing issue is because you used grid and then you downsized the icon image with percentages. It doesn't recognise that the icon image is not at 100% anymore, but if you use for example height: 3rem on the avatar image it should work just fine.

    To prevent that issue in the future you could also add align-items: flex-start to your .main-content class, that way you can also see that the image is still height: 100% instead of 30%

    Otherwise great solution!

    Hope this helps 😊

    Marked as helpful
    1
  • Yasmine•700
    @Yasmine10Posted over 1 year ago

    Hi @atmaram-kambli,

    Great job on your first project!

    To center the main container you could change the following in your code:

    • in the body:
    body {
font-family: 'Roboto Slab', serif;
text-align: center;
background-color: hsl(212, 45%, 89%);
height: 100%;    // -> remove this and replace with min-height: 100vh;
display: flex;
flex-direction: column;     // -> remove this because this doesn't do anything
align-items: center;
justify-content: center;
}
    • in your .main class:
    .main {
background-color: hsl(0, 0%, 100%);
border: 2px solid red;
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: 450px;
width: 350px;
margin-top: 100px;   -> remove this line
display: flex;
align-self: center;
flex-direction: column;
align-items: center;
}

    I also saw that your qr code image is a little stretched, to fix that you could add the following in your css:

    #qr {
width: 100%;
object-fit: cover;     // -> add this line
}

    Hope this helps!

    Marked as helpful
    0
  • ClaireliseDev•120
    @ClaireLise-devSubmitted about 2 years ago

    Here is my solution for the News homepage challenge!

    I still need help for the mobile menu, I don't know how to make an hamburger menu with HTML/CSS so for now I just put the logo and hamburger icon menu!

    Also I have difficulties to put everything in a 1440px screen without scrolling.

    Any help is very welcome!

    News Homepage solution

    1
    Yasmine•700
    @Yasmine10Posted about 2 years ago

    Hi @ClaireLise-dev 👋

    Congratulations on finishing the challenge! It looks really good!

    I don't see any problems with scrolling in a 1440px screen. To me it looks good.

    For the mobile menu you actually don't need to write a second <nav> like you have done. You can just use a media query and change the styling when it's below or above a certain breakpoint.

    And to make the mobile menu with only HTML and CSS, you can use a hidden checkbox with a label. In the label you place the hamburger icon and depending on when the checkbox is checked or not, you can show or hide the mobile menu. I've got a codepen that shows you how to do this 😊

    Hope this helps!

    Marked as helpful
    0
  • Yasmine•700
    @Yasmine10Posted about 2 years ago

    Hi @Billygotclout 👋

    Good job on finishing this project!

    To make the navbar responsive with HTML and CSS you can use a hidden checkbox and a label. Inside the label you place the hamburger icon and depending on when the checkbox is checked or not you show or hide the navbar.

    I also have a codepen that could help explain how to do this exactly 😊

    Hope this helps!

    0
  • Dicskson Owusu Nyantakyi•270
    @ondicksonSubmitted about 2 years ago

    I have a problem on the mobile version. I could not get the responsive navbar to be like the image in the Figma without using JavaScript. I search and watched many tutorials but almost all of them was using JavaScript. Will be glad if anyone can help solve this bug with only *HTML & CSS *. Thank you

    News homepage

    1
    Yasmine•700
    @Yasmine10Posted about 2 years ago

    Hi @ondickson

    Your solution is looking good!

    I've got a codepen that shows you how you can achieve the mobile navigation with only HTML and CSS. The main thing is that you use a hidden checkbox with a label. The label is the hamburger icon and depending on when the checkbox is checked or not, you show or hide the navigation menu.

    Hope this helps!

    Marked as helpful
    1
  • ania•330
    @ania221BSubmitted over 2 years ago
    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

    Yet setting role to list is treated as a mistake in the report. Is it a bad idea to use role="list" to remove default styling?

    • There was no tablet view. It doesn't seem necessary but should it be added somehow anyway?

    3 column preview card using grid, flexbox and custom properties

    2
    Yasmine•700
    @Yasmine10Posted over 2 years ago

    Hi Ania 👋🏻

    • When you're using <ul> or <ol> a screenreader knows that that is a list because they're semantic elements that are used for lists. So like the report says, role="list" is unnecessary because it already knows it's a list without adding the role. It would be useful to add it when you're using a div as a list for example, because <div> is not a semantic html element and a screenreader won't know you're using it as a list.

    • Also if you want to remove the list-style of <ul>and <ol>, you could add the following instead of the role: ul[class] and ol[class]

    • And for the tablet view, it depends on how the website looks and where you placed a breakpoint. If you look at my solution you will see it's not really necessary in this case. If you just remove this line grid-template-columns: 21rem; in .grid for the mobile version, you don't really need a tablet view.

    Hope this helps! Your solution looks great btw😊

    Marked as helpful
    0
  • Rajesh Janyani•330
    @Rajesh7rjSubmitted over 2 years ago

    Tried this challenge, face few difficulty, but I did it, but still face issue for setting border radius of product-mobile-image as per container border radius. I tried overflow : hidden as well but didn't work.

    Every feedback is welcome....

    Product preview card

    1
    Yasmine•700
    @Yasmine10Posted over 2 years ago

    Hi Rajesh 👋

    You only have to set the border radius on <div class="row container">. When you then add the overflow:hidden it will cut off the corners of the image because those are overflowing the container. So if you remove border-radius: 3% 0 0 3%; from the <div class="col product"> it should still work.

    Hope this helps!

    0
  • FalejevV•500
    @FalejevVSubmitted over 2 years ago

    (I'm just getting started. No idea what to even ask.)

    I tried to make this card responsive and used a lot of @Media in css for that (A few every ~100px). Is this the correct approach? This amount of @media doesnt look very nice and correct.

    Styled-components, Flexbox

    1
    Yasmine•700
    @Yasmine10Posted over 2 years ago

    Hi FalejevV 👋

    Your solution looks great!

    Regarding the media queries, I would recommend only adding one when it's necessary. In this case you only need one media query around 650px because the 2 columns are getting a bit small there.

    Hope this helps!

    1
  • Dave•5,295
    @dwhensonSubmitted over 2 years ago

    Another attempt at intrinsic design. I think the layout is mostly working OK but have two issues that have flummoxed me that I would welcome advice on:

    • The h1 should be white on the black background, and black otherwise. I have tried following some online tutorials using mix-blend-mode for this but cannot make it work.
    • For some reason, object-fit and object-postioning don't seem to have any impact on the map image. This is only really obvious on large screens, but again, I am a bit unsure of what I am doing wrong here.

    EDIT:

    • I just check how this looks on Safari - oh dear, some very storage behaviour going on in the header on the home page.
    • And I realised I forgot to do the srcset for mobile images. That is probably my least favourite part of HTML, so I think I'm going to leave it. It's not where I wanted to focus with this one!
    • And having just looked at the design and my attempt, I think I need to focus a bit more on combining this approach with 'pixel pretty close' if not perfect. I am way out here.

    Art Gallery Page - More intrinsic design

    1
    Yasmine•700
    @Yasmine10Posted over 2 years ago

    Hi Dave 👋

    If you add width: 100% and min-height: 100% underneath the object-fit and object-positioning the map will fill the whole div.

    Hope this helps!

    Marked as helpful
    1
  • Pon Huang•210
    @ponhuangSubmitted over 2 years ago

    Change the default color to orange and blue, and add a light box-shadow design. But still couldn't do well in mobile version, and have problem to make the button work properly.

    In the first time I use button element, then swap with a link, and it works slightly different. In what case we will use button, not a link?

    Cause, the course I took before, they also make button by a link. And this confuses a little.

    Single Price Grid - SASS & Grid Layout

    3
    Yasmine•700
    @Yasmine10Posted over 2 years ago

    Hi Pon 👋

    To fix the mobile version you just have to change the following:

    .container {
 max-width: 63.5rem;   // what you have now
 width: Min(90%, 63.5rem);   // change it to this
}

    The reason a button and a link work a little different is because their default styling is different.

    Also here are some resources to better understand the difference between a link and a button.

    Hope this helps!

    1