@AnisBacha
@TonyAppiah
Submitted
Hello to all you awesome developers.
In this project, I was hoping to achieve the 1440px size design using Grid but I couldn't. I ended up using the "translate" property which takes a bit of playing around with to get the desired positions of the cards. My question is, can Grid be used to achieve the 1440px size layout? If yes, how? If not, what other way is there? Thanks.
@AnisBacha
Posted
Great work figuring out a solution!
For the Grid Layout, you can achieve the desired outcome by setting up 3 columns and 2 rows. Make sure the first card extends to the first column and spans 2 rows, and center it vertically. Apply the same method for the last card, ensuring it aligns with the last column. As for the second column, simply adjust the cards to their intended positions.
Here's a rough representation of the code:
.main__cards{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 1fr 1fr;
align-items: center; /* this will center the supervisor and the calculator cards */
}
.main__supervisor{
grid-column: 1/2;
grid-row: 1/3;
}
.main__calculator{
grid-column:3/4 ;
grid-row: 1/3;
}
.main__team-builder{
grid-column: 2/3;
grid-row: 1/2;
}
.main__karma{
grid-column: 2/3;
grid-row: 2/3;
}
Remember to adjust the class names to match your specific implementation. Let me know if you need further assistance with this.
Marked as helpful
@sumaira10041
Submitted
Can anyone plzz tell me how to make it responsive .....i give two days to this page but still cant make it responsive...can someone tell me where i did mistake
@AnisBacha
Posted
Hey, Good job for getting the desktop design done ! I noticed in the 'style.css' file that you started with the desktop design and then used media queries to adjust it for mobile, but it is recommended to first start your work with the mobile design and then try to adjust it to be a desktop design. This will save a lot of time in projects like this. You can look up 'mobile first design' for more information.
Also, like Johan mentioned, you'll need two separate navbars – one for the desktop view and one for the mobile view. To get it right, you might want to use some JavaScript to detect the window width and switch between the mobile and desktop navbars accordingly. Keep up the good work!
Marked as helpful
@luizotvio
Submitted
The difficulties I had in this project were related to margins and padding, and also to align the section to the center of the main.
always tried to use the main and section tags for projects, I believe this is good practice
If anyone sees any errors or possible improvements in my code, I'm open to discussion
@AnisBacha
Posted
I see only good work here, good job! I noticed from the responsive.css file that you have worked first for the desktop design and then you tried to adjust through the media queries to be a mobile design, but it is recommended to first start your work with the mobile design and then try to adjust it to be a desktop design. This will save a lot of time in larger projects (you can search 'mobile first design' for more information).
Another thing is you can make the body element a flexbox and add the 'justify-content' and 'align-items' properties and make 'center' to be its value to ensure that the cards are in the middle of the page.
Marked as helpful
@RahulShesh
Submitted
it is simple for me but I find trouble when including the font family. I was unable to use red hot display font family for some reasons so I used arial It looks same so there is no problem it doing that.
@AnisBacha
Posted
Great job on your work! In order to use the Red Hat Display font family, consider implementing the following suggestions in your CSS file:
At the top of your CSS file, include the following import statement:
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
Then, incorporate the following rule within your CSS to utilize the Red Hat Display font family:
font-family: 'Red Hat Display', sans-serif;
Typically, you can locate the necessary information in the style-guide.md file. You'll find the link to the Google Fonts website there. Once you're on the Google Fonts site, select the desired style for the font. In the right tab, you'll notice the option 'use in Web'; make sure to click on the import checkbox. Finally, you can copy the import statement and the CSS rule for the Red Hat Display font family.
@Shrejal123
Submitted
Which areas of your code are you unsure of? I am unsure about responsiveness of my project. Please help me.
@AnisBacha
Posted
If you want to check the responsiveness of a web page, you can use the devtools in the Chrome browser. Simply right-click the page and select "inspect". Then, in the top left corner of the dev tools, look for the laptop/mobile icon and click on it. A slider will appear that allows you to adjust the width of the page, so you can identify any issues. To learn more about best practices for making pages responsive, I recommend taking this course: https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts.
@BesneiDavid
Submitted
I still find myself struggling to grasp the concepts of Flexbox and Grid, should you have any resources that helped you better understand this concepts I would ask you to share them with me. Thank you.
@AnisBacha
Posted
Adding to the resources mentioned above, here's an excellent youtube tutorial explaining this concept. It goes by the title : CSS Flexbox Intro | Flex CSS Tutorial for Beginners by Dave Gray, here's a link: https://youtu.be/B8BFVzbKmPI
Hello everyone!
So, I've completed around a dozen challenges so far and some still puzzles me a bit.
When I download the starter files, in the style.md there is a section where the dimensions for the design are written out, e.g. desktop 1440px. What is a more correct approach, to make the design exactly as it is on 1440px or making it exactly as it is but on my viewport size (e.g. 1704px).
I'm asking because sometimes a design that is okay on 1440px can seem so "off" on my actual viewport size, and vise versa of course. If I do it according my viewport size, then the screenshot generated when I submit the solution is completely off and I cannot really compare the results (I have redone a couple).
Really interesting to hear someone else opinion on this, any feedback would be very much appreciated. Thank you!
@AnisBacha
Posted
My recommendation is to utilize the breakpoints available in Chrome's devtools (inspect). By adjusting the page width to 1440px in the Chrome browser using devtools (inspect), you can work to replicate the same desktop design accurately, and then you can focus on making the page more adaptable for different desktop sizes.
Marked as helpful
@Jatinkapoor147
Submitted
It was a lot of fun making it, and my technique for using media queries is finally coming together, though I'm not entirely satisfied with the outcome, so just keep working on it. Please send me any suggestions; I will be grateful.
@AnisBacha
Posted
It is recommended to start with mobile design when creating a website and then use media queries to add the desktop view, this will help you a lot while adjusting your property values.
Marked as helpful
