Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved
    1. Home
    2. Categories
    3. Coding Question & Answers
    4. HTML CSS
    Log in to post
    • Newest to Oldest
    • Oldest to Newest
    • Most Posts
    • Most Votes

    HTML CSS

    • Michael Constantine

      SOLVED how to set another <td> bg color on click
      background border css html table • • Michael Constantine  

      6
      6
      Posts
      40
      Views

      avan

      @Michael-Constantine You are good. I took care of it.

    • C

      SOLVED Have menu filling up next column, as menu expands
      • cthornval  

      6
      6
      Posts
      45
      Views

      avan

      @cthornval

      Awesome! Glad to hear. Do you mind selecting one of my responses as the correct answer? Thanks.

    • J

      This topic is deleted!
      • jksh4  

      1
      1
      Posts
      3
      Views

      No one has replied

    • C

      UNSOLVED How to make a clean responsive grid of rectangle shapes
      • Cairoshock  

      2
      2
      Posts
      50
      Views

      avan

      You can try the following:

      On the parent container ".container" apply the following styles: display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); grid-gap: 20px; align-items: stretch; Remove all children div's and just have img elements without being wrapped around any other element.
      So something like this: <main class="container"> <img src="/pix/samples/23m.jpg" alt="Sample photo"> <img src="/pix/samples/24m.jpg" alt="Sample photo"> <img src="/pix/samples/22l.jpg" alt="Sample photo"> <img src="/pix/samples/15l.jpg" alt="Sample photo"> <img src="/pix/samples/25m.jpg" alt="Sample photo"> <img src="/pix/samples/16l.jpg" alt="Sample photo"> </main> Apply the following styles to the the img's (You can add a shared class name to all img elements) border: 1px solid #ccc; box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3); max-width: 100%;

      It adjusts quiet nicely when you shrink the screen.

      Here is where I got the info from: https://www.quackit.com/css/grid/examples/css_grid_photo_gallery_examples.cfm

    • C

      SOLVED How to get a custom font to work in CSS
      • Cairoshock  

      4
      4
      Posts
      107
      Views

      avan

      Glad it worked.