Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.
I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)
@DanK1368 Hia mate.
Try position: fixed; instead of position: absolute;, to fix the scrolling issue.
@media screen and (max-width: 670px) {
.ggprRt {
/* position: absolute; */
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transform: translateX(110%);
opacity: 0;
}
}
Why is svg/image at top left corner not shown correctly in Safari-Browser?
Hi @Chillidot
If you remove the height: auto; from the your style.css below, that should fix it in safari!
/** Circle **/
svg{
max-width: 100%;
/* height: auto; */
}
Hope that helps!
How to make the eye icon visible while hovering over the image? How to make it responsive for smaller devices?
Hi @ujwalvinay
You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:
<div class="img-wrapper">
<img src="images/image-equilibrium.jpg" alt="image" id="banner">
</div>
.img-wrapper {
position: relative;
}
.img-wrapper::before {
content: '';
background: url('../images/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
display: block;
border-radius: 1.2rem;
position: absolute;
top: 0;
right: 5%;
bottom: 0;
left: 5%;
z-index: 100;
visibility: hidden;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s;
}
.img-wrapper:hover::before {
visibility: visible;
opacity: 1;
}
Hope that helps! 👍
2nd card (Thanks Card) cannot center elements properly, can someone help me with that?
Hi @MikeAngel2
You should be able to center the second card by updating your index.js to set display flex instead of block.
$(".Thanks").css('display','flex');
This bit of CSS should help to center the text on the second card as well
.Thanks {
align-items: center;
text-align: center;
}
Hope that helps!
Hello. I am not sure if height and width of the container should be dynamic, depending on the random advice text or fixed?
@Abrosss Looks good!
Your question is probably one for whoever designed it. I went with a fixed width, but I don't think it matters too much.
Few html/accessibility issues:
Your <section class="page"></section> element is probably better off being a <main class="page"></main> (Document should have one main landmark)
Also need a <h1> element somewhere inside your <section class="container"> (Page should contain a level-one heading)
Nice challenge for me.
@Ganesh-Rathor To style range input on chrome/brave (webkit) you can use:
input[type=range]::-webkit-slider-runnable-track {}
input[type=range]::-webkit-slider-thumb {}
I have used grid-template-areas but now its not working.
Hey @jillpandya2594, Hopefully this fixes your grid!
.container {
margin: auto;
max-width: 40rem;
padding: 2em;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
main {
padding: 2em;
background-color: #fff;
grid-column: span 2;
align-self: flex-end;
}
section {
display: flex;
flex-direction: column;
padding: 2em;
background-color: hsl(179, 62%, 43%);
}
aside {
padding: 2em;
background-color: hsl(180, 62%, 47%);
line-height: 1.6;
}
This first project was straight forward and pretty fun to complete overall. The only issue I ran into the first time was making it mobile friendly, after I switched to flex box it, that issue was solved.
Centering my QR code to the center of my container was something I feel I could have done better, instead of doing this inside of CSS I opted for the <center> tag in html.
Is there any guides on how professional web developers set up their CSS files?
Nice job @NellyisDevv
I would avoid using the <center> tag as it's well out of date, and no longer recommended.
To display your QR code a tiny bit better on really small screen widths (around 320px) I would do something like this:
.qr-container-background {
background-color: var(--White-);
padding: 20px;
border-radius: 20px;
max-width: 320px; /* Set max width of card */
width: 100%; /* Full width up until 320px */
}
.qr-container-photo img {
border-radius: 10px;
width: 100%; /* Set image to fill width of the container */
height: auto;
}
For a small project like this, I think your CSS file set up is absolutely fine!
Also, you've got a few Accessibility/Html issues that you could resolve for a perfect score.
I know the colour on the hover states is incorrect. But I just could not figure out the correct colour scheme to use.
Also, I am a bit concerned that the sizing of the design. It is massively different to the design brief. In the real world, would this be a major concern? If so, are there any websites that can scale images and give the correct pixels for my future design???
Again, thank you for all that will review my code and give feedback.
Hey @TotallySly, it looks alright!
For the button hover, I used a slight opacity instead of the background colour, something like:
.payment--container button:hover,
.payment--container button:focus {
opacity: 0.75;
}
For the sizing thing, it depends on how picky your client is in the real world 😅. When I want to get the image size from the design image, I usually open it up in Preview (mac) and drag a square around the image to get the dimensions.
For your Order Component, it looks like your background images aren't coming through. Something like this should help I think (feel free to play around with the background-size values):
body {
...
background: url(images/pattern-background-mobile.svg) no-repeat, top center hsl(225, 100%, 94%);
background-size: 100% 194px;
}
@media screen and (min-width: 908px) {
body {
background-image: url(images/pattern-background-desktop.svg);
background-size: contain;
}
Used this project to test my bootstrap and CSS knowledge. Getting better every day.
As always, any feedback whatsoever is welcomed. Thanks.
@EmmanuelOloke Looks good!
Your <section> elements ideally need a heading tag inside them somewhere 👍
That's my 5 pence 😅
Hi guys,
Please provide some feedback. :)
The app isnt perfect, I still have some problems to fix:
background-image: url("../../../assets/icon-check.svg"); This is my file path for the check mark inside the button. However, github pages isnt displaying it. Isnt that the relative file path to be used if the file is 3 layers deep?
The draggable feature works on the todo items that are already there. However, the code breaks once new todos are added? What am I doing wrong?
Thanks guys :)
@DanK1368 Looks good!
background-image: url(../../assets/icon-check.svg); will get you the checkbox!Hi, I come back from a 1year break to the front-end and I try to remind important topics. I hope with the realization of the front-end mentor challenge my skills come back and even grow.
I am ready for critics :)
@AdamMzkr Looks great!
Just missing a <main> tag, that's all.
Nice job 👍
