Skip to content
OverviewSolutions
14
Comments
5

Don

@coffeeslammer220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Don•220
    @coffeeslammer

    to mix the color to the image you use

    picture{
background-color: color of choice;
}
picture img{
mix-blend-mode: multiply
opacity: 0 - 1;
}

    and the background color to a wrapper like <picture> or <div> depending on situation

  • Don•220
    @coffeeslammer

    Here's a nice way of fixing that

    <picture class="perfume-images">
<source srcset="./images/image-product-desktop.jpg" media="(min-width: 39.75rem)">
<img src="./images/image-product-mobile.jpg" alt="perfume">
</picture>

    (use what ever class name you like) Once the image gets to the size its set to it will switch to in media (mine 39.75rem) the srcset replaces the image without any css code

    You should also always start mobile first. Makes it way easier

    Marked as helpful
  • Don•220
    @coffeeslammer

    Here is a couple things Look into <Picture> element and srcset. It will resize your picture for you without css.

    <picture class="perfume-images">
<source srcset="./images/image-product-desktop.jpg" media="(min-width: 39.75rem)">
<img src="./images/image-product-mobile.jpg" alt="perfume">
</picture>

    The Perfume should be your H1. Think of your H's as a file structure. If they were folders H1 is the root folder and all other H's are sub-folders. Perfume would be the main folder and brands would be stored in that folder (figuratively speaking). The brand here would be a <P>.

    Always use CSS to do uppercase. A screen reader may interpret uppercase in html text as being an acronym and may read it as letters rather than words. Use text-transform in CSS.

    The prices shouldn't be H's either.

    Hope this helps on your learning journey.

    Marked as helpful
  • Don•220
    @coffeeslammer

    I can give you a couple tips. look into <Picture> element. and srcset. It will resize your picture for you The Perfume should be your H1. Think of your H's as a file structure. If they were folders H1 is the root folder and all other H's are sub-folders. Perfume would be the main folder and brands would be stored in that folder (figuratively speaking). The brand here would be a <P>. Also its always recommended to use CSS to do uppercase. I'm still learning but I think the reason is some screenreaders will read each letter instead of the word. Use text-transform in CSS. Hope this helps on your learning journey.

    Marked as helpful
  • Don•220
    @coffeeslammer

    I'm still learning myself. I saw you are using the H1 more then once. You are only suppose to use it one time. Way I am understanding the H's is use one H1 once then the other use H2. Think of them as a folder structure in a way if you had a another h deeper under the h2 you would make it an h3 and so on. I picked that idea up from Keven Powell on you tube.

    Marked as helpful