Skip to content
OverviewSolutions
14
Comments
5
Don
@coffeeslammer

All comments

  • Don•220
    @coffeeslammerPosted over 1 year ago

    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

    0
  • Kevin H.•150
    @kevinx9000Submitted over 1 year ago

    I started with desktop design first and then adjusted by using @media to create the mobile layout. That was probably the biggest challenge is fixing the layout for the breakpoint. Since separate images were provided for the desktop and mobile view (as opposed to using the same image and making that element responsive), I had to play with adding both images to the HTML document and then using display in CSS to switch them on or off for the responsive views.

    Responsive product preview card component using Flexbox

    2
    Don•220
    @coffeeslammerPosted over 1 year ago

    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
    0
  • Don•220
    @coffeeslammerPosted over 1 year ago

    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
    0
  • Don•220
    @coffeeslammerPosted over 1 year ago

    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
    1
  • Don•220
    @coffeeslammerPosted over 1 year ago

    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
    0