Hi, on this page I have a section with illustrations and I have to big issues with it.
1. On mobile for some reason the width of the container is bigger then it should and adds a scroll bar from left to right.2. On desktop when ever I click on the small images the container with the bounces. I thing the reason is that the main-img is not the same size but but I have an class that makes the main-img 300px and I don’t know why is not working. Here is the code.
[code]
.illustration__container {
margin-bottom: 20px;
max-width: 1200px;
margin: auto;
}
.main-illustration img {
width: 300px;
height: auto;
padding: 20px 0;
}
.main-illustration {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 20px;
}
.illustrations img {
width: 150px;
height: auto;
display: block;
margin: 5px;
}
.illustrations {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 15px;
flex-wrap: wrap;
}