2

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.

Timothy Miller
  • 2,391
  • 1
  • 27
  • 34
Nicholas
  • 23
  • 3

1 Answers1

2

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;
}
SRing
  • 694
  • 6
  • 16
  • Thank you for the fast response! Unfortunately when the height and width restrictions are removed, the images scale, but the text overlay does not. Is there a work-around for this? The class .view .mask, .view .content would have to be altered to allow for reduced size or the text box would have to somehow restrict visible characters. I'd still prefer if the images always stayed at full size, but moved to different lines if possible. – Nicholas Apr 22 '15 at 19:51
  • I just updated the answer to try and match your need a bit better. – SRing Apr 22 '15 at 20:03
  • You cannot believe how happy I am now. You, sir, are a hero. – Nicholas Apr 22 '15 at 20:12