Flexbox used for responsive page solution.

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello Zaclobsterboy ,

  I have some suggestions :

  • Use an unordered list with 3 items for the stats <div class="stats_wrapper">. The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. They should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • border-radiusandoverflow hiddento the main container so you don't have to set it to individual corners.

  • To fix the image part:

  @media screen and (max-width: 56em)
  .column2 {
      max-width: 100%;
      height: 350px;
      /* background-image: url(../images/image-header-mobile.jpg); */
      background-size: cover; 
       background-repeat: no-repeat; 
      background-blend-mode: multiply;
      border-radius: 8px 8px 0 0;
      background-color: var(--Soft_violet);
  }
  

  Hopefully this feeedback helps.

  Marked as helpful

  0
• 

  Arun Kumar Singh•260

  @arunsingh009Posted almost 3 years ago

  hey @Zaclobsterboy, nice attempt. try this, uncomment the HTML part for the image and try this in your CSS, I hope this will surely work in your case.

  .column2{ background-color: purple; /*for eg */ }

     ` .column2 img{
          mix-blend-mode: multiply;
      }`
  

  Marked as helpful

  0
• 

  Zaclobsterboy•40

  @ZaclobsterboyPosted almost 3 years ago

  Hey thanks @arunsingh009...I'll try it.

  1

  ---

  

  Arun Kumar Singh•260

  @arunsingh009Posted almost 3 years ago

  @Zaclobsterboy welcome buddy

  Marked as helpful

  0
• 

  Zaclobsterboy•40

  @ZaclobsterboyPosted almost 3 years ago

  Many thanks @PhoenixDev22 for these suggestions, much appreciated...

  0
• 

  Zaclobsterboy•40

  @ZaclobsterboyPosted almost 3 years ago

  Again the image hasn't displayed, it's showing locally but not displaying remotely? The path is "../images/image-header-desktop.jpg")...what's happening? :(

  0

  ---

  

  Arun Kumar Singh•260

  @arunsingh009Posted almost 3 years ago

  @Zaclobsterboy use single dot instead of double dot

  Marked as helpful

  0

  

  Zaclobsterboy•40

  @ZaclobsterboyPosted almost 3 years ago

  @arunsingh009 Hah, Arun old friend...it was the single dot that worked! As a way of a test, I left the double dot in the jpeg for the mobile solution, updated the code and voila, image displays on the desktop size but still missing on the mobile with the "../images/image-header-desktop.jpg"... Amazing.

  1