Looking to hire developers?
@argelomnes
@sahil899
Submitted
Q Is there any way to optimize the code. Q Also regarding centre the card. I follow the standard way to centre any element with respect to whole window " top: 50% ; left:50% transform(-50%,-50%)". But I like to understand the inner working how it centre it. Please Explain?
@argelomnes
Posted
Hi @sahil899,
I think one way to optimize this is to not use font-awesome at all.
Here’s how that centering works:
top: 50%; left: 50%;
50% here pertains to the viewport's dimension. So if the viewport is 980px wide, the card is moved 490px from the left. You may have expected the card to be centered already with this, but it's not. That's because the distance is between the viewport's edge and the card's top-left corner.
This is where transform: translate(-50%, -50%); comes in. 50% here pertains to the card's dimension and starts at its center. If the card is 350px wide, it's moved back 175px.. from its center.
Marked as helpful
@KamaTwoPlusTwoEqualsFive
Submitted
I am just starting so all feedback is welcome
@argelomnes
Posted
hey @KamaTwoPlusTwoEqualsFive,
Congrats on starting the challenges. However your work is not showing up. You can follow this guideline to set it up properly.
@hensusanto
Submitted
I find a difficulty to align the "Annual plan" section to align a little bit to the left near the icon with flexbox, could somebody give me feedback on this? it would mean a lot to me. thank you
@argelomnes
Posted
hey @hensusanto,
You're almost there. Nice work! To achieve it with flexbox, you'll need to group "Annual plan" with the icon or with "Change" first. And be sure to also apply flexbox again with this new grouped elements.
Marked as helpful
@Chuyto70
Submitted
Well, i add the <details> tag and get better thanks for the advice @argelomnes
@argelomnes
Posted
Hey @Chuyto70 ,
Nice work with the layout. If you really want to go the no-js route, I suggest looking into <details> and <summary>. The chevron will be challenging to implement but I think these tags will be your best bet.
Marked as helpful
@titocs
Submitted
i dont know how to make custom width border bottom on Features List at mobile version. so i decided to use ::after pseudoclass but yah it can't styled each one. when i click on one of them, all of them will applying ::after pseudoclass even i use looping
*im sorry for my bad english
@argelomnes
Posted
Hey @titocs ,
I’ve taken this challenge and also used pseudo-class for the list. You need to add width: 100%; in your :after so the borders take up the whole space.
@abdellahelaajjouri
Submitted
Hi, @everyone, I completed the Project, But I have a question. Do I need to make my site Responsive for more than 2 devices (desktop, mobile )? Because I had a problem with the placement of the content when I size my website to the middle Thanks, Guys.
@argelomnes
Posted
Hey @abdellahelaajjouri ,
Desktop layout looks off with regards to the design. Mobile is good tho. I’ve seen some submit their works with only mobile and desktop design. So I guess it’s optional. I prefer doing the tablet layout as well. And suggest you do too as that’s what will be expected with client work.
Marked as helpful
@Naveen39O
Submitted
Hi, I have completed the challenge and made the solution as close as possible to the design. But, I am not able to find an easy way to align the text "per month" vertically center w.r.t to 29 dollars. Any suggestions?
@argelomnes
Posted
Hey @Naveen39O,
You missed the mobile design. You can contain both in an element and play with flex property.
Marked as helpful
@Akouassi25
Submitted
my first time building a project, Just wanting to send this to hopefully learn from the solution
@argelomnes
Posted
Hi Mel,
Just a heads up. Your solution is broken. Both the preview and the link to your project's GitHub.
Preview: Recheck your stylesheet's path. GitHub: This usually happens when the repo is set to private. Change visibility to public.
I also noticed you’re using absolute URLs for your images. I recommend switching them to relative to avoid broken links. E.g.,
file:///C:/Users/kouas/OneDrive/Desktop/Web%20Development/Project%201/CSS/illustration-hero.svg to CSS/illustration-hero.svg
@Thawee99
Submitted
Hello , My name is Thaweesha. I'm from Sri Lanka. This is my first challenge on frontend mentor , so due to that I watched YouTube videos on this challenge for references . Then I had a issue with viewing the frontend on mobile and desktop mode vise versa. I don't have clear understand about that technique. So can anyone please help me on this issue?
Thank you!
@argelomnes
Posted
Hey Thaweesha,
Congrats on your first challenge! The technique is called responsive design. There’s the Resources section if you like to dig around or continue with YouTube.
You actually got the card's layout right on mobile. Add the shadows and it's perfect. Now you only need to adjust it for tablet* and desktop.
*optional but I highly recommend not skipping it
Marked as helpful
@pccipri
Submitted
Hello there, after some time finally managed to finish this challenge as well. If u think there's anything to improve about my code let me know, especially the triangle which I am not sure I got right, also should I use the images as backgrounds only or is the way I did it good?
@argelomnes
Posted
Hey @pccipri,
I think you got the triangle just fine on the desktop. However, you'll need to hide it when on mobile. I noticed the arrow’s tail was chopped off. This is caused by the border-radius.
For the images as backgrounds, yes, the way you did it is good. But I think using the furniture as an inline image is better.
Marked as helpful
@whoiskekeanyway
Submitted
What is the size to make a page responsive to tablets?
@argelomnes
Posted
hey @whoiskekeanyway,
Tablet starts at 768px in dev tools. But I suggest resizing your viewport from your small breakpoint. See where it breaks and then adjust your layout. Your medium breakpoint might start sooner or might not be needed at all.
You're almost there. Some revisions are needed. I recommend starting with the fonts. Barlow should be used in some of the texts. E.g., navigation area.
For mobile, hamburger animation is nice. But about and services are not clickable due to the arrow overlapping them.
Marked as helpful
@wickedWango
Submitted
Is the structuring of the files is good enough?
What can I improve up on?
@argelomnes
Posted
Hey Ashish,
Yes, your structuring of the files is good. One suggestion is to group stylesheets in one folder if you have 2 or more. I sometimes don't do this if one of my stylesheets is the source and the other is the output. In your case you referenced each in the HTML, so I highly recommend it.
HTML is also neat. Putting icon-music.svg inside a div is optional. A minor thing you may consider is putting footer at the bottom of your stylesheet. Just above the media query. So it follows the structure of your HTML as well. Reading it is easy this way.
Overall, good job!
Marked as helpful
@carlin-mitchell
Submitted
I know that there is a lot for me still to learn. My next goal will be to re-factor this project as I get more experience with best practices.
My main question is: Can I keep the background image centered when I resize the window in only one direction?
@argelomnes
Posted
Hey @carlin-mitchell,
You can. To keep the background image centered, you can remove the background-size declaration. Its default value is auto. So you can resize your window wherever you like and it will scale accordingly while maintaining its aspect ratio. Same with background-position: top;. You won't need it because the default value is top-left.
Marked as helpful
@sharathkrml
Submitted
which units are suitable for font-size?
@argelomnes
Posted
Hey Sharath,
I prefer rems. It's predictable. I also use it in combination with ems and percentages sometimes.
@emilunageo
Submitted
I would like feedback on my code. I think I can simplify css but I don't know how. Would be pretty nice if I can get an advice.
@argelomnes
Posted
Hey Emiliano,
For simplifying CSS, my suggestions are:
Keep your specificity low
e.g. .container .card .content-card h1 could've been h1 or .content-card h1 or .card-heading.
You can remove border-radius from the image and add overflow: hidden to .card. This is more reusable. e.g. if you make the card more rounded later on or remove it, you only change it in one place.
Marked as helpful
@violaClara
Submitted
I made the 4 card section with css-position property is it ok to do that? How do that with float or flex?
@argelomnes
Posted
Hey Viola,
For learning purposes, yes. For client work, no. My suggestion is to use grid. Second best choice is flexbox. You can also combine these two.
I also recommend organizing your files. Like grouping svgs inside an 'image' folder and a 'font(s)' folder for font(s). Speaking of fonts, you haven't linked yours yet. You can directly link it from here. Choose only the styles you need and it will generate the link ready for use. Note: You won't need the font file/folder anymore if you do this.
You also missed the mobile layout. Google recently launched Learn Responsive Design. Some sections are still in the works but you should definitely bookmark it. Frontend Mentor also has a resource section if you want to explore more.
Cheers!
@flo1244
Submitted
Can someone review and give their thoughts on this project? Would it have been better to use CSS Grid instead of Flexbox? I also had problem when I changed the body text-size up to 15px it would expand the boxes and through everything off. How could I correct this without having the boxes scrunch back together and become offset?
#coding-newbie
Thanks in advance :)
@argelomnes
Posted
Hey Florence,
I'm getting a 404 when I clicked the preview ang view code buttons. Your repo is set to private perhaps?
Can't answer the text-size issue and the last question if I can't preview your work. But for the first one, I'd reach for Grids for this layout. I also prefer not having team builder and karma grouped into a container. This makes it more flexible for me to reposition these cards. This is also achievable with flexbox. But Grids feels less work.
Marked as helpful
@Anubliss-0
Submitted
Could I possibly use grids to achieve a similar responsive design instead of flex box?
@argelomnes
Posted
hey @Anubliss-0,
yes. nice work btw.
@gethoopp
Submitted
please give me feedback to improve my skills
@argelomnes
Posted
Hi @gethoopp,
Frontend Mentor challenges always have style guides included. I find reading them first gives me a good start. Let me share with you a workflow.
From here, your setup is pretty much done. You can continue with the mark up and layout. This might not improve you skills technically, but doing these first will surely make your work closer to the design provided.
Now, on improving your skills technically. My suggestion is to start small and build it up from there. Start with a Newbie challenge. Complete 1 or 2, then take on a Junior challenge and so on. And of course, post your work together with specific question/s you'll have along the way. This community is here to help you.
Marked as helpful
@Yazdun
Submitted
Hello ! Here is my solution to this challenge and I have a question on this:
div which contains all social media icons, is bigger than card itself but card has overflow:hidden because I didn't want to add border-radius to the image, So when it reaches desktop breakpoint, I made overflow visible and added border-radius to the image. Is there anyway that I can cancel hidden overflow only for social media icons ?✅ I'll be glad to know your thoughts and feedbacks on the solution and possible answers to my question.
@argelomnes
Posted
Hi Yazdun,
That's not possible. You can only cancel overflow:hidden from the element you applied it to. Good job! Love the subtle animation and theme switch.
Marked as helpful
@LahsivK4070
Submitted
I feels like i did a pretty great job. If i am missing somewhere do let me know. Thanks
@argelomnes
Posted
Hey Vishal,
Nice work with the layout. For the "missing somewhere", that's probably:
Bonus: since you're using Grid, you can remove card-2 and card-3 from their container and position each where they should be.
Marked as helpful
@guilherme-dm
Submitted
Feedback around the mobile/desktop breaking point resolution would be interesting. Feels like i had to change it quite soon so the desktop layout wouldn't get messy.
@argelomnes
Posted
Hey Guilherme,
The starting breakpoint you chose for desktop is fine. Texts is still easy to digest as they're not that long. The cards are narrow on this one. An improvement you might consider is to reduce padding so the texts aren't cramped much. You can also improve your CSS by moving common properties from each classes into a single tag or class. For example:
span {
padding: 48px;
min-height: 400px;
}
.sedans {
background-color: var(--bright-orange);
}
.suvs {/* bg color*/ }
.luxury {/* bg color*/}
Marked as helpful
@Darshan-Pandya10
Submitted
Hey, everyone! Waiting for your suggestions and feedback. Thank You :)
@argelomnes
Posted
Hi Darshan,
This is a good start.
border-radius to your mobile container but only applying it to the bottom of the element.input instead of p and putting the img inside of a button. Also add flex:1 to input so it takes up the rest of the space.aside: you missed the background from the design
Marked as helpful
@arnavdoley
Submitted
need help in changing the image's colour
@argelomnes
Posted
Hi Arnav,
Nice work with the desktop design. I noticed that the background color is bleeding from the image in mobile. For changing the image's color, I suggest playing around with mix-blend-mode property.
Marked as helpful
