0
I am working on a personal project and while I was doing the HTML and CSS part of the code I arrived at this problem, the div that is in the middle pushes the div from the right side menu, creating a side scroll that was not supposed to happen.
This was supposed to be the final result, but as I said, the red div pushes the "MENU2", I’m trying to make everything responsive, so when it’s on different screens or even on mobile the menus shrink and the red part will decrease to the correct size.
This is the CSS of the red Divs
.fundo {
padding: 20px;
justify-content: center;
display: flex;
background-color: #f0f0f0;
}
.fundo-card {
width: 35vw;
height: 53vw;
max-height: 75vh;
max-width: 50vh;
margin: auto;
position: relative;
top:0;
bottom:0;
left:0;
right:0;
border-radius: 20px;
padding: 0.7vw;
background-color: #c4c4c4;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: hidden;
}
And this is from "MENU2"
.sidebar-right {
display: block;
float: right;
}
And the HTML
<div class="d-flex">
<div class="border-right bg-menul" id="sidebar-wrapper">
<div class="top-perfil">
<div class="top-perfil-circulo">
<img class="top-perfil-img" src="">
</div>
<div class="info-perfil">
<a class="info-name"></a>
</div>
</div>
<div class="list-group ">
<a href="/" class="list-group-item list-group-item-action">Home</a>
<a href="/perfil/" class="list-group-item list-group-item-action">Perfil</a>
<a href="/rolls/" class="list-group-item list-group-item-action">Pessoas</a>
<a href="#" class="list-group-item list-group-item-action">Grupo</a>
<a href="#" class="list-group-item list-group-item-action">Mercado</a>
<a href="#" class="list-group-item list-group-item-action">Eventos</a>
</div>
</div>
<div class="fundo">
<div class="fundo-card" id="roll">
<div class="fundo-img-card">
<img class="img-card" src="" class="d-block w-100" alt="...">
</div>
</div>
<div class="fundo-card">
<div class="fundo-img-card">
<img class="img-card" src="" class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="border-right bg-menul sidebar-right" id="sidebar-wrapper">
<div class="top-perfil">
<h3>Amigos</h3>
</div>
<div class="list-group ">
<a href="#" class="list-group-item list-group-item-action">Amigo 1</a>
<a href="#" class="list-group-item list-group-item-action">Amigo 2</a>
</div>
</div>
</div>
There is no reason to use float with flex and it is probably not necessary to use position:relative either.
– Guilherme Nascimento
html, without it makes it difficult to answer you
– hugocsl
a rough way to solve would be to put a
overflow-y: hidden, but that might, and probably will, be a foot shot sooner or later– yoyo
Unfortunately if I put
overflow-y: hiddenthe "MENU2" will be cut in some dimension– user230138
The problem is that you put a fixed width of 35vw in the class
.fundo-card– hugocsl
@hugocsl you’re right, I ended up researching more and I realized that what I did was wrong, the correct way to deal with this layout is by using the same grid bootstrap classes. I’ll have to redo the code.
– user230138