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?
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.
I am just starting so all feedback is welcome
hey @KamaTwoPlusTwoEqualsFive,
Congrats on starting the challenges. However your work is not showing up. You can follow this guideline to set it up properly.
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
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.
Well, i add the <details> tag and get better thanks for the advice @argelomnes
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.
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
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.
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.
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.
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?
Hey @Naveen39O,
You missed the mobile design. You can contain both in an element and play with flex property.
my first time building a project, Just wanting to send this to hopefully learn from the solution
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
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!
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
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?
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.
What is the size to make a page responsive to tablets?
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.
Is the structuring of the files is good enough?
What can I improve up on?
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!
