How to center vertically the container of my whole design, so it looks good in all the displays.
..
What challenges did you encounter, and how did you overcome them?..
What specific areas of your project would you like help with?..
...
What challenges did you encounter, and how did you overcome them?...
What specific areas of your project would you like help with?Any comments to improve my work and skills are welcome. :)
Check the media at the values around 769px, for example, at 770px, The design is overflowing.
I would advice to experiment using max width and min-width values, Max-width sets the max-width of the container, this means that once it reaches this value, it won't stretch anymore, Min-width does the same but the container can't be smaller than that value. Use this to make the content stretch automatically, thus making it more responsive.
Hi folks, Thanks for reading this!
I managed to use the same element for the tooltip on mobile and desktop. I wasn't really sure at first that I could to that but it worked. Quitte happy with that :). It uses the same JavaScript and CSS code.
Next time, I want to be better with ARIA attributes. I know that my code is accessible but I want to do a better job with that.
What challenges did you encounter, and how did you overcome them?Not many challenges. The only one I have in mind is related to CSS readability. I wrote some nested CSS, which I do like, but some parts could have maybe been better. I am thinking about the tooltip element on desktop.
What specific areas of your project would you like help with?Mostly the HTML and CSS. I am okay with the JS part.
Have a nice day, Tom.
There are some improvments that you can do:
In your footer, I would recommend creating 2 divs, one div will contain the image of the author of the article, then you create another div that contains the author and the date of publish. In the second div, you would put the button of the article (you can create a button element, then you copy and paste the share svg that frontend mentor gives you and then you put some text in the button, then you style it to have 0 font-size so screen readers can undestand that the button is used to share content). Now, you style the div that contains the 2 divs, use display:flex, align-items:center and justify-content:space between. With this, your footer is perfectly aligned and your button is in the far left of the article.
When users display your article in an ipad, the layout goes far down, be careful with that. I would recommend you to investigate about how can you center content perfectly using grid or flexbox. In my body, I display:flex, justify-content:center (to put it in the center of the page in the X axis) and align-items:center(to align it to the center in the Y axis). This only works if you put a height of your body to 100vh and set a width to your wrapper.
*I would also sugest using max-width in order to avoid an excesive stretching of your article
I hope this comment helps you to make better and more responsive designs.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Nothing differently.
What challenges did you encounter, and how did you overcome them?No challenges.
What specific areas of your project would you like help with?Nothing atm.
To avoid that line warp in the colored lines of your cards, set a top border with the same border width as the border radius.
I'm getting the hang of Media queries...
What challenges did you encounter, and how did you overcome them?That image wasn't playing nicely with what was needed... I ended up spending hours on it because it went everywhere and was either really large or really small...
