Removal of the white areas 'gutters '? the delicate design desktop version.

I used the checkerboard to fluid in Dreamweaver to create a sensitive site. When pages are displayed on your desktop, there is a white area "gutter?" on each side. I tried for hours to have the Web page full screen without the white area of 'gutter '. I included a photo of what is my problem. The questions do not arise on an Android based smartphone or tablet. I am also including the HTML and CSS code for the project. Any help would be greatly appreciated. HTML:

HTML

<! doctype html >

< class html = "" >

< head >

< meta charset = "utf-8" >

< meta name = "viewport" content = "width = device-width, original scale = 1" >

< name meta = "description" content = "need of towing during normal hours or in case of emergency? Why not contact Mississippi best Noxapater wrecker towing and salvage company? ">

< META NAME = "ROBOTS" CONTENT = "INDEX, FOLLOW" >

< title > Noxapater, Mississippi | Towing | Emergency service 24/7. Tow truck & Salvage < /title >

< link href = "boilerplate.css" rel = "stylesheet" type = "text/css" > "

< link href = "noxwreck.css" rel = "stylesheet" type = "text/css" > "

< link href =' http://fonts.googleapis.com/CSS?family=halant:700 ' rel = "stylesheet" type = "text/css" >

< link href =' http://fonts.googleapis.com/CSS?family=Montserrat:700 ' rel = "stylesheet" type = "text/css" >

< link href =' http://fonts.googleapis.com/CSS?family=actor ' rel = "stylesheet" type = "text/css" >

< script language = JavaScript > var message = 'This is a copy-written site.'; function clickIE4() {if (event.button == 2) {alert (message); return false ;}} function clickNS4 (e) {if (document.layers | document.getElementById & &! document.all) {if (e.which == 2 | e.which == 3) {alert (message); return false ;}}}}}}} If (document.layers) {document.captureEvents (Event.MOUSEDOWN);} document.onmousedown = clickNS4 ;} Else if (document.all & &! document.getElementById) {document.onmousedown = clickIE4 ;} document.oncontextmenu = new function ("alert (message);} "return false") < /script >

< script src = "respond.min.js" > < / script >

< / head >

< body >

< div class = "gridContainer clearfix" >

< div id = "LayoutDiv1" >

Salvage and wrecker Noxapater < H1 > < / h1 >

< table width = "95%" border = "0" >

< b >

< th = "12%" scope = "col" width > < a href = "such: 6627242000" > < img src = "images/callme.jpg" width = "100" height = "100" alt = "Click to Call" > < /a > < /th > "

< th = "12%" scope = "col" width > < a href = "sms:6628038714" > < img src = "images/textme.jpg" width = "100" height = "100" alt = "Click for text" > < /a > < /th > "

< th = scope '76% ' width = "col" > < FONT SIZE = "+ 6" > < FONT COLOR = "#FF0000" > 24/7 emergency SERVICE < / POLICE > < / FONT > < /th >

< /tr >

< /table >

< br >

< br >

< p > the following is the placeholder text. < /p >

< p > Lorem ipsum dolor sit amet, adipiscing elit our. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus and magnis say parturient go upstairs, nascetur ridiculus MUS Donec quam felis, ultricies nec, pretium quis, pellentesque EU, SEM Nulla MPCs massa quis enim. Donec queer justo, fringilla vel, aliquet nec, fitness eget, arcu. < /p >

< p > enim justo, ut, imperdiet justo, vitae venenatis lectus. Nullam dictum EU gay of mollis pretium felis. Integer tincidunt. CRAs dapibus. Vivamus elementum semper nisi. Aenean tellus eleifend fitness. Aenean ligula leo porttitor EU, MPCs vitae, eleifend ac, enim. Ante lorem aliquam dapibus in, viverra quis, feugiat a, tellus. < /p >

< p > Phasellus nulla ut laoreet metus varius viverra. Amongst rutrum. Aenean imperdiet. Etiam nisi vel augue ultricies. Curabitur ullamcorper nisi ultricies. Nam eget dui. Etiam lectus. Maecenas tellus eget, condimentum lectus, sem quam semper libero, sit amet adipiscing sem neque ipsum sed, tempus. Nam quam nunc blandit vel pulvinar luctus hendrerit id, lorem. Maecenas nec odio and ante tincidunt tempus. Donec vitae sapien ut faucibus venenatis libero. Nullam quis ante. Etiam sit amet orci eget tincidunt faucibus eros. Leo DUIs. SED fringilla mauris sit amet nibh. Donec sodales restore magna. SED MPCs, leo eget bibendum sodales augue total curriculum nunc < /p >

< div class = "footer" >

" < footer > © Noxapater tow and recovery / All Rights Reserved / this site is designed and maintained by < a href =" http://www.krissiecox.com/HTML/ ' > < color = "#CC00FF" > Benoit Cox < / police > < /a > < / footer > .

< br >

< / div >

< / div >

< / body >

< / html >

CSS

@charset "utf-8";

/ * Simple fluids

Note: Fluid requires that you remove the attributes height and width of the media of the HTML

http://www.alistapart.com/articles/fluid-images/

*/

IMG, object, embed, {video

Max-width: 100%;

}

/ * IE 6 doesn't support max-width so 100% width by default * /.

. IE6 img {}

Width: 100%;

}

H1 {}

do-family: "Hauling", serif;

font-size: 72px;

margin-top: 0;

padding-right: 15px;

padding-left: 25px;

Color: #000; / * black * /.

text-align: center;

background-color: #F90;

}

footer {}

do-family: "Montserrat", without serif.

do-size: 16px;

margin-top: 0;

padding-right: 15px;

padding-left: 25px;

color: #C60; / * orange * /.

text-align: center;

}

{p}

do-family: 'Actor', without serif.

do-size: 22px;

margin-top: 0;

padding-right: 15px;

padding-left: 25px;

Color: #000; / * black * /.

text-align: left;

}

/*

Properties Grid Dreamweaver fluid

----------------------------------

DW-num-CLO-mobile: 5;

DW-num-CLO-Tablet: 8;

DW-num-OCOL-Office: 10;

DW-gutter-percentage: 25;

Inspiration of "Responsive Web Design" by Ethan Marcotte

http://www.alistapart.com/articles/responsive-web-design

Golden by Joni Korpi grid system and

http://goldengridsystem.com/

*/

/ * Mobile layout: 480px and below. */

{.gridContainer}

left margin: auto;

margin-right: auto;

Width: 87.36%;

padding-left: 1.82%;

padding-right: 1.82%;

}

{#LayoutDiv1}

Clear: both;

float: left;

left margin: 0;

Width: 100%;

display: block;

}

/ * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */

@media only screen and (min-width: 481px) {}

{.gridContainer}

Width: 90.675%;

padding-left: 1.1625%;

padding-right: 1.1625%;

}

{#LayoutDiv1}

Clear: both;

float: left;

left margin: 0;

Width: 100%;

display: block;

}

}

/ * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

@media only screen and (min-width: 769px) {}

{.gridContainer}

Width: 88.2%;

Max-width: 1232px;

padding-left: 0.9%;

padding-right: 0.9%;

margin: auto;

}

{#LayoutDiv1}

Clear: both;

float: left;

left margin: 0;

Width: 100%;

display: block;

}

}

kcox.jpg

Modify the Office css media query to:

@media only screen and (min-width: 769px) {}

{body

margin: 0;

padding: 0;

}

{.gridContainer}

Width: 100%;

margin: auto;

padding: 0;

}

{#LayoutDiv1}

Clear: both;

float: left;

left margin: 0;

Width: 100%;

display: block;

}

}

Tags: Dreamweaver

Similar Questions

  • Purpose of having 'Phone' &amp; 'Tablet' put in now the delicate design is an option?

    title asks this.

    I made a model of mobile and office semi-responsive in old Muse (using text boxes 100 %W).

    Now with a reactive full provision finally came (best shot than ever muse) is there a point in having other layouts? A mobile phone dimensionnera just the "desktop" version just sensitive measure?

    Y at - it an easy way to merge the phone and layouts Office together and simply use a reactive trace?

    Thank you!

    PS This is my first question in the Adobe forums

    Hi Larry,

    First of all, welcome to the community forums of Adobe muse.

    There are many differences between the (unfounded) Muse reactive and Adaptive

    However, to put this short a major difference between the two.

    • In sensitive version of Muse, scrolling effects do not work
    • Not all widgets are still sensitive

    because of the above limitations, we have retained two options open.

    And Yes, you can easily convert an existing schema of Muse in sensitive

    Look for this tutorial migrate from replacement for reagent in Muse track of relevant information.

    Best regards

    Ankush;

  • Merge the background image for the delicate design?

    Hi again,

    Is it a good idea to merge the background image if I design using delicate design? I notice after as I merge the image in the background the merged image don't like too good after it was merged compared to before.

    Thank you.

    In what context? You want that image to all slides? Use a substance in this case, you can choose an image.

  • How to make the delicate design with IE8 and 9 courses

    I created a course but all users receive errors because IE version. Some people cannot spend 10 or 11 for various issues.

    Hello

    Delicate design means HTML5 output only. And if you look at this link, you will see how the poor support of HTML5 is in IE8 and IE9.

    HTML5test - how well your browser supports HTML5?

  • removal of the shortcuts of desktop programs

    Periodically, windows removes the program shortcut icons I placed on my desk for no apparent reason.

    I WANT these icons, that's why I put there.

    How can I stop Windows prevents this (Win-7 Ultimate 64 bit)

    See this

    http://support.Microsoft.com/kb/978980/en-us?p=1

  • JavaScript, interrupting the delicate design

    I added javascript on my site which is great and the site is still the answer, but I have to reload the page to see the site change proportions. Obviously, this is no right from the design point of view that the Web site will look terrible if you had to change your mode iphone portrait to landscape mode and site does not react until it is recharged. I think it might be a problem loading as I know that javascript increases the loading time of the Web sites. Take a look at btccs.co.uk and change the screen size and you'll see what I mean. Thank you

    Massive distortion occurs when images are enhanced beyond their original size.  It's even uglier on ultra wide TV or multiple screens.  This is not a good practice.

    Let's say you have a banner that is wide of 2000px.  The following CSS rule allows of descenders in proportion to the width of the viewport of the images, but high-end never beyond the native size of 2000px.

    IMG {max-width: 100%}

    The above rule is the default value in fluid grid Layouts + other executives RWD.  It works fine, I hope you don't ignore it in your HTML with the attributes height and width explicit img.

    Nancy O.

  • Can I reinstall the trial Design Standard Version?

    My husband did something that I can't open Illustrator. The message I get is "...". missing MSVLP.dll. Reinstall software. "Can I reinstall the trial version? I just started to use a few days ago?

    Hi maplehillartwork,

    Yes, you can reinstall the trial and will continue the days remaining in your trial period.

  • I use media queries and div will not focus on the desktop version

    Hello

    I'm building a site for the first time using questions from the media. My problem is that I can't get the header div (#layoutDiv1) in the centre on the desktop version.

    I pasted my code below, am I missing something?

    Any help would be great.

    Thank you, Alex.

    / * Mobile layout: 480px and below. */

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 100%;

    color: #FFF;

    background-color: #000;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 90%;

    display: block;

    padding-top: 20px;

    padding-left: 20px;

    padding-right: 20px;

    padding-bottom: 20px;

    }

    / * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */

    @media only screen and (min-width: 481px) {}

    {.gridContainer}

    Width: 100%;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 90%;

    display: block;

    padding-top: 20px;

    padding-left: 20px;

    padding-right: 20px;

    padding-bottom: 20px;

    }

    }

    / * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 100%;

    text-align: left;

    }

    {#LayoutDiv1}

    Width: 1000px;

    padding: 20px;

    margin-right: auto;

    left margin: auto;

    }

    }

    Because you don't have a max-width to constrain the delicate design, attributes of the Tablet and phone are also then applied on the desk, because they are true.  Have you tried to set a max or clear setting width and float to none in the CSS Office?

  • Why past events are removed from the calendar

    Why past events are removed from the calendar?

    Klassical,

    Check the settings > Mail, Contacts, calendars > calendars > synchronization > select your condition for the retention of the event.

  • Will I lose my music downloads that are located in the "MY DOWNLOADS" folder "IF" I remove them, once they are transferred to my iTunes account?

    Will I lose my music downloads that are located in the "MY DOWNLOADS" folder "IF" I remove them, once they are transferred to my iTunes account?

    Hello JMarione,

    Thank you for your message.  Because it's really a question of iTunes I refer you to http://www.apple.com/au/support/itunes/.  Support you should get it will ensure that all your media will be transferred correctly.  This is a forum for Vista, and many people have different one from the other configurations.  A good answer for a single person on this forum could still lose you some of your files, because the installation program may be different.  Good luck.

    See you soon

  • All the members (but 1) are removed from the entity dimension in planning and deployed to essbase. -What are the data deleted in essbase so? / The data can be restored by restoring the entity dimension?

    All the members (but 1) are removed from the entity dimension in planning and deployed to essbase.

    -What are the data deleted in essbase so?

    The data can be restored by restoring the entity dimension? EPMA the entity dimension is still in tact.

    It is unclear what exectly arrived, but looks like a change was made in the dimension entity planning (not EPMA) and then deployed (successfully).

    In essbase, we see that the entity dimension has only one member left for the appropriate plan types, as in the planning.

    If you remove members and then push that yes the essbase data is deleted, if you need back then you will need to go back to your restore process.

    See you soon

    John

    http://John-Goodwin.blogspot.com/

  • How to remove special characters that are not available in the key board

    Hi all
    How to remove special characters that are not available in the key board.
    select '106    ©      500049' str from dual;
    
    After removal of the special symbols ( not only copy right, it can be any special symbol other than key board symbols), I want to add a single space between two number.
    
    Output should be like:
    Str
    106 500049
    Thank you for your help in advance.
    select
     '106    © ® (k)      500049' str
    ,regexp_replace('106    © ® (k)     500049', '[^[:digit:]]+', ' ') r
    from dual
    
  • y at - it a button to remove all the nuances that are not used in an file?

    Hey all,.

    I was wondering is there a button that removes all the nuances that are not used in an illustrator file?

    Any help would be great

    Look in the Actions Panel. It should be an action he who says to remove all unused items in the Panel.

  • Conversion of the white areas of the image transparent

    Hello

    I wonder how to convert transparent in all the white areas of the following image:

    john-is-40-black-and-white.png

    Essentially, I just created a rectangle black and white text and a star shape. I wish that all areas that are white to be transparent (including black areas under white) so that when I save the artboard in png format areas that are white color will be transparent.

    Someone would be able to help me achieve this in Illustrator CS5?

    Thank you

    Nick

    A simple example of piercing group:

    1. draw a black filled circle
    2. draw a small white circle filled, centered on top of the black circle
    3. Select the two and group
    4. in the transparency Panel, select the sharp group
    5. direct select the white circle with the direct Selection (white arrow) tool
    6. in the transparency Panel, set its opacity to 0%
    7. file > save for Web: choose PNG as the file format and select the transparency option

    Depending on the type of objects you use, there are faster ways like using Pathfinder commands or transparent traces. You can see the as files using these keywords in Illustrator.

  • Will be locked notes are removed during the signature of account

    What I was asking is will my locked notes get deleted out of my phone, when I connect to my apple account?

    The removal of the locked notes will be exactly the same as the removal of the unlocked notes.

Maybe you are looking for