Website Scaling - Dreamweaver CC

jttiglao · April 20, 2016

Hello.

So I'm creating a dreamweaver cc website (one page design),

but the scaling just isn't working right.

I work on a 2560x1440 monitor, and that's around a 1900x800 window. In there, it looks great. But when I scale it down smaller, everything, the navigation bar, all the photos and text just gets smushed. Not distorted, but the layout becomes unorganized.

Right now I am working on my mac so I can't show you what it's supposed to look like (because it only looks good on the 2560x1440 monitor)

but I can show you the code (css) and what it looks like when its unorganized.

Please help!

Thanks,

JT

CSS CODE:

@import url("webfonts/PlayfairDisplay_Bold/stylesheet.css");
@import url("webfonts/Ubuntu_Regular/stylesheet.css");
@import url("webfonts/Vollkorn_Regular/stylesheet.css");
@import url("webfonts/Lato_Hairline/stylesheet.css");

nav {
   font-family: source-sans-pro;
   font-style: normal;
   font-weight: 200;
   text-align: center;
   font-size: 1em;
   color: #000000;
   padding-top: 20px;
   padding-bottom: 30px;
   background-color: #FFFFFF;
   margin-top: -9px;
   width: 100%;
   padding-left: 0px;
   padding-right: 16px;
   margin-left: -8px;
}
h1 {
   font-family: "Ubuntu Regular";
   font-style: normal;
   font-weight: 400;
   color: #FFFFFF;
   margin-top: 15%;
   text-align: center;
   letter-spacing: 10px;
   margin-bottom: -7px;
   padding-top: 95px;
   background-image: url(images/LOGO.png);
   background-size: 105px auto;
   background-repeat: no-repeat;

   background-position: 0em
%;
   background-position: center
%;
   background-position: center 0%;
   font-size: 38px;
   width: auto;
   padding-left: 35%;
   padding-right: 35%;
}
h5 {
   text-align: center;
   color: #FFFFFF;
   letter-spacing: 10px;
   text-decoration: none;
   line-height: -1px;
   font-family: "Lato Hairline";
   font-size: 20px;
   padding-top: 0px;
   margin-top: 17px;
   margin-left: auto;
   margin-right: auto;
   padding-left: auto;
   padding-right: auto;
}
.sectioRight {
   width: 25%;
   font-family: noticia-text;
   font-style: normal;
   font-weight: 400;
   margin-top: -2.1%;
   border-style: none;
   padding-left: 30%;
   padding-right: 31.7%;
   background-color: #FFFFFF;
   margin-left: 13.7%;
   padding-bottom: 7.7%;
   height: 0%;
}
body {
   background-size: 104% auto;
   background-attachment: fixed;
   font-style: normal;
   font-weight: 400;
   background-image: url(images/Story4.jpg);
   background-clip: padding-box;
   background-repeat: no-repeat;
   background-origin: padding-box;
   background-color: #000000;
   background-position: 55% -1%;
   width: 1500px;
}
.aboutnav {
   text-decoration: none;
   color: #000000;
   margin-top: 0%;
   margin-left: 0%;
   border: medium solid #FFFFFF;
   padding-top: 5px;
   padding-right: 50px;
   padding-left: 50px;
   padding-bottom: 5px;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
.aboutnav:hover {
   border-color: #000000;
}
.homenav {
   color: #000000;
   text-decoration: none;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
   border: medium solid #FFFFFF;
   padding-top: 5px;
   padding-right: 50px;
   padding-bottom: 5px;
   padding-left: 50px;
}
.homenav:hover {
   border-color: #000000;
}
.formDec {
   width: 25%;
   margin-left: 25%;
   height: 30px;
   text-align: left;
   margin-bottom: 20px;
   font-family: source-sans-pro;
   font-style: normal;
   font-weight: 200;
   font-size: 1.4em;
}
.letstalk {
   font-family: "Ubuntu Regular";
   margin-left: 25%;
   letter-spacing: 5px;
   display: inline;
}
.formdesc {
   font-family: "Lato Hairline";
   margin-left: 25%;
}
.submitForm {
   display: block;
   border: 0;
   width: 10%;
   height: 60px;
   margin-top: 10px;
   margin-right: auto;
   margin-left: 40%;
   margin-bottom: 5%;
   background: #eee;
   color: #333;
   text-align: center;
   transition: background, color, .5s ease 0;
   border: 0;
   font-size: 1.2em;
   line-height: 1.5em;
   color: #333333;
   letter-spacing: .01em;
   font-style: normal;
   font-weight: 300;
   font-family: source-sans-pro;

sans-serif;
}
.messageForm {
   height: 125px;
   text-align: left;
}
.aapTitle {
   background-repeat: no-repeat;
   background-position: 50% 0px;
   background-size: auto auto;
   padding-bottom: 79px;
   padding-top: 64px;
}
.logo {
   height: 75px;

}
#contact {
}
.clientalbumnav {
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   text-decoration: none;
   color: #000000;
   margin-left: 2px;
   margin-right: 2px;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
   border-style: solid;
   border-color: #FFFFFF;
}
.portfolionav {
   padding-top: 5px;
   padding-left: 40px;
   padding-right: 40px;
   padding-bottom: 5px;
   border-style: solid;
   border-color: #FFFFFF;
   text-decoration: none;
   color: #000000;
   margin-left: 2px;
   margin-right: 2px;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
.contactnav {
   color: #000000;
   text-decoration: none;
   border-style: solid;
   padding-top: 5px;
   padding-left: 40px;
   padding-right: 40px;
   padding-bottom: 5px;
   border-color: #FFFFFF;
   margin-right: 2px;
   margin-left: 2px;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
.bookonline {
   padding-left: 40px;
   padding-right: 40px;
   text-decoration: none;
   color: #000000;
   margin-left: 2px;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-right: 2px;
   border-style: solid;
   border-color: #FFFFFF;
}
.portfolionav:hover {
   border-color: #000000;
}
.contactnav:hover {
   border-color: #000000;
}
.clientalbumnav:hover {
   border-color: #000000;
}
.bookonline {
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
.bookonline:hover {
   border-color: #000000;
}
.aboutMe {
   width: 229px;
   font-family: "Ubuntu Regular";
   font-size: 30px;
}
.cakeimg {
   margin-left: -8px;
}
.burgerimg {
   padding-right: 0px;
   padding-top: 0px;

}
.imges1 {
   width: 25.3%;
   height: 301px;
}
.churchimg {
   width: 25.3%;
   height: 301px;
}
.flowerimg {
   width: 24.5%;
   height: 301px;
}
.aaronantonio {
}
.aaron {
   padding-top: 0%;
   margin-bottom: -29.53%;
   margin-left: -12%;
   padding-left: 11%;
   width: 37.5%;
   height: 295%;

}
.weddingimg {
   width: 25%;
   height: 25%;
   margin-left: -1%;
}
.burgerthumb {
   width: 25%;
   height: 25%;
   margin-left: -3.6%;
}
.formsection {
   margin-top: 113%;
   padding-left: 0%;
   padding-right: 0%;
   margin-left: -13px;
   margin-right: -7px;
}
.secondbackground {
   background-image: url(images/_MG_1978-2.jpg);
   background-color: #FFFFFF;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   margin-top: 21%;
   background-position: -2566% 0%;
}
.eventsthumb {
   width: 25%;
   height: 25%;
   margin-left: -7.95%;
}
.portraitsthumb {
   width: 25%;
   height: 25%;

   margin-left: -4
.%
.%;
   margin-left: -3.6%;
   background-color: #000000;
}
.portfolioactual {
   font-family: "Ubuntu Regular";
   text-align: center;
   padding-top: 40%;
   margin-top: -35%;
   padding-bottom: 2.5%;
   background-color: #FFFFFF;
   padding-left: 5%;
}
.container-fluid nav {
   width: 1500px;
}