you have given your li {text-indent:20px;} and this line is causing problem throughout the page. Replace that line with li {padding-left:1.2rem;} and it should solve your problem. Since in CSS properties that we define later takes the precedence, so in case if this doesn't work, just define li at last or use a class name instead of element.
Hi @Shreyas235, I think you can use <article> tag inside your container section instead of using simple divs. Article tag is use for independent unit of content and since each card is its own independent unit of content you can use article for each one of them as it will be more semantically accurate.
What are you most proud of, and what would you do differently next time?
I'm happy because this was the first project where I didn't have issues with github.
Next time I'd try to be more organized and have a clearer idea of what I have to do before just diving into it because I kept going back to the design image every three seconds and I feel like I wasted so much time
What challenges did you encounter, and how did you overcome them?
I had a few problems with the styling, but I solved them playing around with the properties a bit (sheer luck)
What specific areas of your project would you like help with?
how do I determine the break point for the mobile version? I just used 500px because it's where the design started looking a bit ugly...
The answer is in your question itself, just use media query where your design starts looking ugly. Every website is different, we can't use to same break points in every website so just use them where your layout starts breaking :)
What are you most proud of, and what would you do differently next time?
That I was able to complete this on my own. One thing I would do differently next time is leaving comments in my code to know what does what so i don't forget or I can use it again in the futrue.
What challenges did you encounter, and how did you overcome them?
I had a hard time centering my main container in the middle. i was able to find online resources to help me out.
What specific areas of your project would you like help with?
I do not know how media queries work so i was unable to complete the task for the mobile. I needed help spacing my "th" and "td" in my table to create more space between them, i tried many things but and searched online but I couldn't find anything that helped me. I would also like to learn more on how to center better your content.
There is no need for media queries in this particular project. HTML elements are mostly responsive by default except images. Images are inline that's why they don't shrink and because of this our whole content don't shrink. To fix that first of all remove height: 200px; and width:450px; from your image tag and give your image tag width:100%; . Once you'll do that your content will start shrinking with the screen as it should be.
Now, coming to the second part your question about tables. Just like images tables too are inline elements that means we have to give our table width:100%;. Once you'll do that, you can removedisplay:flex; from your container as it is completely unnecessary.
And the last part of your question about centering content, well there are many ways to center something. You have used flex on your body tag but it's not necessary, instead use margin-inline: auto; it will center the div horizontally and finally margin-block: 4rem; to give some space on top and bottom.
You can see my project for comparison, hope it helps :)
Hi @Marcius55, just a small advice, you should never use % to give width to your main content cause as we shrink the screen, the content shrinks too and it starts shrinking way before screen touches it. Giving percentage is only good for margins & padding but for width stick to pixels and rems only.
And if you want your pixel width to shrink or become responsive, use max-width instead of width.
There are two ways to achieve that filter effect to my knowledge, you can either use ::before/::after pseudo element but that would be a lot of code to write, or the better way would be to give your .image class a background of purple and then use mix-blend-mode: multiply; on your img tag.
Hello @florinbejgu, If you want your fonts to be loaded faster the best thing you can do is to convert your .ttf fonts to .woff/.woff2 which are light-weight in comparison and therefor loads faster. There are many websites for this and you can search more about ttf to woff format on youtube.
Hello there, the card is good but I'm seeing two problems in the layout. The background shadow only appears when we hover over it even though it was part of the card so it was suppose to stay there without hover.
Another thing that I noticed is that there is horizontal and vertical scrolling this is because the content is overflowing because you have given your main tag width: 1440px; and height: 960px; to fix this issue remove both width and height from the main tag.
To fill the white space from underneath give your body minimum height of 100vh
What specific areas of your project would you like help with?
I believe this code is very bad, I didn't know how to do the separation in CSS very well. Maybe a flexbox would be ideal.
I still lack knowledge.
I accept study tips and related things.
Thank you for your help!!!!
That float:right; is the culprit, remove that and that width:360px too! They're messing up the layout. If you want to divide the section between the articles equally the just use grid, like this:
What are you most proud of, and what would you do differently next time?
if u cant open the site u see dangerous site i Dont know why it is coming anyway click live preview and the detail button and after that on the bottom see unsafe site click on that then u will see that thank you.
