CODEWITHSUNDEEP
htmlcss
user10980219
user10980219

Reputation:

Making 2 lists Side-by-Side

So I'm having trouble aligning two lists side by side next to each other. I have created the mobile first design and made it how I would like it to look. I am now at the point of using media queries in CSS to alter the site for desktop but cannot get it to work.

This is what the container currently looks like in the mobile version:

https://i.sstatic.net/ynQOA.jpg

I am trying to achieve the following after the resolution is bigger than 450px:

https://i.sstatic.net/ysi3d.jpg

.firstthree {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em;
}

.secondthree {
    display: flex;
    justify-content: space-between;
    position: relative;
    bottom: -25px;
    padding: 0 0.5;
}
<div class="white-container">
    <div class="container">
        <div>
            <ul class="firstthree">
                <li>
                    <img src="images/brush.svg" class="brush" alt="brush">
                    <p class="brush">Graphic Design</p>
                </li>
                <li>
                    <img src="images/wand.svg" class="wand" alt="wand">
                    <p class="wand">UI Design</p>
                </li>
                <li>
                    <img src="images/code.svg" class="code2" alt="code">
                    <p class="code">Front-end Dev</p>
                </li>
            </ul>
        </div>

        <div>
            <ul class="secondthree">
            <li>
                <img src="images/settings.svg" class="settings" alt="settings">
                <p class="settings">Back-end Dev</p>
            </li>
            <li>
                <img src="images/database.svg" class="database" alt="databases">
                <p class = "database">Databases</p>
            </li>
            <li>
                <img src="images/mobile.svg" class="mobile" alt="mobile">
                <p class="mobile">Mobile Devices</p>
            </li>
        </ul>
        </div>
    </div>
</div>

float left does not seem to work. Thanks

Upvotes: 0

Views: 1587

Answers (4)

Vlad Racoare
Vlad Racoare

Reputation: 153

As Aaron said in his answer, you don't need either bootstrap nor that amount of markup to achieve this. You can use flexbox with flex-basis and flex-wrap.

.container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.container li{
  flex-basis:33.33%;
}
@media screen and (min-width:700px){
  .container{
    flex-wrap:nowrap;
  }
}
<ul class="container">
  <li>
    <img src="images/brush.svg" class="brush" alt="brush">
    <p class="brush">Graphic Design</p>
  </li>
  <li>
    <img src="images/wand.svg" class="wand" alt="wand">
    <p class="wand">UI Design</p>
  </li>
  <li>
    <img src="images/code.svg" class="code2" alt="code">
    <p class="code">Front-end Dev</p>
  </li>

  <li>
    <img src="images/settings.svg" class="settings" alt="settings">
    <p class="settings">Back-end Dev</p>
  </li>
  <li>
    <img src="images/database.svg" class="database" alt="databases">
    <p class="database">Databases</p>
  </li>
  <li>
    <img src="images/mobile.svg" class="mobile" alt="mobile">
    <p class="mobile">Mobile Devices</p>
  </li>
</ul>

Or if you are not worried about IE 11 Compatibility you may also use CSS grid with auto-fit method, so you will get rid of the need of media queries entirely.

.container{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ) 
}

/* 
repeat is the css gread method for repeating columns or rows, 
auto-fit will look for the available space,
min-max is the CSS Grid method for deciding a minimum and maxium size for either columns or rows
fr is the CSS Grid measure unit for available space in the grid container 
*/ 
<ul class="container">
  <li>
    <img src="images/brush.svg" class="brush" alt="brush">
    <p class="brush">Graphic Design</p>
  </li>
  <li>
    <img src="images/wand.svg" class="wand" alt="wand">
    <p class="wand">UI Design</p>
  </li>
  <li>
    <img src="images/code.svg" class="code2" alt="code">
    <p class="code">Front-end Dev</p>
  </li>

  <li>
    <img src="images/settings.svg" class="settings" alt="settings">
    <p class="settings">Back-end Dev</p>
  </li>
  <li>
    <img src="images/database.svg" class="database" alt="databases">
    <p class="database">Databases</p>
  </li>
  <li>
    <img src="images/mobile.svg" class="mobile" alt="mobile">
    <p class="mobile">Mobile Devices</p>
  </li>
</ul>

In case you actually want control in your CSS Grid of how the layout looks like on different resolutions, you can manually specify the template-columns using the fr measure unit. Like this:

.container{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr /* three equal columns that uses all the available space */
}

@media screen and (min-width:700px){
  .container{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr /* six equal columns that uses all the available space */
  }
}
<ul class="container">
  <li>
    <img src="images/brush.svg" class="brush" alt="brush">
    <p class="brush">Graphic Design</p>
  </li>
  <li>
    <img src="images/wand.svg" class="wand" alt="wand">
    <p class="wand">UI Design</p>
  </li>
  <li>
    <img src="images/code.svg" class="code2" alt="code">
    <p class="code">Front-end Dev</p>
  </li>

  <li>
    <img src="images/settings.svg" class="settings" alt="settings">
    <p class="settings">Back-end Dev</p>
  </li>
  <li>
    <img src="images/database.svg" class="database" alt="databases">
    <p class="database">Databases</p>
  </li>
  <li>
    <img src="images/mobile.svg" class="mobile" alt="mobile">
    <p class="mobile">Mobile Devices</p>
  </li>
</ul>

Whenever possible I recommend the use of CSS Grid, as it is more semantic and easier to maintain.

Upvotes: 0

Aaron McGuire
Aaron McGuire

Reputation: 1255

I'm not sure why people are telling you to use Bootstrap for something so simple. using flex-basis along with flex-wrap will quite easily give you the same result.

(open my example in a full page so the min-width example shows)

.c-list {
display:flex;
flex-wrap:wrap;
}
.c-list__item{
  flex-basis:33%;
  list-style:none;
  text-align:center;
}

@media only screen and (min-width: 700px) {
  .c-list{
    flex-wrap:nowrap;
  }
}
<div class='container '>
  <ul class='c-list'>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Graphic Design</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>UI Design</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Front-end Dev</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Back-end Dev</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Databases</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Mobile Devices</p></li>
  </ul> 
</div>

Upvotes: 2

Thimo
Thimo

Reputation: 131

Give the container around your list a class e.g. icon-wrapper And style it like the following:

.icon-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.firstthree, .secondthree {
    min-width: 225px;
    box-sizing: border-box;
}

The children in the wrapper have the size of 1/2 of the size you want to break it. With the flex they will align inline.

Upvotes: 1

Tweak
Tweak

Reputation: 187

I made this with boostrap. Tell me if it can be good for you. For your resolution > 450 px, just have a look on https://getbootstrap.com/docs/4.0/layout/grid/ and it could help you. That's not very hard to use.

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      <img src="images/brush.svg" class="brush" alt="brush">
      <p class="brush">Graphic Design</p>
    </div>
    <div class="col">
      <img src="images/wand.svg" class="wand" alt="wand">
      <p class="wand">UI Design</p>
    </div>
    <div class="col">
       <img src="images/code.svg" class="code2" alt="code">
       <p class="code">Front-end Dev</p>
    </div>
  </div>  

  <div class="row">
    <div class="col">
       <img src="images/settings.svg" class="settings" alt="settings">
       <p class="settings">Back-end Dev</p>
    </div>
    <div class="col">
       <img src="images/database.svg" class="database" alt="databases">
       <p class = "database">Databases</p>
    </div>
    <div class="col">
       <img src="images/mobile.svg" class="code2" alt="code">
       <p class="code">Mobiles Devices</p>
    </div>
  </div>  
</div>

https://jsfiddle.net/ye1ntc6s/

Upvotes: 1

Related Questions