Vladislav Zenin• 100
@vladzen13
Posted
nice work on desktop viewports!
font-face and vars - cool!
for mobile viewports:
- start with mobile first
- do not put img in the same wrapper as rest content - in mobile design you can see that clearly. Set padding: 0 + width:100% for img and non zero padding for rest content.
- you have to setup media query to switch between card like view and img with width: 100% of body;
- I think breakpoint from desktop to mobile should be on point when h1 is about to wrap on the second line.
Speaking of divs - i have simplest html possible, you can explore my most recent solution. Looks like this:
<body> <main> <img> <div class="content">.....</div> </main> </body>You can make nutrition section with css grid or flexbox, but table seems right for me. It is semantically a real table.
0
