Skip to content
OverviewSolutions
8
Comments
3
Sebastian Heitmann
@DonHeidi

All comments

  • Sebastian Heitmann•150
    @DonHeidiPosted 12 months ago

    Hey PRAGATHI567,

    I think you nailed the example quite well. It seems to me, that you may have forgotten to add your assets to your project. Maybe you have forgotten them to add to your git commit?

    You can add the assets folder with

    git add assets/
git commit -m "added assets"
git push

    Also, you have a margin on your mobile view. This is, because elements have margin and padding by default via the browser.

    A short way is to add this CSS rule:

    *, *::after, *all::before {
  margin: 0px:
  padding: 0px:
}

    The * is a whitecard that stands for all elements. You can learn more about this from Josh Comeau and (his custom css reset)[https://www.joshwcomeau.com/css/custom-css-reset/].

    I often use his reset in my projects as well. Hope this helps.

    Besides that good work. Keep it up!

    Marked as helpful
    0
  • Simon Fraser•30
    @simoncodes-devSubmitted about 1 year ago

    I still am confused with the best way to use Flexbox in these contexts.

    • Was there a better way than using "viewport height and width" as the content containers?
    • Should I have allowed for text overrun more, because the box is still constrained to 50vh?

    QR Code using Flexbox

    2
    Sebastian Heitmann•150
    @DonHeidiPosted about 1 year ago

    Hey Simon,

    this looks good! regarding your questions. If you are using width: 100vw; you could introduce something like horizontal scrolling where you don't want it. As you are using flexbox you should not need to specify the width as flexbox is spanning over the full width.

    Using height: 100vh: will work on Chrome but not on Edge for example and will fail on mobile views because of the dynamic address bar that is showing up after page load but hides when scolling down. It is possible to use dynamic viewport height, height: 100dvh:, or the small viewport height, height: 100svh; which is the smallest height the viewport could have, which can be better as the dynamic viewport height will change.

    Kevin Powell made a good video about this, which you can find here: The problems with viewport units

    You can use height on the card but you don't have to. You can achieve a similar result by using something like this on your .card class

    display: flex:
flex-direction: column;
gap: 1rem; /* just an example */
padding-bottom: 1.5rem;

    By using gap, paddings and maybe margin on the card contents, you will achieve a responsive layout for the card with overall more control. The card height will adjust to its content this way.

    Hope this helps and happy coding!

    Marked as helpful
    1
  • Gerardo Garcia•170
    @GGSWEngineerSubmitted about 1 year ago

    Hello everyone!

    Appreciate you all looking at my solution for my product preview card component.

    A few questions...

    Ideally, you would want to start building out this project starting out with the mobile version first, correct? I figured this out after finishing the desktop version but can anyone help explain why?

    I looked at the style guide and README files to find the colors of the project but it didn't match to the actual picture given to me by frontendmentor. A bit unsure if I mistyped the color or not. Did anyone else experience this issue?

    As my screen gets smaller, my container and the content inside it don't change much in size and only adjust drastically when it hits the max-width media 600px. Is this standard or should my project be more responsive?

    Finally, when we add the media queries is it usual to add a lot more code there, or is it usually just a few things? I feel like I added too many selectors and properties there, but would love to hear the communities input.

    Thank you for your time,

    Gerardo Garcia

    Product Preview Card Component

    3
    Sebastian Heitmann•150
    @DonHeidiPosted about 1 year ago

    Hey there GGSWEngineer,

    nicely done! To make the component behave more responsive you could use something like this on your .container class.

    min-width: 343px;
width: 100%;
max-width: 600px;

    or shorthand

    width: clamp(343px, 100%, 600px)

    The container will respect the size of its children if it is between 343px or 600px.

    You can also use the HTML picture element instead of your Script.

    <picture class="product-preview-card__img">
      <source srcset="images/image-product-mobile.jpg" media="(max-width: 768px)" />
      <source srcset="images/image-product-desktop.jpg" media="(min-width: 769px)" />
      <img src="images/image-product-desktop.jpg" alt="product image" />
</picture>

    Hope this helps!

    Marked as helpful
    2