@brasspetals
Posted
Hi, RocTanweer! š
-
The layouts at specific media queries look great, and youāve clearly put in a lot of thought into them. Ideally, however, your solution would look good on all screen sizes, not just a handful of set widths. I would suggest in future projects to focus on responsive design. I see youāve used a bit of Flexbox, which is great! I encourage you to dig deeper into it, as itās great for responsiveness. Grid is also really good, but Iād learn one at a time as to not get yourself too confused in the process. Hereās a really nice resource for Flexbox that also has some great links at the bottom of it. For image responsiveness, Iāve found a width percentage combined with a max-width usually works pretty well. The
object-fit
property can also be really useful. Thereās alsopicture
andfigure
elements, although I still have a lot of learning to do about those myself. š -
Another great resource is this admittedly long article on semantic html. I refer back to often, and Iāve found it really helpful for my projects.
-
For the errors in your report, adding
title
tags inside the svg of your social icons should clear them up. Hereās an example:
<a href=ā#ā
<svgā¦
<title>instagram</title>
<path>ā¦
I realize this feedback isnāt picking out specific elements, but I hope itās still helpful! Happy coding!
@RocTanweer
Posted
@brasspetals I really appreciate your words.... It's really helpful š I will try learning as many resources you have given as possible! Happy coding
@RocTanweer
Posted
@brasspetals Would you please show code snippet here relating to image responsiveness please....I couldn't understand what you said up there š
@brasspetals
Posted
@RocTanweer Iāll see if I can explain the responsiveness a bit better or at least show some examples.
Letās look at the hero image on my Easybank solution . On the desktop version (800px and above) the .hero__img img
has a width: 119%
and a max-width: 767px
(thatās what the weird rem value works out to, and is the width of the image-mockups.png). This allows the width of the image to be responsive, but stops it from getting larger than 767px. Thatās what I meant by using a combination of width
with a percentage and a max-width
.
You could also take a look at the hero image of my Insure solution. For the mobile layout, I used the following code (I used the class āintroā instead of āheroā):
.intro__img img {
width: 100%;
max-height: 45.1rem;
object-fit: cover;
object-position: 50% 43%;
}
This was a rare instance when I wanted to limit the height of the image. Itās a good illustration of what object-fit: cover
can do. I suggest playing around with all the properties and values in the dev tools to see what each does.
On the desktop layout, the parent div (.intro__img) gets absolute positioned, and I used a width percentage (width: 40% and then width: 48.75% in a later media query) to allow the image to respond with the page.
I know this probably wasnāt a good explanation, but hopefully playing around with the code in these examples will help a little.