Proud that i was able to decipher this in way less time than i thought!
What challenges did you encounter, and how did you overcome them?my grid sizing
What specific areas of your project would you like help with?nothing
Greetings! Great job!
I have one small additional suggestion. In addition to setting the container wrapper and width value, it's also best to set a defined height value.
check this example:
body { <div class="wrapper"> <main></main> <footer></footer> </div> } .wrapper { display: flex; justify-content: center; align-items: center; max-width: 1400px; flex-direction: column; margin: auto; height: 100vh; height: 100dvh; }
You can use the dvh unit (it will resolve some issues with mobile devices), but it's not currently supported by all browsers. If a browser doesn't support 100dvh, it will fallback to using 100vh instead.
The dvh unit seems to be the best choice. We are sure that:
You might be wondering now: why use lvh and svh when dvh combines the best features of both?
Using dvh will change the height of elements during scrolling - when we display the page and the browser interface elements are visible, the container height will be smaller. When we start scrolling and the interface elements hide, the container height will be larger.
There are many resources about height and optimal solutions, such as this video: link: https://www.youtube.com/watch?v=veEqYQlfNx8.
I hope you find this helpful. Keep coding (and happy coding too!)
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Greetings, You did great job! I'd like to suggest one small improvement.
If you want the text "Our Artificial Intelligence..." to be wrapped under the heading and displayed on two rows instead of one, you can use max-width.
@media (min-width: 576px) { .content-info { max-width: 50%; } }
I hope you find this helpful. Keep coding (and happy coding too!)
Use can change bg image with each other sreem: 375 and more https://www.w3schools.com/cssref/pr_background-image.php
What challenges did you encounter, and how did you overcome them?no encounter
What specific areas of your project would you like help with?I understand how to use text-decoration https://www.w3schools.com/cssref/pr_text_text-decoration.php
Greetings, Good afford on this challenge! 👍
I'd like to suggest changing your solution url of yours live site. I can get your solution code but don't get your solution url in the live website.
for example the link should look something like this :
https://hogibpro98.github.io/frontend-mentor-product-preview-card-component
You can use Netlify or GitHub pages to do that. If you'd like to learn more about this check this resources: guide netlify or you can use GitHub pages guide GitHub pages
hope find it helpful. keep coding (and happy coding too!)
I'm not sure I'm proud of anything in this project. I struggled a lot and I couldn't even get it right. I mean it looks fine I think, but it doesn't look 100% the way it's suppose to in mobile view (the image isn't right) and the table isn't completely right either. But this was my first time working with tables and like I'm guessing that's what it was suppose to be because it says "The table below shows [...]", but I couldn't get it to look just right.
I hadto redo the challenge because the first time I created it desktop-first but that did not pan out so I guess if I was to redo it I would have followed my gut and used a mobile-first workflow to begin with.
What challenges did you encounter, and how did you overcome them?I encountered a lot and it really made me feel like I'm not good enough and that maybe I should do something else with my time. Sometimes I'm kind of hard on myself and I mean I haven't even been coding for more than 9 months. But the first challenge I encountered was making the site responsive when going from desktop-first so I just commented out all my CSS and did it mobile-first and then reusing the code that still worked.
The second issue was the image in mobile view. No matter what I did I couldn't get it right. I didn't really overcome it. I just decided that I needed to move on. Looking back at it I'm realizing that I could have posted a question on Discord so I think that's what I'll do next time.
The third challenge was the table. And I didn't overcome that either. I mean I think made it look alright but it's not 100% accurate. So same thing here, next time I'll post and ask about it on Discord.
What specific areas of your project would you like help with?The image: What was the HTML and CSS suppose to look like? How could I have made it look the way it does in the design?
The table at the bottom of the page: Was it suppose to be a table? I'm thinking yes because of the use of semantic HTML, but is that correct? Could I have styled it differently? Where did I go wrong?
I think you did great job! Sometimes, the solution isn't straightforward. Think of it as a journey - there's always something to learn. I've struggled with similar issues myself.
Don't get discouraged! Solving problems can be complex. If you want improve styling tables, check out this link for ideas on handling tables with borders: table-with-borders-only-on-the-inside
I played with your css solution in the firefox browser using style editor.
With this image just comment margin and padding on your wrapper .card (this is container for all elements, you have different padding's on the child element so you have to solve this).
.card {
/*! margin: 0 auto; */
background-color: var(--white);
/*padding: 0 1.875rem; */
}
Then you see that the image behave similar to the design on mobile devices.
Moreover since all your content (without image) are in section elements ( or main tag element) you can simply add padding to this element. You can remove this padding in media query to disable padding on larger and desktop devices.
section { padding-inline: 2rem; /* Default padding for all screens */ } @media (min-width: 530px) { section { padding-inline: 0; /* Remove default padding on larger screens */ } }
This is just an example you can use you main element instead of section. You can try it by yourself and play more with this solution.
I hope you find this helpful.