Skip to content
OverviewSolutions
7
Comments
9
Siva
@sivakumars

All comments

  • Ammar Imran•110
    @CosmicGarou18Submitted almost 2 years ago

    Please checkout my first beginner project : The QR Code Challenge. Can someone explain how would I make it so that when i shrink the page thecontent stays in the box and does not overflow

    QR Code

    3
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, @CosmicGarou18.

    To directly address the question, the solution would be to remove the height property from the .main class and the box will grow based on the viewport size on smaller screens.

    On the other hand, it is better to not let the card shrink below a min-width , say about 20rem. Also, for images, it is usually good to have height set to auto , so that the aspect-ratio of the image is maintained.

    I hope I have addressed your issue. Please let me know if this helped.

    1
  • TT4•60
    @F-inChatSubmitted almost 2 years ago

    Learn the sourceset, picture, reset and still trying to figure why the perfume <p> its so hight

    Responsive product web-page

    1
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, @F-inChat.

    The <p> element at line 19 in your html page is missing the closing tag. When the browser creates the DOM of the html document, it inserts a new <p> element and that <p> is causing that extra space/height.

    Add the closing tag, and this issue will be resolved :)

    0
  • Manish Kumar•40
    @kumarmashSubmitted almost 2 years ago

    While working on this project I found that there is small space below the product image in desktop mode. I tried removing it but couldn't do it. Please guide me how I can remove that space or use my image to cover all the section of its container.

    Product preview card component using HTML and CSS

    3
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi Manish,

    The small gap at the bottom of the image is due to the default value of display property of the image. By default display: inline is applied for any image, and all inline-elements have line-height, so that small space appears below the image.

    The fix for this would be to declare display:block on the image or any selector that targets it. Let me know if this cleared your doubts on that issue.

    Marked as helpful
    0
  • Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, @pardaeva.

    In addition to the above solutions which will fix your problem, you can also consider the following property.

    You can use the outline property for the a.button.btn:hover class instead of the border property.

    Applying border to any element affects the dimensions or contents of that element, whereas outline property doesn't.

    .a.button.btn:hover {
           background-color: transparent;
           color: var(--clr-neutral-100);
           //border: 2px solid var(--clr-neutral-100);    << Instead of border,
           // outline: 2px solid var(--clr-neutral-100);   <<  you can use this outline
           cursor: pointer;
}

    I hope this answers this question.

    Marked as helpful
    0
  • Akshay-Tarde•160
    @Akshay-TardeSubmitted almost 2 years ago

    Help needed

    I have designed a responsive solution using flexbox. But there is one big problem. When you adjust the size of the screen, the button position gets inconsistent due to there being different amounts of text in each preview card section. Please help me to solve that.

    Responsive 3 column preview card solution using flexbox

    1
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, Akshay.

    You could use a min-width of 9 rem on the button to keep the button from shrinking if that is what you are asking.

    Or, you could scale down the font-size of the button.

    Also, for each card you could make a it a flex container, with flex-direction set to column.

    Let me know if this is what you are looking for.

    0
  • Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, @BarteQS.

    Good job on the challenge.

    First part of your question: how do you align the items - the text with image?.

    Try using align-items: center on the .cost and .time-left css class. It should align the text with the images.

    Second part of your question: How do you place the eye icon on the image when you hover.

    Just like you've used ::before pseudoelement for the overlay, use ::after pseudoelement and place the 'eye' icon as part of the ::after pseudoelement.

    I hope this should solve your issues with this challenge. Let me know how it goes!

    Marked as helpful
    1
  • Eduardo Ruiz•740
    @EduardoRuiz97Submitted almost 2 years ago

    I couldn't figure it out why my nav bar does not justified to the flex-end. If someone find my mistake, please let me now.

    News homepage

    1
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, Eduardo.

    There is no property called justify-self on a flex-item. Please consider using margin-auto: left on the .menu__container__show class. This pushes the menu container to the far right.

    .menu__container__show{
    /* justify-self: flex-end; */
    margin-left: auto;
}

    There is only align-self on flex-items. I hope this solves your problem.

    Marked as helpful
    0
  • Vitor Magnago•130
    @VitorMagnagoSubmitted almost 2 years ago

    Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid and Mobile-first workflow.

    The main difficulty was creating the overlay effect when hovering the cursor over the image. I got a satisfactory result regarding the background color but I didn't get the same with the "view", it should have the solid bank color, and not be affected by opacity: 0.5;. Any better way to do this?

    nft-preview-card-component - Basic HTML/CSS

    1
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, Vitor.

    You've done a good job on this challenge. To address your question, another way to implement the overlay effect is to use pseudo elements ::before and ::after and position them relative to a containing block.

    Stack those pseudoelements using z-index property on hover. This way, you can control the opacity of the 'view' icon too. Right now, you have nested it inside a <a> tag and applying the color property to the anchor ( <a> ) element

    I usually use position property whenever I feel the need to overlap elements. I hope this helps you! Good luck :)

    Marked as helpful
    1
  • Risquat Adekoya•20
    @RISQUAT123Submitted almost 2 years ago

    It was an awesome experience trying out this challenge with my knowledge in HTML, CSS and JAVASCRIPT.

    The difficult part of this challenge for me was using the CSS Grid, it was my first time using CSS Grid but am glad it came out nice . Another challenging part was resetting the values to zero after a calculation had been done.

    I was unable to center align the custom button while also allowing the figures inputted to be shown from the right. I am open to suggestions and feedbacks on how best to do it.

    Tip calculator App using HTML, CSS and Javascript.

    1
    Siva•210
    @sivakumarsPosted almost 2 years ago

    Hi, Risquat.

    To answer your question on how to center the placeholder text and right-align the input text, please consider using input::placeholder .

    The ::placeholder pseudo element targets only the placeholder text. You could use text-align : right for the input text.

    For that particular custom input box if you are targeting by tag, the code might look like the following.

    input::placeholder{
  text-align: center;
}

input{
  text:align: right;
}

    I hope this helps.

    Marked as helpful
    0