Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Jeck• 1,080

    @j-tomajin

    Posted

    try putting './' on the src tag:

    <img
src="./images/image-qr-code.png"
alt="Qr code"
/>

    I had the same problem before and this worked... (idk y)

    Marked as helpful

    0
  • SungKim96• 30

    @SungKim96

    Submitted

    I put the media query: @media only screen and (max-device-width: 480px) { img { width: 100%; height: auto; object-fit: cover; padding: 0; }

    .box { display: inline; align-items: center; margin: 1rem; padding: 1px; }

    .about-perfume { display: block; }

    .perfume-name { font-size: 28px; }

    .btn { width: 300px; height: 3rem; } } but it doesn't work :(

    Product preview card component by HTML, CSS

    1

    Jeck• 1,080

    @j-tomajin

    Posted

    Hello SumKim,

    • on the image you can do:
    <picture>
<source media="(min-width: 780px)" srcset="images/image-product-desktop.jpg">     
<img src="images/image-product-mobile.jpg" alt="product-img">
</picture>

    this will automatically switch the image with the given min-width on the <source> tag.

    • on the button, you don't have to give it a height, and just put a padding-block with a em so it will scale based on the parents font-size,
    • and make sure to use <div></div> when storing a lot of elements, not span...
    • on font-sizes you can use clamp values to automatically scale based on screen width, so you don't have to set another font-size on media query,
    • on the body do not use margins, just set it to:
    body {
min-height: 100vh;
display: grid;
place-content: center;
}

    to center the contents (or use flexbox)

    Marked as helpful

    0
  • od• 80

    @oguerid

    Submitted

    HI all, this the first time i have used CSS grid can i get some feedback was not sure if i used it the best way to do thing.

    -is it good practice to use css grid on mobile because in flexbox you can use flex-direction: column

    Single-price-grid

    1

    Jeck• 1,080

    @j-tomajin

    Posted

    HELLO! it is really a good practice using grid with this kind of projects

    • in mobile you can use grid-template-column: 1fr, just like in flex-direction: column; , all of your section will only keep 1 fraction of space.
    • in desktop, you can also use:
    .container {
   display: grid;
   grid-template-area:
      'top-section top-section'
      'middle-section bottom-section';
}

// setting grid area
.top-section {
   grid-area: top-section;
}
.middle-section {
   grid-area: middle-section;
}
.bottom-section {
   grid-area: bottom-section;
}
    • or just simply:
    .container {
   display: grid;
   grid-template-column: repeat(2, 1fr);
}

.top-section {
   grid-column: span 2;
}
    • if you want to know more about Grid, here's Kevin Powell's video about it...

    :D

    Marked as helpful

    0
  • Jeck• 1,080

    @j-tomajin

    Posted

    I think you need to put the index.html outside the folder. I can only see the README file on your recent sites...

    0
  • Ali Ahmed• 680

    @Dany-GitHub

    Submitted

    Made animation on scroll using intersection observer Api, Any recommendation about articles on writing clean code or best practices for SCSS Thank you for your time! 🤗

    Responsive loopstudios landing page

    1

    Jeck• 1,080

    @j-tomajin

    Posted

    GOOD DAY!

    • You can watch Coder Coder's tutorial about SASS here, she explains pretty much everything about it and some ways to make your job easier.

    • or you can just clone my repo for my default SASS folder here, it is pretty much the same as Coder Coder's and just added some stuff, but I still recommend you to watch her tutorials about it...

    LOVE YOUR ANIMATE ON SCROLL! KEEP IT UP :D

    1
  • Jeck• 1,080

    @j-tomajin

    Posted

    HELLO!*

    • yes, you can use display grid here and I think it is the best way to do this.
    • here's the example of Kevin Powel

    Marked as helpful

    1
  • Jeck• 1,080

    @j-tomajin

    Posted

    HELLO!

    • you can use the <picture> tag:
    <picture>
          <source media="(min-width: 780px)" srcset="images/image-product-desktop.jpg">
          <img src="images/image-product-mobile.jpg" alt="product-img">
</picture>

    • This will automatically switches the images with the given min-width.

    • use semantic tags such as <main>, <section>, <article> and so on. It is actually a good practice using semantic tags.

    • also use letter-spacing for the perfume

    HOPE IT HELPS. HAPPY CODING! :D

    0
  • Jeck• 1,080

    @j-tomajin

    Posted

    Hello!

    This challenge really is a pain in the neck!

    on your illustrator class use the desktop woman-illustrator img as a background on desktop so it will hid the image outside your main tag, and then do display: none; on the woman-illustrator mobile for media query for desktop.

    HOPE IT HELPS. HAPPY CODING! :D

    0
  • Narah Karuna• 130

    @narahkaruna

    Submitted

    To complete this challenge, I use flexbox and grid. I had a hard time getting the link "change" in the plan to center (vertically) in the grid.

    Feedback welcome.

    Order Summary Component

    1

    Jeck• 1,080

    @j-tomajin

    Posted

    HELLO

    did you try align-items: center; ?

    since you used flexbox, justify-content: center; center the content horizontally, and align-items: center; center the content vertically. And if you use this two the content will be centered;

    HAPPY CODING!

    0
  • Jeck• 1,080

    @j-tomajin

    Posted

    HELLO!

    • <section> is a semantic element for creating standalone sections in a web page. blog.hubspot.com. You can use <article> inside it developer.mozilla.org. And you can use <div> to wrap other components, you don't have to use semantic tags every time.

    • in the attribution, you wrap them in <footer> element. to stick it at the bottom you can:

    body {
   min-height: 100vh;
   position: relative;
}
footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: zero;
}
    • when using a heading (h1, h2 and so on) make sure to use it descending order. Use <h1> then <h2>, <h2> usually used inside <article> element.
    • and I recommend to do mobile first to desktop, but if you are comfortable doing desktop first to mobile, then it's all good!

    Hope it helps! HAPPY CODING! :D

    0
  • Jeck• 1,080

    @j-tomajin

    Posted

    Hello!

    tips for attribution,

    • you may wrapped it inside a footer element

    • for it to be stick at the bottom you can:

    body {
   position: relative;
   min-height: 100vh;
}

footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

    HAPPY CODING!

    Marked as helpful

    0
  • Jeck• 1,080

    @j-tomajin

    Posted

    YOU DID GREAT!

    and I have some tips for you to improve your code.

    • to center you content you can use...
    body {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

    or

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

    HAPPY CODING :D !!!

    Marked as helpful

    1