I'm trying to figure out how to make this basic CSS mobile friendly/responsive to browser window changes. Currently, the code displays fine at all sizes except horizontal tablets. Usually pictures and code will drop down to separate rows, but for some reason everything is being displayed on one line and extending past the page borders. I've tried everything from max/min-width and padding to positionand overflow, yet I can't get this one to work.
Here's the important code, the rest of it is just text formatting and effects. The html is basic and just calling .view
.view {
margin-left: auto;
margin-right: auto;
width: 300px;
height: 300px;
float: center;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff
}
.view .mask, .view .content {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
}
.view img {
display: block;
position: relative;
}
This is all done through Squarespace, and they assure me that it's my code causing the issues and not their template code.
What I'm referring to are the picture on this page. Change the size of the page and you'll see what I'm referring to when you hit about 4-6 inches wide. The pictures overlap and a scroll bar forms. There's no spacing between the individual pictures.
Your images are re-sizing because .sqs-col-12 and .sqs-col-4 are set to 33.3333%. If you give them a fixed width (say 320px) they will not collapse down on themselves, but will float down to the next line on a resize.
.sqs-col-12 .sqs-col-4 {
width: 320px;
}