html - Basic CSS Not Responsiveness/Mobile Friendly -


i'm trying figure out how make basic css mobile friendly/responsive browser window changes. currently, code displays fine @ sizes except horizontal tablets. pictures , code drop down separate rows, reason being displayed on 1 line , extending past page borders. i've tried max/min-width , padding positionand overflow, yet can't 1 work.

here's important code, rest of text formatting , effects. html basic , 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 done through squarespace, , assure me it's code causing issues , not template code.

what i'm referring picture on this page. change size of page , you'll see i'm referring when hit 4-6 inches wide. pictures overlap , scroll bar forms. there's no spacing between individual pictures.

your images re-sizing because .sqs-col-12 , .sqs-col-4 set 33.3333%. if give them fixed width (say 320px) not collapse down on themselves, float down next line on resize.

.sqs-col-12 .sqs-col-4 {    width: 320px; } 

Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -