@CosmicGarou18
Submitted
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
@sivakumars
@CosmicGarou18
Submitted
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
@sivakumars
Posted
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.
@F-inChat
Submitted
Learn the sourceset, picture, reset and still trying to figure why the perfume <p> its so hight
@sivakumars
Posted
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 :)
@kumarmash
Submitted
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.
@sivakumars
Posted
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
@pardaeva
Submitted
Need help. Buttons sizing up vertically upon hover, can't wrap my head around how to fix. Any help is apprecieted.
@sivakumars
Posted
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
@Akshay-Tarde
Submitted
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.
@sivakumars
Posted
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.
@BarteQS
Submitted
I present my NFT card component. I'm open to any suggestions and Happy Coding!
@sivakumars
Posted
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
@EduardoRuiz97
Submitted
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.
@sivakumars
Posted
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
@VitorMagnago
Submitted
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?
@sivakumars
Posted
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
@RISQUAT123
Submitted
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.
@sivakumars
Posted
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