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
position
and 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
Post a Comment