Page Layout using Flexbox

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi Hasan,

  Using background-repeat: space; seems like a reasonable solution to avoid repetitive code. The drawback, though, is that you have no control over the spacing between the icons. A better solution would be to specify background-position for each icon.

  Here's an example:

  .star-icons {
    width: 105px;
    height: 20px;
    background:
      url("../images/icon-star.svg") left center,
      url("../images/icon-star.svg") 22px center,
      url("../images/icon-star.svg") 44px center,
      url("../images/icon-star.svg") 66px center,
      url("../images/icon-star.svg") 88px center;
    background-repeat: no-repeat;
  }
  

  The first value right after the URL defines the horizontal position. The icon has a width of 16px, so in this example 6px is added to the width for the second icon to add spacing (16px + 6px = 22px).

  You could also add the SVG code into the HTML document and set the spacing using the margin-left property. Both techniques seem to be alright. The main advantage of including SVG code into HTML, usually called "inline SVG", is that it reduces the number of network requests when loading the page, which is great to improve performance. But in this case it doesn't make a significant difference, as it is only a single icon. Using inline SVGs for a larger number of images, such as logos, social icons and others, makes more sense.

  It's up to you which technique you prefer.

  Keep going, and happy coding. :)

  Marked as helpful

  1

  ---

  

  Hasan Deeb•40

  @Sektories7Posted about 2 years ago

  @dusan-b thanks a lot, that's really helpful

  0