@Lucio-developer
Submitted
@samuerikcoder
@Lucio-developer
Submitted
@samuerikcoder
Posted
Add in the body: min-heigth: 100dvh and add your background-image.
Hi all! Nothing special really... working on my React course and found this little project to be good practice for the useRef hook. I've taken some creative liberty on the original design just for funsies.
@samuerikcoder
Posted
OMG IT'S SO BEAUTIFUL
@sonicx180
Submitted
Found it hard to make it responsive (it even still has bugs) How would I recreate this with flexbox to make it more efficent and better responsive?
@samuerikcoder
Posted
This video will help you https://youtu.be/B2WL6KkqhLQ
@VickyAzola
Submitted
@samuerikcoder
Posted
Apply this changes in the body:
body {
display: grid;
place-content: center;
font-size: 15px;
font-family: 'Red Hat Display', sans-serif;
background: url(images/pattern-background-desktop.svg);
background-size: contain;
background-repeat: no-repeat;
min-height: 100dvh;
background-color: hsl(225, 100%, 94%);
Now research the use of media queries to improve design on mobile. You will need to add unique modifications to it for the background of the body, I believe it will be very similar to the rules you had put. On the desktop add more padding to your content until you think it's similar to the original.
Marked as helpful
@Meriem1551
Submitted
@samuerikcoder
Posted
Beatiful solution, but in your font-weight variables you added "px" at the end, removing them to take effect in the code. And in the screen widths of the iPad type the image is kind of squeezed, try to improve this part of the responsiveness, but I found the responsiveness of this challenge very complicated even lol.
Marked as helpful
@CodingEule
Submitted
It was difficult for me to work with Grid so tried Flex it worked better was still hard to do it for me
What do you think? What could I do better?
@samuerikcoder
Posted
Hello my friend, I took a look here at your solution and I will tell you what will need to be added. You used the absolute position more than you should. It was enough to have added a flex display in the body. Remove the Overflow hidden on mobile device media querie. I think that the mobilefirst is more easy.
.container {
overflow: visible;
}
To see how to use Grid in this challenge, see my solution: https://www.frontendmentor.io/solutions/3column-preview-card-component-Hubl-E16PC
But basically you would use the Grid display on mobile to leave all the items stacked and on the desktop you would use the grid-template-columns to put them side by side.
body {
display: grid;
place-content: center;
}
.container {
display: grid;
}
@media(min-width: 600px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
/* 1 space for each*/
}
}
Marked as helpful
@Devil-Hacker2
Submitted
@samuerikcoder
Posted
You can add this:
body {
min-height: 100dvh;
}
.container {
height: 100%;
/* position: relative */
}
Remove the position relative of the .container.
@dasnewton305
Submitted
@samuerikcoder
Posted
You can add a 100% height in the image if you like.
@Mfrekee
Submitted
Hey y'all, came back for the summer holiday a few days ago, and i thought i'd learn more things on front end (push myself from being a designer to being a developer) and still practice the ones I already know (that second part's easier now with front-end mentor). Anyway, you'd notice that what I did isn't exactly what's on the desktop design pic (thought I'd play around the color a bitπ€·), and I've actully got a question, which is that, when i share the live site link to my phone, everything in the QR Code Component shifts to the right (except that text that's above it though), and the white background doesn't cover the code nor the picture anymore, it's not even there again. So I ask, is this how it's supposed to be on mobiles?π€ Probably because it wasn't created as a mobile site or something?π€·ββοΈ
@samuerikcoder
Posted
Hello friend, I took a look at your site and did some testing while inspecting the element in the browser. Whenever you develop something on the frontend try to start with the mobile version, we call it mobile first. One of the things I did to improve its design was
body {
display: grid;
place-content: center;
min-height: 100dvh
}
Create an element that will help you create the text part, a div with the 'text' class or whatever you think is best.
This video on YouTube saved me when I wanted to start making the challennges on this site: https://youtu.be/B2WL6KkqhLQ
I haven't started this challenge yet, if it wouldn't give you better support on the issues, but feel free to see my other solutions.
Marked as helpful
@alphandlouis
Submitted
@samuerikcoder
Posted
Good solution my brother! I loved your css. Try to make the site responsive with the grid container or flex box in a media query. Also try to "clean" Javascript a bit by reducing the amount of 'ifs'. You can create a variable that contains all the inputs and then iterate over them by calling the validate function only once in the code.