WEBSITE CODING BREAKTHROUGHS.

I title this post ‘Breakthroughs’ however that is probably a little strong – I have been designing and coding websites from scratch for about 10 years now, it’s a hobby of mine – I call it ‘tinkering’. Kiri will tell you that I’m always doing something on a website I maintain. It is something I considered in the past going into full-time but I never took the plunge, and in all honesty I like the fact that if I need some time off it I can take it off…

A couple of years ago, I set myself a big challenge to create a responsive website from scratch. There are templates online that you can buy etc. but I like a challenge and believed that if I code it I can be the owner/controller and don’t have to be subject to someone else’s ideas or changes.

However, building websites never stops so I am still updating code and finding new ways to make the sites I maintain more responsive. The most recent thing is creating a grid system that I’ve had and used for about 18 months and making it so I can have responsive text and images in the ‘grid boxes’ at the same time to adapt to the device they are being viewed on.

Here’s some of my ‘stylesheet’ code for those of you who are interested (probably no one).

These boxes have images in that will then adapt and show different shapes of the image dependant on which device you are viewing the page on and will re-stack dependant on your device browser size:

/* grid21 (2 > tablet portrait 768px / 1 <= tablet portrait 768px) */
.grid-container {
clear: both;
width: 100%;
overflow: hidden;
margin: 0%; }

.box21 {
display: inline-block; float: left; z-index: 2; overflow: hidden; margin: 0px; max-width: 775px; width: 50%; padding: 0px; height: auto; }

.box21 img { /* 768x650px*/
margin: 0% -5% 0% -5%;
border: 0px;
vertical-align: middle;
width: 110%;
height: auto; }

@media only screen and (max-width: 768px){ /* tablet portrait */
.box21 {
width: 100% !important;
display: block !important; }

.box21 img {
margin: -12.65% 0% -12.65% 0% !important;
width: 100% !important; }
}

These boxes can have text or images in and will re-stack dependant on your device browser size:

/* grid421 (4 > tablet portrait 768px / 2 <= tablet portrait 768px / 1 <= large smartphone landscape) */

.grid-container {
clear: both;
width: 100%;
overflow: hidden;
margin: 0%; }

.box421 {
width: 23%;
display: inline-block;
float: left; margin: 1%; }

.box421 img {
display: block;
border: 0px;
text-decoration: none;
width: 100%;
max-width: 380px;
clear: both;
margin: 0 auto; }

@media only screen and (max-width: 768px){ /* tablet portrait */
.box421 {
width: 48% !important; }
}

@media only screen and (max-width: 603px) { /* large smartphone landscape */
.box421 {
margin: 1% 0% 1% 0% !important;
width: 100% !important; }
}

I’m no coding expert, but these worked for me and the website I was creating. I hope if you are looking to create a grid system that will show off your website than I hope you can find some inspiration here.

LS

website-code-breakthroughs

Next Post

Previous Post

Leave a Reply

© 2017 DIY. DAD STUFF. DESIGN.