Website Debugging - Dreamweaver CC

[jttiglao]

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;
}
 

I understand that a lot of these selectors use pixels, but even the ones that use % are distorted.

 

 

 

[ALwin]

It would be nice to see screen caps of what you want it to look like and how it looks on different screens/resolutions.

 

EDIT:

In Firefox, there is a Web Developer plugin/add-on that you can use to simulate different screen/window sizes.

[jttiglao]

Just now, ALwin said:

It would be nice to see screen caps of what you want it to look like and how it looks on different screens/resolutions.

Oh, my bad I actually copied and pasted this thread from another section which wasn't getting any response. Here are screen shots:

 

These 2 screen shots is what it is supposed to look like.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

And this is what happens.

[ALwin]

OK thanks for the screen caps.

 

My advice, be very careful using percentages.  When you change window or screen resolution it can seriously affect the layout (e.g. 1000px wide to 500px wide, 10% of 1000 is 100, 10% of 500 is 50).

 

I personally prefer to avoid using percentages as much as possible.  If I need to make my website flexible for different screen sizes (phone, tablet, computer screen), to implement a responsive design, I prefer designing the CSS for a few common screen resolutions.  You can use Min-size of something and Max-size of something CSS styles.

 

You can add conditional statements in CSS, e.g. if width of screen resolution or window resolution is something load this style, else load another style.  This is useful when you need the images to scale or become smaller on smaller screens, else the image size will remain the same and on small screens the image will take up more screen real estate.

[jttiglao]

1 minute ago, ALwin said:

OK thanks for the screen caps.

 

My advice, be very careful using percentages.  When you change window or screen resolution it can seriously affect the layout (e.g. 1000px wide to 500px wide, 10% of 1000 is 100, 10% of 500 is 50).

 

I personally prefer to avoid using percentages as much as possible.  If I need to make my website flexible for different screen sizes (phone, tablet, computer screen), to implement a responsive design, I prefer designing the CSS for a few common screen resolutions.  You can use Min-size of something and Max-size of something CSS styles.

 

You can add conditional statements in CSS, e.g. if width of screen resolution or window resolution is something load this style, else load another style.  This is useful when you need the images to scale or become smaller on smaller screens, else the image size will remain the same and on small screens the image will take up more screen real estate.

Alright, besides the fact that I have to change all my percentages, thanks.

 

What do you prefer to use for sizes? Pixels? And I'm guessing I should make the minimum width and height right before it distorts.

[ALwin]

10 minutes ago, jttiglao said:

Alright, besides the fact that I have to change all my percentages, thanks.

 

What do you prefer to use for sizes? Pixels? And I'm guessing I should make the minimum width and height right before it distorts.

Dreamweaver has a tool (I don't remember what it is called as I only have Dreamweaver installed on my MacBook and not my home workstation) that allows you to preview the design on various screen resolutions.  E.g. Width greater than 1024px means desktop screen, width smaller than 480px might be for mobile phones.

 

Another thing you need to consider is pixel density, due to the use of "retina" displays in many devices.  A 5" screen on a non-retina device might have a resolution of 480x320, but on the same 5" size screen on a retina device may have 1440x960px resolution.

 

Look online for tips on designing responsive websites and CSS for these sort of things.

 

EDIT:

PS: you don't need to change all your percentages.  Just some instances, especially where you define margins and paddings.

[jttiglao]

1 hour ago, ALwin said:

Dreamweaver has a tool (I don't remember what it is called as I only have Dreamweaver installed on my MacBook and not my home workstation) that allows you to preview the design on various screen resolutions.  E.g. Width greater than 1024px means desktop screen, width smaller than 480px might be for mobile phones.

 

Another thing you need to consider is pixel density, due to the use of "retina" displays in many devices.  A 5" screen on a non-retina device might have a resolution of 480x320, but on the same 5" size screen on a retina device may have 1440x960px resolution.

 

Look online for tips on designing responsive websites and CSS for these sort of things.

 

EDIT:

PS: you don't need to change all your percentages.  Just some instances, especially where you define margins and paddings.

Would you recomend COMPLETELY restarting the whole website? I reaaallly like how it looks right now, its just that when I scale it it looks awful.