Ändern einer festen Website in fließend (CSS)

Question

Ich bin derzeit am Entwickeln einer Website zu reagieren. Ich bin neu in CSS. Ich habe einen Plan, um @media Breakpoints einzuschließen, damit dies geschieht. Bevor die Auflösung einen Haltepunkt erreicht, möchte ich wirklich, dass die gesamte Website flüssig ist und "auf den Bildschirm passt", anstatt so fixiert zu sein wie sie ist.

Da diese Website von jemand anderem kodiert wurde, bevor sie mir übergeben wurde, bin ich nicht sicher, wo ich anfangen soll, sie zu ändern. Jede Hilfe würde sehr geschätzt werden.

@charset "UTF-8"; /* CSS Dokument */

/*Vivid Global Styling*/ 
html { 
    height: 100%; 
} 
body { 
    margin:0px; 
    padding:0px; 




    } 
h1,h2,h3,h4,h5,h6,p,ul,li,span { 
    margin:0px; 
    padding:0px; 
    } 
h1 { 
    margin:0 0 14px 0; 
    } 
h2 { 
    margin:0 0 10px 0; 
    } 
.wht { 
    color:#fff; 
    } 
.clear { 
    clear:both; 
    } 
/*Vivid Page Settings*/ 
header { 
    width:100%; 
    background-color:#fff; 
    border-bottom:#000 1px solid; 
    } 
.vd-hide { 
    display:none; 
    } 
.vd-settings-wrapper { 
    width:15%; 
    max-width:200px; 
    } 
.vd-user-settings { 
    width:48px; 
    height:48px; 
    border:1px solid #000; 
    background-color:#fff; 
    float:left; 
    margin: 12px 2px 0 21px; 
    } 
.vd-currency-selector { 
    width:58px; 
    height:21px; 
    border:1px solid #000; 
    background-color: #fff; 
    float:left; 
    margin: 12px 2px 1px 2px; 
    } 
.vd-language-selector { 
    width:58px; 
    height:21px; 
    border:1px solid #000; 
    background-color: #fff; 
    float:left; 
    margin:3px 2px 0 2px; 
    } 

/*Vivid Main Navigation*/ 
.vd-nav-wrapper { 
    width:75%; 
    height:78px; 
    margin:0 auto; 
    text-align:center; 
    } 
.vd-nav-wrapper ul { 
    font-family: 'Montserrat', sans-serif; 
    text-align:center; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    } 
.vd-nav-wrapper li { 
    text-decoration:none; 
    list-style:none; 
    display:inline-block; 
    margin: 22px 20px; 
    vertical-align: middle; 
    } 
.vd-nav-wrapper a { 
    text-decoration:none; 
    list-style:none; 
    display:inline-block; 
    margin: 18px 20px; 
    vertical-align: middle; 
    } 
.vd-logo-img { 
    margin:0px; 
    padding:0px; 

    } 
/*Vivid Checkout Settings*/ 
.vd-cart-wrapper { 
    width:10%; 
    z-index:10; 
    } 
.vd-cart-selector { 
    width: 48px; 
    height: 48px; 
    border: 1px solid #000; 
    background-color: #fff; 
    margin: -11px 31px 0 2px; 
    position: absolute; 
    top: 23px; 
    right: -9px; 
    } 

/*Vivid Main Wrapper*/ 

.vd-page-container { 
    max-width: 100%; 
    margin:0 auto; 
    height: auto; 
    } 

/*Vivid Grid*/ 
.vd-grid h1,h2,h3,h4,h5,h6 { 
    font-family: 'Montserrat', sans-serif; 
    line-height:32px; 
    color:#fff; 
    } 
.vd-grid p,span { 
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    line-height:17px; 
    font-size:0.85em; 
    margin:0; 
    padding:0; 
    color:#fff; 
    } 
.vd-grid h1 { 
    margin:0; 
    padding:0; 
} 
.vd-grid h2 { 
    font-size:1.2em; 
    margin:0 0 4px 0; 
    } 
.vd-grid h3 { 
    margin:4px 0 4px 0; 
    } 
.vd-grid h4 { 
    margin:4px 0 4px 0; 
    } 
.vd-grid { 
    width:1262px; 
    margin:13px auto; 

    } 
.vd-grid-left-col { 
    width:980px; 
    float:left; 
    } 
.vd-grid-right-col { 
    width:265px; 
    float:left; 
    } 
.vd-grid-main-box { 
    width: 920px; 
    height: 460px; 
    background-color: #000029; 
    padding: 20px 30px; 
    } 
.vd-grid-main-box img { 
    width:100%; 
    height:auto; 
    position:absolute; 

    } 
.vd-grid-sub-box { 
    width:270px; 
    height:146px; 
    background-image:url(../img/granda_hj.jpg); 
    background-size:cover; 
    background-position:top center; 
    background-color:#000029; 
    float:left; 
    padding: 15px 25px; 
    margin:0 0 15px 0; 
    } 
.vd-grid-xtra-box { 
    width:225px; 
    height:318px; 
    background-image:url(../img/tst_img.jpg); 
    background-size:cover; 
    background-position:center center; 
    background-color:#000029; 
    padding: 10px 20px; 
    } 
.vd-text-wrap { 
    width:100%; 
    position:relative; 
    top:340px; 
    left:0px; 
    } 
.vd-margin-top { 
    margin-top:10px; 
    } 
.vd-margin-right { 
    margin-right:10px; 
    } 
.vd-margin-left { 
    margin-left:10px; 
    } 
.vd-margin-bottom { 
    margin-bottom:10px; 
    } 
/*Vivid Footer*/  
.vd-footer { 
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    line-height:16px; 
    padding: 0 30px; 
    padding-bottom: 55px; 
    width: 100%; 
    background-color: #000029; 
    -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
} 
.vd-widget-area { 
    padding: 15px 0 10px; 
    border-top: 0px solid #e5e5e5; 
    max-width: 1260px; 
    margin: 0 auto 0px; 
} 
.vd-footer-text { 
    display: inline-block; 
    vertical-align: top; 
    width: 26%; 
    padding-right: 60px; 
    font-size: 12px; 
    color: white; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.vd-footer-links { 
    display: inline-block; 
    vertical-align: top; 
    padding: 0 30px 25px 0; 
    width: 12%; 
    line-height:22px; 
    font-size: 12px; 
    color: white; 
} 
.vd-footer-links ul { 
    margin: 0; 
    padding: 0; 
    list-style: outside none; 
    display: block; 
    vertical-align: top; 
} 
.vd-footer-links li { 
    font-size: 12px; 
    color: white; 
    text-decoration:none; 
    } 
.vd-footer-links a { 
    font-size: 12px; 
    color: #ccc; 
    text-decoration:none; 
    } 
.vd-footer-links a:hover { 
    font-size: 12px; 
    color: white; 
    } 
.vd-footer-title { 
    font-family: 'Montserrat', sans-serif; 
} 
.vd-signup { 
    display: inline-block; 
    max-width: 305px; 
    width: 26%; 
    font-size: 12px; 
} 
.vd-sub-footer { 
    border-top: 1px solid #e5e5e5; 
    padding-top: 25px; 
    margin-top: 0px; 
    font-size: 0; 
    max-width: 1260px; 
    margin: 0 auto; 
} 
/*Vivid Payment Icons*/ 
.vd-payment-icon { 
    font-size: 20px; 
    vertical-align: middle; 
    line-height: 1.2; 
    color: #a7a7a7; 
} 
.vd-footer-linklist .vd-social-icon:before { 
    font-size: 16px; 
    width: 16px; 
    text-align: center; 
    margin-right: 5px; 
    font-family: 'Social Icons'; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1; 
    font-weight: normal; 
    font-style: normal; 
    speak: none; 
    text-decoration: inherit; 
    text-transform: none; 
    text-rendering: optimizeLegibility; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.vd-payment-options { 
    float: right; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    text-align: right; 
    font-size: 12px; 
    text-decoration:none; 
    display:block; 
    list-style: outside none; 
} 

.vd-payment-options ul { 
    display:block-inline; 
    list-style-type:outside none; 

} 
.vd-payment-options li { 
    display:block-inline; 
    float:right; 
    padding: 0 0 0 10px; 
    list-style-type:outside none; 

} 
.american-express:before { 
    content: "\f001"; 
} 
.bitcoin:before { 
    content: "\f006"; 
} 
.jcb:before { 
    content: "\f028"; 
} 
.master:before { 
    content: "\f02d"; 
} 
.paypal:before { 
    content: "\f033"; 
} 
.visa:before { 
    content: "\f045"; 
} 
/*Vivid Copyright*/ 
.vd-copyright-wrapper { 
    float: left; 
    margin: 0; 
    width: 50%; 
    font-size: 12px; 
    color: white; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
} 

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<title>Vivid Shop Display</title> 
<link rel="stylesheet" href='css/vivid-style.css'> 
<link rel='stylesheet' href='css/scroller.css'> 
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
</head> 

<body> 
<header> 
<div class="vd-navigation-wrapper"> 
    <div class="vd-settings-wrapper"> 
     <div class="vd-user-settings"> 
     </div> 
     <div class="vd-currency-selector"> 
     </div> 
     <div class="vd-language-selector"> 
     </div> 
    </div> 
    <div class="vd-nav-wrapper"> 
      <ul> 
       <li>Shop</li> 
       <li>About</li> 
       <li class="vd-logo-img"><img src="img/vivid_logo.png"/></li> 
       <li>Lookbook</li> 
       <li>Contact</li> 
      </ul> 
    </div> 
     <div class="vd-cart-wrapper"> 
     <div class="vd-cart-selector"></div> 
     </div> 

</div> 

<!--Mobile Navigation--> 
    <nav class="vd-hide"> 
    <div class="header-top clearfix"> 
    <a class="nav toggle-menu" href="#"> 
     <i></i> 
     <i></i> 
     <i></i> 
    </a> 
    <h1 class="logo"><a href="#firstSection"><img src="img/harva_logo.png"/></a></h1> 
    </div> 
    <ul id="menu"> 
     <li data-menuanchor="firstSection"> 
     <a href="#firstSection" title="First Section">First Section</a> 
     </li> 
     <li data-menuanchor="secondSection"> 
     <a href="#secondSection" title="Second Section">Second Section</a> 
     </li> 
     <li data-menuanchor="thirdSection"> 
     <a href="#thirdSection" title="Second Section">Third Section</a> 
     </li> 
     <li data-menuanchor="fourthSection"> 
     <a href="#fourthSection" title="Fourth Section">Fourth Section</a> 
     </li> 
     <li data-menuanchor="fifthSection"> 
     <a href="#fifthSection" title="First Slide">First Slide</a> 
     </li> 
     <li data-menuanchor="fifthSection/1"> 
     <a href="#fifthSection/1" title="Second Slide">Second Slide</a> 
     </li> 
    </ul> 
    </nav> 
    </div> 
</header> 
<!--End Mobile Navigation--> 

<div class="vd-page-container"> 
<div class="vd-grid"> 
    <div class="vd-grid-left-col"> 
    <div class="vd-grid-main-box vd-margin-bottom"> 
    <div class="vd-text-wrap"> 
     <h1>Header Text</h1> 
     <h2>Secondary Title</h2> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
</div> 
    </div> 
    <div class="vd-grid-sub-box"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    <div class="vd-grid-sub-box vd-margin-right vd-margin-left"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    <div class="vd-grid-sub-box"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    </div> 
    <div class="vd-grid-right-col vd-margin-left"> 
    <div class="vd-grid-xtra-box"> 
     <h4>Header Text</h4> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
     <div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom"> 
    <h4>Header Text</h4> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    </div> 
</div> 
</div> 
<div class="clear"></div> 
    <footer class="vd-footer"> 
     <div class="vd-widget-area"> 
     <div class="vd-footer-text"> 
      <h4 class="vd-footer-title">V I V I D - SHOPIFY THEME</h4> 
      <div class="rte">V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!</div> 
     </div> 
      <div class="vd-footer-links"> 
       <h4 class="vd-footer-title">HELP</h4> 
      <ul> 
       <li><a class="" href="#">HELP | FAQ'S</a></li> 
       <li><a class="" href="#">RETURNS</a></li> 
       <li><a class="" href="#">HOW TO SHOP</a></li> 
       <li><a class="" href="#">CONTACT US</a></li> 
       <li><a class="" href="#">STOCKISTS</a></li> 
      </ul> 
      </div> 
     <div class="vd-footer-links"> 
      <h4 class="vd-footer-title">POLICIES</h4> 
      <ul> 
       <li><a class="" href="#">DELIVERY &amp; RETURNS POLICY</a></li> 
       <li><a class="" href="#">TERMS &amp; CONDITIONS</a></li> 
       <li><a class="" href="#">PRIVACY POLICY</a></li> 
       <li><a class="" href="#">SECURITY POLICY</a></li> 
      </ul> 
      </div> 
    <div class="vd-footer-links"> 
     <h4 class="vd-footer-title">CONNECT</h4> 
      <ul> 
       <li><a class="vd-social-icon facebook" href="#" target="_blank">FACEBOOK</a></li> 
       <li><a class="vd-social-icon twitter" href="#" target="_blank">TWITTER</a></li> 
       <li><a class="vd-social-icon instagram" href="#" target="_blank">INSTAGRAM</a></li> 
       <li><a class="vd-social-icon vimeo" href="#" target="_blank">VIMEO</a></li> 
      </ul> 
      </div> 
     <div class="vd-signup"> 
      <h4 class="vd-footer-title">SIGN UP TO OUR NEWSLETTER</h4> 
      <div class="wht">HTML Block to be added here for embedded email capture forms</div> 
     </div> 
    </div> 
    <div class="vd-sub-footer"> 
     <ul class="vd-payment-options"> 
      <li class="vd-payment-icon american-express"></li> 
      <li class="vd-payment-icon bitcoin"></li> 
      <li class="vd-payment-icon jcb"></li> 
      <li class="vd-payment-icon master"></li> 
      <li class="vd-payment-icon paypal"></li> 
      <li class="vd-payment-icon visa"></li> 
     </ul> 
    <div class="vd-copyright-wrapper"> 
     <p class="vd-copyright">Copyright © 2017 V I V I D Themes.</p> 
     <p class="vd-attribution">"Virtual Visual Merchandising"</p> 
    </div> 
    </div> 
</footer> 
</body> 
</html> 

Answer 1

Wenn @media dieser Teil nur für verwendet verwenden werden, was auch immer Medien, die Sie angeben.

Da Sie speziell nach Break-Points gefragt haben, könnte Ihnen das helfen: Behalten Sie Ihre CSS so wie sie ist, und fügen Sie dann Eigenschaften für niedrigere Bildschirmgrößen hinzu/überschreiben.

Ein Beispiel sei (am Ende Ihrer css):

@media (max-width: 600px) { 
    .vd-grid-sub-box { 
    clear: left; 
    width: 100%; 
    } 

https://jsfiddle.net/etkz6zrv/

Hoffentlich können Sie auch diese an den anderen Wähler zu übernehmen (mit einer wenig Geduld).