Still working on media queries, please can some let me know if I'm setting up my code right for media queries or in general when doing projects like these, I want to get everything right to make doing mobile and desktop right as soon as possible.
Any other tips and comment help.
Hey @Lozzek, your challenge looks nice on the desktop. However, there's still work to do. Keep in mind I'm still learning myself, so take the following with a grain of salt. Feel free to explore my profile for my solution though. That said:
Your HTML
I find that semantic HTML elements such as <main> & <h1> don't require classes. In your CSS, you can call main {} and h1 {} and simply give it the style you want. Its class is simply redundant unless you plan to call it multiple times (which you shouldn't do w/ main). Similarly, wrapping these elements around a <div> is redundant, unless you're boxing multiple elements inside.
You should use semantic HTML for the verified buyer testimonials. To do so, you'll want to use <figure>, <figcaption> & <blockquote>. For example:
<figure>
<figcaption>
<img
src="./images/image-colton.jpg"
alt="Headshot of Colton Smith"
/>
<div>
<h2>Colton Smith</h2>
<span>Verified Buyer</span>
</div>
</figcaption>
<blockquote>
<q> We needed the same printed design as the one we had ordered a week
prior. Not only did they find the original order, but we also
received it in time. Excellent! </q>
</blockquote>
</figure>
This will allow screen-readers to better access your content.
Your CSS
.content has a min-height: 100%. Why not move this to your CSS reset, and replace the % with vh?background should contain the position of your images: top left & bottom right to be precise.text-align multiple times. Consider placing it in your body {} or main {}, and changing the exceptions when needed.@media {min-width: 50em} once. Everything else can be placed inside. If you plan to play with multiple screen sizes, however, you need to call another @media {min-width: XXem} and adjust appropriately..box class uses display: flex;, you should take advantage of this to position your box1, box2, and box3. Remove position: relative and use align-self instead. Check A complete guide to flexbox for some additional information. The same can be done with your testimonial boxes..box class (for your reviews) are HUGE! They cause your screen to scroll left & right. Consider adding a max-width of about 26.6rem to it. In turn, this causes your mobile website to also scroll left & right and not be very accessible or usable.Let me know if you have any questions or need additional help!
Hello there! Is there an efficient way I could've approached this challenge? Particularly on placing the view icon in the center of the image.
Hey Pewpewhamster! Nice design!
Few observations from your code. Take this as you please as I've only tackled this challenge a few days ago myself.
You don't need an alt text for the icon-view.svg. Seems redundant to describe it and screen readers would detect it...
Your approach to creating the overlay is more traditional. I suspect it would work better on older browsers, but is occasionally hard to follow as you're referencing four classes (image, hero-image, overlay & icon-view) MULTIPLE times in your CSS. Here's what I did differently (I will use your CSS class names as reference) Notice how it only uses two classes instead:
.image {
position: relative;
margin: 1.6rem;
border-radius: .5rem;
overflow: hidden;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
object-fit: none;
width: 100%;
height: 100%;
background-color: hsla(178, 100%, 50%, 0.5);
opacity: 0;
}
.overlay:hover {
cursor: pointer;
opacity: 1;
transition: opacity 0.25s ease;
}
And the HTML:
<div class="image">
<img class="overlay" src="./images/icon-view.svg" alt="" />
<img
src="./images/image-equilibrium.jpg"
alt="Picture of Equilibrium NFT"
/>
</div>
I used flexbox to move the icon to the middle of the image where I wanted, expanded it to width:100%; height:100%; to span the whole image container, gave it the background color. The object-fit:none makes the icon retain it's initial dimensions instead of scaling up because of the width/height I provided.
I am a couple of months into HTML/CSS, I would appreciate any tips/help/advice I can get on how to improve on these skills. Thanks
Hey Ruffwise!
Nice code to a challenge I attempted myself just a few days ago. I like your solution for the margin a little better than mine, and may even "steal" some of your ideas for mine!
I noticed some stylistic differences between your product and the design, and thought I may share some ideas. Take them as you please, as I'm learning as well:
You didn't use the desktop version of the picture at all. Typically, this is preferable due to resolution reasons. The more you scale a small picture, the more distorted it becomes. You can achieve this by replacing your <div class="image-container"> w/ <picture media="(min-width: 900px)" srcset="/path/to/image-header-desktop.jpg" />. You can then replace your CSS appropriately from .image-container to picture. Your alt text also needs to be more descriptive to accurately reflect what the image displays.
The font-weight for .stats should be the same as your h1. So font-weight: 700.
I noticed you repeat yourself a lot between your two different media queries (for example for your .picture, .container, etc.). You only need to mention the changes once, as the values from the second media query will inherit the values of the former. Since you're working from smaller screens to larger ones (using min-width), that means you ONLY need to mention .picture, .container, etc. in the min-width:900px media query UNLESS you're changing the value again when it's min-width:1000px.
Hope this helps a little! Good luck!
