Hey guys,
This was a tough one, for my coding level at the moment of course. I especially found it difficult making the layout responsive on mobile and I am somehow unsure of my media queries although the code works. Kindly advise on best practices.
This is my first challenge on Frontend Mentor. Please don't pass without leaving a feedback.
Thank you.
Hey there Onyinyechi 👋
Everything is looking promising so far and all things considered your mobile layout looks the part and functions perfectly fine. I will however point you toward some minor improvements as requested:
1). For your picture element you only need the one source element within your picture element because essentially you are creating a media query for one picture and if that media query returns false then it falls back to the picture within the img element. You could realistically remove the second source element and the picture element will still serve its purpose.
2). Get into the habit of either converting your fixed px values into em/rem/% units or using min/max-width/height for your container dimensions and spacings instead. This will inherently introduce responsiveness to your websites as containers will resize as appropriate to the user's viewport. If the use of a fixed value is important to the design spec then I like to utilise the calc() functionality to implement a fixed value but ensure there is still some responsiveness baked into the container. Speaking of which:
2a). 400px widths for your containers will introduce horizontal scrolling on a majority of phones that have an intrinsic width of 375px and generate a poor user experience. The design style guide that accompanies these projects states the mobile design is made with a width of 375px in mind; be sure to respect those parameters. I tend to set my mobile design container widths as { width: calc(375px - 2rem); } to automatically give my layouts 1rem of space either side of my containers (you can make this responsive by doing { min-width: calc(100% - 2rem); })
3). I don't recommend using pseudo elements in your css file to insert commonplace content into your html if you can avoid it. It works for this project but imagine you were asked to make three containers that all looked similar to this one but the content and imagery was different. Instead of letting the css automatically style the price written into your html; you would have to go into your html to assign every price a unique selector and then go into your css to copy and paste the same ::after selector on them. With that said, the use of the ::before selector on your button to insert the icon was a great usage of the pseudo-class, nicely done on that.
4). You can easily give your cards rounded corners by giving the main container a border-radius value and setting the overflow property to hidden. This will make element parts that spill over the boundary of your container invisible, including the rounded corners.
5). Have a look into semantic html elements and why there are important for website navigation as well as search engine optimisation. You typically want to avoid using divs nested in the body element, instead find an appropriate semantic html tag and nest divs in there, for example the div with the container class could instead be a main element for this website or if you had more products on display each of these could become a section element. Also with these earlier projects Frontend Mentor place their .attribution inside a div which will throw up an accessibility issue because it's a div inside the main body of your html instead of a semantic html landmark. In future challenges they change this into making them wrapped in a footer element but it's a good habit to be conscious of changing that now.
Hope all this helps, all the best going forward!
ISSUES WITH MY SOLUTION:
I tried to use relative units for most of the sizing. I don't know how to make the image properly scale depending on the size of the viewport while avoiding making multiple media queries. Any help or tips would be greatly appreciated.
Hey there hran
Your img element requires a sizes attribute to tell the browser which image to use depending on the media query you give it. In addition to that you are using the width units incorrectly in your srcset values; given the values you used I assume you have confused the w unit for the vw unit. That or you've taken the width of the design previews by mistake.
<img class="main-img"
src= "./images/image-product-mobile.jpg"
srcset= "./images/image-product-mobile.jpg 375w,
./images/image-product-desktop.jpg 1440w"
alt="perfume bottle" />
Becomes:
<img class="main-img"
src="images/image-product-mobile.jpg"
srcset="images/image-product-mobile.jpg 686w,
images/image-product-desktop.jpg 600w"
sizes="(max-width: 376px) 686px, 600px"
alt="perfume bottle" />
(You don't need to add ./ to the beginning of your image urls if the folder containing the assets and your .html file share the same directory)
You can read more about what the w unit does here but in short you need to tell the web browser what the width of the file is and that's established as a value in the srcset attribute. After that you define when to use the image by means of media queries and the widths you set in this attribute is the width of the image when the web browser renders it (goes without saying that this width isn't a permanently fixed value; you can manipulate it as you wish in css).
Minor thing regarding the media query in your css file before I go; be sure to specify the media type as screen followed by your media query to ensure you don't interfere with other media types i.e. speech and print.
Hope this helps.
I noticed that I lack the ability to scroll when viewing the page on my phone, even though it looks perfect in the mobile viewer in my browser. Could someone explain what I did that caused that, and/or how I can fix it?
Hey Pneumatick 👋
Which browser do you use for the mobile viewer because my current build of Firefox shows the same issues you are describing in its mobile viewer.
The issues you are running into stem from setting your body height with an unresponsive property and the usage of { position: absolute; } within it. In short your html document has a fixed height that is only catering to the elements positioned in the normal flow so any instance of viewing the page on a viewport that has dimensions smaller than the content of the html document is going to throw up some wacky behaviour because the entirely of your content is { position: absolute; }; centred by { justify-content: center; } and pushed up further by the { bottom: 72px; }.
So working backwards from that: reverting the position of your main element from absolute to default (static) and removing the justify-content property from the body element will introduce the ability to scroll through your content as well as prevent it from overflowing above the beginning of the body where it is inaccessible to the user. You will also need to change the height property of your body to min-height so that the gradient doesn't just occupy 100% of the viewport height and instead 100% of the content inside your body.
Hope that helps; I know the solutions undermine a lot of the work gone into positioning elements on the page for your mobile layout but if anything I hope it brings to light the reasons why certain behaviours were happening and how to prevent them from happening in future projects you have.
Hi, my fourth project. I have a couple of questions. How do i do the stats? And how do i make background color to my image?
Hey Tomas 👋
Regarding the stats: this is a good use case for flexbox because we only want to control the alignment of the items on one axis (in simpler terms we only care about what the stats div is doing from left to right; if we were concerned about how the stats div was interacting with content above and/or below it we would prefer the additional control that grid offers).
Currently the content within the .stats div occupies the same inline environment because the content is only separated by whitespace:
<div class="stats">
10k+ companies
314 templates
12m+ queries
</div>
Flexbox isn't going to recognise this content as 3 separate entities; they need to be contained as block elements either semantically through HTML elements:
<div class="stats">
<p>10k+ companies</p>
<p>314 templates</p>
<p>12m+ queries</p>
</div>
Or declared as a block in CSS (although I wouldn't recommend this as a practice because it is not intuitive to whomever is reading your HTML code) :
<div class="stats">
<span>10k+ companies</span>
<span>314 templates</span>
<span>12m+ queries</span>
</div>
span {
display: block;
}
Next we need to introduce a line break for each of these stats so that the stat number is positioned above the stat heading:
<div class="stats">
<p>10k+<br>companies</p>
<p>314<br>templates</p>
<p>12m+<br>queries</p>
</div>
And finally give your .stats div the display of flex and fine-tune the typography and spacing as necessary. This code is a stable foundation for you to experiment on top of; how you configure the spacing of this .stats div can sometimes be dependent on elements around it so I'm not comfortable spelling out any particular workflow I think you should adhere to but this is the opportunity to mess around with parameters and see what affects what.
Hope that helps with the stats! I was similarly stuck with getting the colour on the image right so can't help you there I'm afraid 😅 best of luck going forward!
I have tried and tried and tried but the image background isn't working, any suggestions?
Hey David, I'm 90% confident I know why the image isn't loading; I think the relative path you have set for the image url in your css file is trying to find the svg file in the folder of the css file rather than the root folder. Try moving the svg file into the same folder as where the css file or altering the url path to go into the root directory by putting a forward slash in front of the url.
