Skip to content
OverviewSolutions
50
Comments
15
Jeck
@j-tomajin

All comments

  • Jeck•1,080
    @j-tomajinPosted over 1 year ago

    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
    @SungKim96Submitted over 1 year ago

    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-tomajinPosted over 1 year ago

    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
    @ogueridSubmitted almost 2 years ago

    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-tomajinPosted almost 2 years ago

    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-tomajinPosted almost 2 years ago

    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-GitHubSubmitted almost 2 years ago

    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-tomajinPosted almost 2 years ago

    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-tomajinPosted almost 2 years ago

    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-tomajinPosted about 2 years ago

    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-tomajinPosted about 2 years ago

    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
    @narahkarunaSubmitted about 2 years ago

    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-tomajinPosted about 2 years ago

    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-tomajinPosted about 2 years ago

    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-tomajinPosted about 2 years ago

    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-tomajinPosted about 2 years ago

    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