I just finished my product landing page on the most random thing (steaks), and i would appreciate any feedback or advice please! Thank you!
page is not responsive on mobile screens.apply some media queries.
Your page passes all the tests and for that 
I also like the color pallete and the img icons you have used are nice. Think you need to concentrate on the page responsiveness. At the moment your page does not look great on mobile.
In my opinion there are also some mistakes made when structuring your html like:
your sections #company, #receipe, #pricing, #contact are under the form but has nothing to do with the form.
Nice, add some media queries and I am suggesting SASS over CSS and Pug over Html. Makes your life easy.
Thank you! I will look into your links and try to learn more about SASS and Pug.
Thank you. I’m still having a hard time understanding what a media query is exactly but I am watching some YouTube videos about it now. Hopefully that will help. I will make the changes asap.
Thank you for your feedback! I have to change those ids around. I was trying to have the navigation bar links jump to a section on the page but I kept changing the name of the links. Thank you for catching that! I’m going to work on the media queries as well!
First off I just want to say i like the look, not bad.
About making the page more responsive:
My first suggestion is try to make elements work for you, not against. If you are too rigid when defining dimensions, everything just gets stuck in one place. As an example your .second-container, i would make the grid more fluid and if you want to set a width use max-width instead, that way the text can still wrap. You can also use wrapper classes to contain content and give them the padding and margin you want.
It is hard to really explain without code examples but i also don’t want to rob you of the experience and just post some “solution”. Anyway here is a version of the .second-container grid.
.second-container {
display: grid;
/* Auto for the icon and the rest for the text */
grid-template-columns: auto 1fr;
/* Just to show you don't really need the rows, but it's not bad to be explicit */
/* Not sure about this */
justify-items: start;
/* Vertically centering */
align-items: center;
/* Give the grid items some space you can use grid-gap for both columns and rows or grid-column-gap and grid-row-gap */
grid-gap: 1rem;
grid-template-areas:
"icon1 desc1"
"icon2 desc2"
"icon3 desc3";
/* Make the text wrap-able */
max-width: 55em;
height: 31em;
margin: 0 auto;
/* Give the grid some padding on each side so it doesn't bump up against the edged on small screens */
padding: 0 4rem;
}
I know this wasn’t about media queries but it’s always good (IMO) to start by making things fluid, then find the break points where your design starts to break and change things as needed (e.g. going from row to column etc.).
Last quick point, i would prefer if the source order was as close to the layout as possible. I.e.
Source-order (HTML order):
icon - text
icon - text
icon - text
Wow! Thank you so much for the detailed reply! You really broke it down for me. I will go ahead and apply your suggested changes and for the next project i will try to make things more fluid and less rigid.
Ok, i put your code in the .second-container and everything worked out great, but when i tried to change the template to “icon text” without adding the icon1, icon2, etc, they all stacked on top of each other. I just changed the “desc1” to “text1”, do you think that looks ok or am i doing something wrong?
That’s my fault for not explaining it well.
I was not referring to the grid-template-areas, but the source order of the HTML elements (the icons and text). I suspect the reason why your HTML in the second-container div is ordered the way it is, might be because of Grid. One tends to (i did) over complicate things with Grid in the beginning.
Here is what i mean in code, grouping the icons with the associated text:
<div class="second-container">
<div id="d1">
<img src="https://png.icons8.com/dusk/80/000000/food-and-wine.png" alt="wine and cheese icon from icons8.com" />
</div>
<div id="d4">
<h3>Pairs Great with Wine & Cheese</h3>
<p>Duis non ex at dui congue malesuada vitae sit amet ligula. Fusce in augue a nulla iaculis aliquam ut ut dui. Suspendisse eleifend dolor urna, at pharetra arcu condimentum posuere.</p>
</div>
<div id="d2">
<img src="https://png.icons8.com/dusk/80/000000/natural-food.png" alt="icon from icons8.com" />
</div>
<div id="d5">
<h3>100% USDA Organic</h3>
<p>Proin pharetra ultricies tortor, ac dapibus nisi molestie ac. Nulla eget lorem tellus. Nulla ut mi ex. Morbi id tortor accumsan odio sagittis maximus et ut ipsum.</p>
</div>
<div id="d3">
<img src="https://png.icons8.com/office/80/000000/cow.png" alt="cow icon from icons8.com" />
</div>
<div id="d6">
<h3>Farm Raised Cows</h3>
<p>Nullam euismod ut diam in ullamcorper. In semper eros ac consectetur facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quam orci, gravida id dui vel, dapibus aliquam enim. Sed ut tempus nibh,
a porttitor tortor.</p>
</div>
</div>
Now you don’t even need grid-template-areas. And so, you can remove all the id attributes and selectors (#d1 to #d6) and the grid-area stuff for the icons and text (unless your plan is to move them manually around using grid-area placement).
.second-container {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-gap: 1rem;
max-width: 55em;
height: 31em;
margin: 0 auto;
padding: 0 4rem;
}
Quick note on your selectors. ID is a unique identifier, you are using the same id more then one time which is not allowed (id=“boxed”).