The website becoming responsive

The website is now responsive, and should alter to fit the following screen sizes:

  • Ipad & ipad mini.
  • Kindle
  • Mobile/ iphone 5

Although I was initially set with this task, as I am not very strong when it comes to code, Darlene was very helpful and did the Ipad/ipad mini tablet size, then uploaded that to git so that i could see what process I would need to follow. I could then complete the task of making the website responsive for a Kindle and I started the process of making our website also compatible with mobile devices. I did not finish this part but still uploaded the part for a kindle along with mobile device part I had started but commented out so if Tina or Darlene wanted to finish it they could as I was still finding it difficult to get my head around. Darlene decided to finish it off.

This was the code I did to make the website responsive for Kindles.

@media screen and (max-width:1280) {

.box_post_gender {
min-height: 70px;
color: white;
margin: auto;
font-family:sans-serif;
font-size: 20px;
background-color: #4F4F4F;;
width: 100%;
z-index: 100;
top: 50px;
position: fixed;
}

.box_hello {
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: center;
margin-left: 20px;
float: left;
line-height: 70px;
}

.box_hello2 {
display: none;
}

.box_post_gender_content {
text-align: right;
margin-right: 35px;
display: inline-block;
float: right;
margin-top: 5px;
}

.delete_toggle {
width: 60px;
height: 48px;
cursor: pointer;
text-align: center;
line-height: 10px;
background: #d1404b;
border: 1px solid #be3b45;
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 15px;
font-weight: 500;
display: inline-block;
position: relative;
left: 0px;
top: 3px;
}

.delete {
width: 60px;
height: 48px;
line-height: 50px;
text-align: center;
background: #d1404b;
border: 1px solid #be3b45;
cursor: pointer;
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 15px;
font-weight: 500;
margin-left: 82px;
text-decoration: none;
}

.delete a {
text-decoration: none;
color: white;
}

input[type="submit"] {
width: 60px;
height: 48px;
background: #fff;
border: 1px solid #fff;
cursor: pointer;
border-radius: 2px;
color: #85c14a;
font-family: 'Exo', sans-serif;
font-size: 15px;
font-weight: 500;
padding: 6px;
margin-top: 10px;
}

input[type="submit"]:active{
opacity: 0.6;
}

input[type="submit"]:hover{
opacity: 0.8;
}

}

This is a copy of the code I started for the mobile device, which Darlene built on to complete the task.


@media screen and (max-width: 960px) {
.box_post2 {
height: 190px;
width: 90% !important;;
background-color: #4F4F4F;;
font-family: sans-serif;
font-size: 20px;
color: white;
line-height: 40px;
opacity: 0.9;
margin: 0 auto;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
position: relative;
margin-top: 135px;
z-index: 0;
margin-bottom: -120px;
overflow: auto;
word-wrap: break-word;
}

.box_post_gender {
min-height: 70px;
min-width: 960px;
color: white;
margin: auto;
font-family:sans-serif;
font-size: 20px;
background-color: #4F4F4F;;
width: 100%;
z-index: 100;
top: 50px;
position: fixed;
}

.box_post_gender_content {
text-align: right;
margin-right: 35px;
display: inline-block;
float: right;
}
}

#place_delete_edit2 {
width: 100%;
height: 35px;
text-align: auto;
border-radius: 7px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
margin: 0 auto;
margin-top: 12px;
text-shadow: 1px 1px 1px #454e00;
background-color: #4F4F4F;
}

Below are some links to some helpful websites that my team recommended to me when I was struggling.

http://mattkersley.com/responsive/   ( this is a way to test if the website is responsive.)

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ ( to help with the sizing)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s