@Code-of-Asura-KingSubmitted 8 months ago
What specific areas of your project would you like help with?
my problem is with the sizing of page. Please help me to overcome this.
Abielevan
@abielevanAll comments
- @abielevanPosted 8 months ago
you can use min-height or min-width on css. This will provide a minimum size. if the parent size lower than child element,then the parents element size will follow the childs element
0 - @MikeCook9994Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Outside of the drop shadow, there wasn't anything I wasn't remotely sure how to do. I was more focused on intelligent ways to approach the layout problems.
What challenges did you encounter, and how did you overcome them?I'm not sure how to achieve a responsive design on this without media queries. The card's width is set to 'min-content' so it is bound to the size of the image; however, I'm not sure how to build things so that the image will resize at a certain point (and thus allow the card to shrink with it).
What specific areas of your project would you like help with?Feedback on two points: First, is using flexbox/grid to layout the content within the card overkill? It's incredibly easy to do, but it could definitely be achieved without it. Is it unnecessary to use these layout algorithms when the content's layout is static?
Second, how would I make this layout responsive on small screens ( < 475 pixels)? Is it possible to achieve this without media queries?
- @lij110397Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
The process of turning figma design into html and CSS files
- plan through the project
- complete basic html files - include all elements related to content
- complete general style - include color and typography
- complete layout setting - include the size and layout
- test and make the design responsive - Inspect in the browser to check from min-size to check if it is responsive; fix the code
- check if it meets WCAG requirements and fix the code
- complete README.md
how to use val to define global color
:root { --color-primary: #2c7dfa; --color-primary-shade: #3685ff; --color-dark-navy: #1f314f; --color-grey: #7d889e; --color-light-grey: #d5e1ef; }how to use github pages
Check online and follow the guide.
practice how to add online font into the page
Check Resource 1 - This helped me for adding online google font into my files.
What specific areas of your project would you like help with?How to manage layout in a more effective way?
I was struggling to choose between flexbox and grid systems. Sometimes, I thought it was ok to use both but it was not. It is still confusing to me.
How to manage margin and fix margin collapse?
I thought margin collapse would happen naturally, but in this case margin between elements are not doing margin collapse. Instead, the margin between the elements are added together. I am still confusing how to manage the margin to make it neat.
