I am making a website which I want two elements(sidebar and card group) to sit next to each other, the type buttons in the sidebar in display block, I had successful done that in the laptop view. Now I want to make it mobile responsive, the sidebar and card group are sitting vertically, and the type buttons in the sidebar in display inline-block. I have managed to position the sidebar and card group sitting vertically, but cannot make the type buttons to display on the same line, can someone help me?

<div className="layoutContainer">
       <div className='sidebar'>
                    <input className='searchbar' />

                    <div className='all-types-container'>
                        <div className='all-container'>
                            <button className='type-button'>All</button>
                        </div>
                        <div className='types-container'>
                            <h5 className='type-category'>Book type</h5>
                            <button className='type-button'>Comedy</button>
                            <button className='type-button'>Love</button>
                            <button className='type-button'>Horror</button>
                            <button className='type-button'>Detecting</button>
                            <button className='type-button'>Fiction</button>
                            <button className='type-button'>Adventure</button>
                            <button className='type-button'>Action</button>
                            <button className='type-button'>Youth</button>
                        </div>
                        <div className='advanced-types-container'>
                            <h5 className='type-category'>Advanced book type</h5>
                            <button className='type-button'>Popular</button>
                            <button className='type-button'>New release</button>
                        </div>
                    </div>
                </div>

        <div className="card-group-user">
                <div className="container">
                        <div className="row row-cols-3">
                        </div>
                        
                 </div>
        </div>
</div>

.layout-container {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: 2rem;
}

.sidebar {
    width:20%;
}

.card-group-user {
    width:80%;
    margin-top: 2rem;
}

.type-button  {
    display: block;
    background-color: rgb(255, 251, 0);
    border-color: rgb(248, 201, 113);
    font-weight: 600;
    height: 35px;
}

@media (max-width: 370px) {
    .layout-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .type-button {
        display: inline-block;
    }
}

It works when I set the sidebar's width at 20% and the card group's width at 80% in laptop view. But in mobile view, I moved the card group underneath the sidebar, I want the sidebar's width to be 100% and the type buttons to be inline-block, but it does not do anything.

CodePudding user response：

You have some typo, that I've fixed. I think you want to achieve this layout. Am I right?

.layout-container {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2rem;
}

.sidebar {
    width:20%;
}

.card-group-user {
    width:80%;
    margin-top: 2rem;
}

.type-button  {
    display: block;
    background-color: rgb(255, 251, 0);
    border-color: rgb(248, 201, 113);
    font-weight: 600;
    height: 35px;
}

.searchbar{
  width: 100%;
}

@media (max-width: 370px) {
    .layout-container {
        flex-direction: column;
    }

    .sidebar {
        width:100%;
    }

    .card-group-user {
        width:100%;
        margin-top: 2rem;
    }
  
    .types-container{
      display: flex;
      max-width: 100%;
      overflow-y: auto;
    }

    .type-button {
        display: inline-block;
    }
}

<div >
    <div >
        <input  />

        <div >
            <div >
                <button >All</button>
            </div>
      <h5 >Book type</h5>
            <div >
                <button >Comedy</button>
                <button >Love</button>
                <button >Horror</button>
                <button >Detecting</button>
                <button >Fiction</button>
                <button >Adventure</button>
                <button >Action</button>
                <button >Youth</button>
            </div>
            <div >
                <h5 >Advanced book type</h5>
                <button >Popular</button>
                <button >New release</button>
            </div>
        </div>
    </div>

    <div >
        <div >
            <div ></div>
        </div>
    </div>
</div>

CodePudding user response：

You have some typo, that I've fixed. I think you want to achieve this layout. Am I right?

*{
  margin: 0;
  padding: 0;
}

.layout-container {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2rem;
    box-sizing: border-box;
}

.sidebar {
    width:20%;
}

.card-group-user {
    width:80%;
    margin-top: 2rem;
}

.type-button  {
    display: block;
    background-color: rgb(255, 251, 0);
    border-color: rgb(248, 201, 113);
    font-weight: 600;
    height: 35px;
}

.searchbar{
  width: 100%;
}

@media (max-width: 370px) {
    .layout-container {
        flex-direction: column;
    }

    .sidebar {
        width:100%;
    }

    .card-group-user {
        width:100%;
        margin-top: 2rem;
    }
  
    .types-container{
      display: flex;
      max-width: 100%;
      overflow-y: auto;
    }

    .type-button {
        display: inline-block;
    }
}

<div >
    <div >
        <input  />

        <div >
            <div >
                <button >All</button>
            </div>
      <h5 >Book type</h5>
            <div >
                <button >Comedy</button>
                <button >Love</button>
                <button >Horror</button>
                <button >Detecting</button>
                <button >Fiction</button>
                <button >Adventure</button>
                <button >Action</button>
                <button >Youth</button>
            </div>
            <div >
                <h5 >Advanced book type</h5>
                <button >Popular</button>
                <button >New release</button>
            </div>
        </div>
    </div>

    <div >
        <div >
            <div ></div>
        </div>
    </div>
</div>