Article Preview - Flexbox / SCSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Pon, yes, what I see on my browser (I'm using Firefox) is what you see in the screenshot generated. What are you using? There are some differences between browsers, such as how they each have their own default styles already (hence the need for a CSS reset in our code), but generally it's usually with older browser versions where there may be issues still. Nowadays you don't see that much of a difference on commonly used browsers if the stylings are written up well.

  About using a <div> tag for image versus using an <img> tag: It's generally easier to use a <div> with background image when you need to change the image for responsiveness (which you can do using media queries), but for images that relate to the content of the site, like a logo or a product image, it's preferred to use a <img> tag with the <picture> element. I used <div> only because it was easier for responsiveness/resizing and positioning; I can just use properties such as background-size and background-position. For <img>, I'd have to use object-fit, which at times isn't as easy to work with (at least for me), but if I were to work on this challenge again, I'd most likely use an <img> tag.

  If you're using VS Code, you should be able to get the path for <svg> when you click on the file in the VS Code file browser.

  Hope this helps you out, feel free to keep asking questions!

  Marked as helpful

  3

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @elaineleung

  Thank you Elaine ☺️

  I used google chrome, and true, if I use firefox then it shows this width problem.

  Today I tried to find the issue, and seems it is the width of the card and card-img size. Therefore, I change the max-width to specific number. Now the problem switch to the share-container cannot align center to the shar icon. lol

  I need to take a good look how you write the HTML and make it align center.

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @ponhuang I just tried this in the inspector and managed to make the card-img size more normal, so try this:

  For your desktop view, write this into your .card-img:

  .card-img {
     width: 285px;
     img {
       height: 100%;
       width: 100%;
       object-fit: cover;
       object-position: left;
    }
  }
  

  I think that as long as your img is always at 100% for height and width with object-fit: cover added, you can easily manipulate the image parent's widths and not need to to worry about the image. The image parent is like a photo frame, so instead of changing the size of the image, just change the frame.

  For your share icon in the mobile view, since your share container has a position: absolute, the two can't be positioned in relation to one another as they also don't share the same parent. You'd only be able to center them if they are within the same parent container and are not in position: absolute. What I'd do is, I'd make the share icon position: absolute also, like this:

  .share-icon-box {
    position: absolute;
    right: 0;
    top: 1rem;
  
  // share-icon-box's parent needs position: relative
  
  .author container {
    position: relative;
  }
  

  Hope this help!

  Marked as helpful

  1
• 

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  Hi Pon,

  How are you? Hope you are doing well 😃

  The reason that using align-items doesn't center the "share-icon-box" div, is because the "share-icon-box" div (which contain the arrow image) isn't actually contained within the "share-container" div. So, using the align-items property won't have any effect on an element that doesn't existing inside of the "share-container" div.

  So, you can solve this problem manually by increasing the margin-top property of "author-container" div to 4.5rem

  @media screen and (max-width: 62.5em)
  .author-container {
      margin-top: 4.5rem;
  }
  

  As for the coloring issue, the fill property won't work on the SVG because, the SVG is used within an img tag. So, you will have to use the filter property.

  Here is a tool on CodePen by Barrett Sonntag, through which you can set the color of any image using the filter property.

  All what you have to do, is to enter the hex value of the color you want (in the Target color input field) and click on "Compute Filters" button and it will generate a filter value for you with the color you want.

  Note: Barrett states that,

  " For this code to work well the starting color needs to be black. If your icon set isn't black you can prepend "brightness(0) saturate(100%)" to your filter property which will first turn the icon set to black. "

  Which means that if the SVG's initial color isn't set to black, you will have to add "brightness(0) saturate(100%)" at the start of the generated value for filter property.

  And by the way, don't forget to generate another screenshot of your updated solution.

  Hope this helps.

  Have a great day 😃

  Marked as helpful

  2

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @Ahmed96Mah Hi Ahmed,

  How are you?

  I'm fine. Lately, start doing junior level in Frontend Mentor, but seems my JavaScript level is still super low, cannot finish second one yet. Completely stuck hahaha 😅

  I didn't know about SVG can have its own element in HTML as you and Elaine were mention. Now I got the point. The tool from Barrett Sonntag is amazing, thanks for sharing and helping. I will use this first then study how to use SVG tag and property. :D

  BTW, I don't know why the screenshot is updated, however, it doesn't look exactly the same as what I saw on my screen. lol

  0

  

  Ahmed Mahmoud Abdalwahab•410

  @Ahmed96MahPosted over 2 years ago

  @ponhuang

  I am fine, thanks 😃

  Don't worry, your skills will become better as you continue with your projects. No one starts perfectly. And always remember that google is your best friend.

  And I am always happy to help you with anything you may find difficult. So, don't hesitate to ask 😃

  Have a great day :)

  1
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Pon, good job working on this :) The mobile view looks great, and I think for the desktop view, there are a few things you can fix as right now things a looking quite odd on my screen, and I think it could be the properties and sizes you're using. I'm looking at this in the inspector, and I can see that you've got an overflow:hidden on one of your components, which I suggest removing for now. If you added that for hiding the image overflowing, then you should actually use object-fit instead. Here's a video by Kevin Powell on how to size images within a container that I think can help you in this challenge: https://youtu.be/6yAAV-uP0po.

  Basically, for the image container and the image, you'd want the mobile view to look something like this:

  // at mobile view
  
  .card {
    height: 15rem; // just an example value
    width: 100%; // 
  }
  
  .card img {
    width: 100%; // this means the image would fill up the container
    object-fit: cover;
  }
  

  And then in the desktop view, you want to make sure the height gets the 100% instead, and then fix the width to whatever the design's desktop view image width is:

  .card {
    height: 100% // the height will be the size of the div container
    width: 20rem 
  }
  

  I think there's also a bunch of other sizes you can change or remove. You can have a look at my solution here to compare (the challenge was done a while back and so there are definitely things I'd want to go back and change but anyway it works for now): https://www.frontendmentor.io/solutions/responsive-article-preview-component-hb8e6pLuv

  Lastly, for changing the color on the <svg>, try copying the entire <svg> code from the file and then pasting it directly into your code so that you're not importing it from an image tag with <img src="">. Once the <svg> is in the HTML, you can add a class to it and then use that class in your JS to change the fill color in the svg path, like this:

  // I use .toggle as an example class here
  svg.toggle path {
    fill: blue;
  }
  

  Good luck, as this isn't an easy challenge if you're starting out, but keep at it!

  Marked as helpful

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @elaineleung

  Hi Elaine,

  How are you?

  Did you see the same outcome as my solution screenshot? Cause I found it weird, the screenshot on Frontend Mentor isn't exactly the same as what I saw on my screen. Not sure what makes this happened. 😂

  The overflow:hidden is hiding the image for border-radius. I saw you used background-image in CSS not added the image in HTML directly. Is there any difference between those methods?

  For the SVG element, mainly we have to set the height and width in HTML ? Not quite familiar with this tag yet. And where can we get the path from? If next time there is another SVG element in the next challenge, how can I get the path?

  Thank you so much for helping :)

  0