Skip to content
OverviewSolutions
11
Comments
21
Jefferson V. F.
@Jorggyh

All comments

  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    To add the font, you can go to Google Fonts https://fonts.google.com/specimen/Red+Hat+Display?query=red+hat

    Add the fonts and weights, and copy the link, there is a link that can be added in the html file, and another for the css file, just use one, the link for you to add in the css:

    @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

    And finally add in the desired selectors, for example:

    body,
button {
     font-family: 'Red Hat Display', sans-serif;
}

    Another thing, it is highly recommended that all css be in the css file, not inside the html (but I don't know if you did it that way because of the bootstrap, I've never used it so if that's the case, disregard.)

    0
  • cesar hernan ruscica•320
    @hernanruscicaSubmitted about 2 years ago

    I really like your comments! What do you think about the media queries? it can be more simple? I found a little tricky to make the image equal to the disegn mobile and desktop, but the object-fit and object-position helps me a lot! I split the product card in two, the image container and the text container. That way I can change the flebox atributte flex-direction from "column" to "row". I used bem style names, customs variables and mobile first aproach.

    Product Card w/ custom vars Flexbox Mobile First and Media Queries

    2
    Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Well done!

    You used only the desktop image?

    You can use two different images, one for mobile and one for desktop, and that's the idea, you can do it with the picture tag, something like this:

    <picture>
     <source media='(max-width: 799px)' srcset='images/image-product-mobile.jpg' type='image/jpg'>
     <img alt=' ' images/image-product-desktop.jpg'>
</picture>

    Or adding the images as background in the css, in mine I did the following, the mobile version:

    #img {
   background: no-repeat center center/cover url("../img/image-product-mobile.jpg");
   height: 24rem;
   border-radius: 0.8rem 0.8rem 0 0;
}

    and the desktop version, inside the media query:

       #img {
     background: no-repeat center center/cover url("../img/image-product-desktop.jpg");
     width: 30rem;
     height: 100%;
     border-radius: 0.8rem 0 0 0.8rem;
   }
    1
  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    @siduki I downloaded your project on my machine to find the issues:

    The problem with the right margin was the following, the width inside the .rating-container inside the media query was at 95%, I just changed it to 100%

    and to give a side margin I added inside the .main-rating-container inside the media query:

    padding-left: 25px;
padding-right: 25px;

    speaking of .rating-container inside the media query, all these attributes are unnecessary, you are repeating:

    display: flex;
align-items: center;
background-color: var(--light-grayish-magenta);
font-weight: 700;
color: var(--very-dark-magenta);
height: 3,125rem;
margin-top: 0.9375rem;
border-radius: 0.625rem;

    You've already defined this before, you can just add something new or change something that has already been defined, making the code much leaner:

    .rating-container {
  flex-direction: column;
  justify-content: center;
  width: 100%; /* was 95% */
  padding-left: 0rem;
}

    the card margin is easy to solve, in your code you have:

    .card-two {
  margin-top: 0.9375rem;
}

.card-three {
  margin-top: 1,875rem;
}

    Just add inside the media query, to change in the mobile version:

    .card-three {
  margin-top: 0.9375rem;
}

    If you got confused, here is the css file with the changes: https://github.com/Jorggyh/test/blob/master/CSS/style.css

    This solves the 2 problems, now 2 details that I particularly prefer, if you don't like it that's ok, it's not a rule:

    I like to add at the top of the css file:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 62.5%; /* 10px = 1rem */
}

    This 62.5% font-size makes it simpler to calculate and more readable measurements with rem

    And I also find it simpler to code the mobile version first, and then add a media query for the desktop version, for example:

    @media screen and (min-width: 768px) {
  
}
    0
  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Well done!

    Some things I noticed, your rating-container is not centered, it seems to have a right margin but I didn't find it, try centering.

    Your card container is more spaced between the second and third, I imagine it's because of the desktop version, you can try to change it in the mobile version and leave it like this in the desktop version.

    https://i.postimg.cc/6pCJKCmY/some-points.png

    The exchange point between the mobile and desktop version is 501px, but with 501px there is not enough space to show the desktop version, I would change it to 1024px which is where the design fits on the screen, or 768px if you adapt to tablets in the future.

    Marked as helpful
    0
  • fazza•240
    @erwinfazzaSubmitted about 2 years ago

    how to set background image with position top-left and bottom right in same tag body????

    profile-card with html css

    1
    Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Just separate them with comma

    background: top left no-repeat url('img1.svg'), bottom right no-repeat url('img2.svg');

    You can add that line with a border top in your div .data

    Marked as helpful
    0
  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Boa tarde brother, beleza?

    Sobre o efeito hover, não sei se é a única maneira, mas eu fiz da seguinte forma, no html, antes da tag img eu adicionei o seguinte:

    <div class="overlay">
    <img alt="Eye view icon" src="img/icon-view.svg" />
</div>

    E no CSS eu adicionei:

    .overlay {
	position: absolute;
	background-color: rgba(0, 255, 247, 0.6);
	width: 30rem;
	height: 30rem;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: 0.15s ease-in-out;
}

/* define o tamanho do ícone do olho */
.overlay img {
	height: 4rem;
	width: 4rem;
}

.overlay:hover {
	cursor: pointer;
	opacity: 1;
}

    Explicação: esse overlay está sobrepondo a imagem, estão no mesmo lugar, isso isso com o position: absolute, mas ele não está aparecendo, porque está com opacidade 0, quando passo o mouse aí a opacidade muda para 1, aparecendo o overlay, a transparência eu consegui com rgba, que permite colocar transparência.

    Tenta adaptar no seu código, depois me fala se deu certo, ou se não deu.

    Marked as helpful
    0
  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Hey, well done!

    A tip, the ideal is that the design looks good on any screen size, you added the media query at 412px, but with 413px it doesn't fit the horizontal design, test it, open your project in the browser, click inspect the page, view on mobile, and view at 425px for example, I would recommend changing to 1024px, or 768px if you adjust the font sizes.

    Another thing, have you noticed that when hovering over the buttons the height of the cards is increasing? this is because the buttons are missing a border, and when you hover the mouse you are adding a border, increasing the size of the container.

    One way to fix this is to add border: solid 1px transparent; inside your button { }, or by setting a height for your container.

    Marked as helpful
    0
  • Abdulkadir GUVEN•10
    @abguvenSubmitted about 2 years ago

    Please don't hesitate to let me know if you've problems with displaying the site. I would be gratefull if you could give me a feed back about best practices that i could omitted or any other advises about the project.

    Responsive Product Card using Sass.

    3
    Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Hello, good job!

    The first thing I noticed is that at 1440px or above the card is vertically centered, but at 1339px or below the card is aligned on top. Try to make all versions center aligned.

    Another thing, the mobile version is being displayed up to 375px, at 376px the desktop version is already displayed, but the space is too small for it, I don't know if anyone would see it in this resolution but for security I would change this exchange point to 670px at least .

    If you need help let me know.

    Marked as helpful
    2
  • Precious•490
    @2peaglesSubmitted about 2 years ago

    Again with the image is what I struggled with the most. Overflow-hidden belongs on the actual card that was my biggest mistake but luckly I got it. I think something else I have noticed is sizing of divs it looks like the text is close but then when I do it same with same font size my mine is always far away looking.

    Overflow-hidden on parent container

    1
    Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Well done, some tips:

    To increase the distance between the lines, you can add line-height: 25px; inside your .subtitle (25 was an example, test to see what the ideal value is)

    The mobile version is different, you can create it with media query, add this at the end of your CSS (or create another file) and change it to match the proposed design, and the changes will only change on small screens, on the desktop it will remain the same version you already made.

    @media screen and (max-width: 425px) {
     #card {
         width: 320px;
         ...
     }

     h1 {
        ...
    }

    /* etc */
}
    Marked as helpful
    2
  • Laurel Ray•30
    @laurel-raySubmitted about 2 years ago

    Hi, this is my first non-tutorial led project after a long period of not building anything at all, so I'm easing myself back in. I was a bit unsure of my positioning. I had a really hard time positioning my footer. It was showing up at the top of the screen, I was finally able to put it beneath the card by placing the footer inside the <main> and setting it to absolute position. Didn't seem like the best solution.

    I also was unsure if there was a better way to position my qr code image.

    I'm open to any suggestions at all and appreciate any feedback.

    Thanks in advance for taking the time to have a look.

    QR Code Component

    4
    Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    It took me a while to elaborate on the answer, maybe @PaletteJack has already touched on these points, but here goes:

    Your code had a </div> tag left over on line 39.

    The way you centered the card is very useful, but for other occasions (usually when we want something to overlap something else) but not for this one.

    Remove position: relative; from the body and remove this from inside main:

    position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

    This done, the card will be aligned on the top left.

    Now you can center horizontally and vertically with:

    body {
  display: flex;
  justify-content: center; /* horizontally */
  align-items: center; /* vertically */
}

    Now for the footer we can do it as follows, change:

      position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%);

    For this:

      position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);

    About the image you had doubts if it was the best way, as you did it is good, another way would be to change:

    img {
  width: 32.5rem;
  margin-top: 1.75rem;
  border-radius: 12px;

    For this:

    .card-image {
  padding: 1.75rem;
}

img {
  border-radius: 12px;
  width: 100%;
}

    Would have to remove the padding-top from the div below.

    Marked as helpful
    1
  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Another tip, your repository on github has two branches:

    • main
    • master (used to be the default, but now github has changed it to main, but git (on your local machine) remains master).

    You can work on master, or any other, but to post the project you must switch to main, in terminal you can change the branch with git branch -m main.

    To change the default in your git, so you don't have to change it in every project, you can do it with git config --global init.defaultBranch main` in your terminal.

    Redme should be in the root of the project, along with index.html, and the images, styles folders

    If you want to see my repository to get an idea: https://github.com/Jorggyh/product-preview-card-component

    0
  • Jefferson V. F.•330
    @JorggyhPosted about 2 years ago

    Hello, good work!

    One tip: The project should have two images, this one for the mobile version, and another higher one for the desktop version, you can add both with the picture tag inside the html, or by css with background-image.

    Try this, remove your img and put this in place:

    <picture>
    <source media='(max-width: 799px)' srcset='images/image-product-mobile.jpg' type='image/jpg'>
    <img alt=' ' images/image-product-desktop.jpg'>
</picture>

    Tell me later if it worked.

    0