Search the Community
Showing results for tags 'browser window'.
Found 2 results
-
I wrote media queries which until recently worked - the images are still resizing but for some reason the text has stopped resizing when I make the window smaller. I don't know what I might have done to render them non-functionable. Can anyone spot what it might be? Thank you very much. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton's wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, paragraph { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*THIS IS THE END OF THE MYER RESET*/ * {box-sizing: border-box;} body { width: auto; margin: 0 auto 0; } .parallax { /* The image used */ background-image: url("img_bckgd_windows_7283_1920-4.jpg"); /* Set a specific height */ height: auto; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: repeat; background-size: cover; padding-bottom: 1%; } h1 { font-family: "europa",sans-serif; font-size: 3.6em; letter-spacing: .3em; text-align: center; color: black; padding: 5% 0; padding-top: 7%; } h2 { font-family: "europa",sans-serif; font-size: 2.8em; color: black; letter-spacing: .2em; text-align: center; padding-bottom: 5%; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .main { width: auto; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; } .browse { width: 20%; margin: 0 5%; } h3 { font-family: "europa",sans-serif; font-size: 2em; letter-spacing: 1.5px; text-align: center; color: 4d4d4d; border-bottom: 2px solid #c30505; padding: 10% 0; } h4 { font-family: "europa",sans-serif; font-size: 1.7em; letter-spacing: 1px; text-align: left; color: 4d4d4d; font-variant: small-caps; padding: 10% 0; } p.indent1 { text-indent: 1em; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.4em; color: black; display: block; margin: 0; } /* CSS FOR SLIDESHOW */ .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { display: flex; justify-content: center; width: ; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } /* END OF CSS FOR SLIDESHOW */ .indent { text-indent: -9999px; } .about { width: 66%; margin: 0 auto; margin-top: 5%; } .about p { padding: 15px; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.75em; color: black; } .underline { text-decoration: underline; font-variant: small-caps; font-size: 1.1em; } a:hover { text-decoration: underline; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 1.1em; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; width: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 1.1em; letter-spacing: .8px; line-height: 135%; font-weight: 500; } /*---------------MEDIA!!!------------*/ @media screen and (max-width: 768px) { html { width: 100%; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1em; } h4 { font-size: 1em; } p.indent1 { font-size: .8em; } div.nav a { font-size: 1.3em; } div.about p { font-size: 1em; } } @media screen and (max-width: 1366px) { html { width: 100%; } h1 { font-size: 2.6em; } h2 { font-size: 2.2em; } h3 { font-size: 1.6em; } h4 { font-size: 1.3em; } p.indent1 { font-size: 1em; } div.nav a { font-size: 1.3em; } div.about p { font-size: 1.25em; } } </style> </head> <body> <div class="parallax"> <div> <h1>Barton Lewis</h1> <h2>wall cuts</h2> </div> <section class="flex-container"> <div class="nav"><a href="index.html" title="home">home</a></div> <div class="nav"><a href="bartons_film_site_works.html" title="works">works</a></div> <div class="nav"><a href="bartons_film_site_bio.html" title="bio">bio</a></div> <div class="nav"><a href="bartons_film_site_cv.html" title="c/v">c/v</a></div> <div class="nav"><a href="bartons_film_site_contact.html" title="contact">contact</a></div> </section> </div> <section class="main"> <div class="browse"> <h3>Browse</h3> <h4>By color</h4> <p class="indent1"><a href="photography_gallery_color_earth_tones.html" title="Earth tones">Earth tones</a></p> <p class="indent1"><a href="photography_gallery_color_yellows_&_greens.html" title="yellows and greens">Yellows and greens</a></p> <p class="indent1"><a href="photography_gallery_color_purples_&_blues.html" title="purples and blues">Purples and blues</a></p> <p class="indent1"><a href="photography_gallery_color_blacks.html" title="blacks">Blacks</a></p> <h4>By style</h4> <p class="indent1"><a href="photography_gallery_style_ab-ex.html" title="Ab-Ex">Ab-Ex</a></p> <p class="indent1"><a href="photography_gallery_style_color_field.html" title="Color field">Color Field</a></p> <p class="indent1"><a href="photography_gallery_style_graphical.html" title="Graphical">Graphical</a></p> <h4>By size / format</h4> <p class="indent1"><a href="photography_gallery_size_portrait.html" title="Portrait">Portrait</a></p> <p class="indent1"><a href="photography_gallery_size_landscape.html" title="Standard">Landscape</a></p> <p class="indent1"><a href="photography_gallery_size_oversize.html" title="Oversize">Oversize</a></p> </div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 8</div> <img src="http://bartonlewisfilm.com/img_287-163.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 8</div> <img src="http://bartonlewisfilm.com/img_162-373.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 8</div> <img src="http://bartonlewisfilm.com/img_coors_light.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 8</div> <img src="http://bartonlewisfilm.com/img_287-135.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">5 / 8</div> <img src="http://bartonlewisfilm.com/img_214-041.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">6 / 8</div> <img src="http://bartonlewisfilm.com/img_157-245.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">7 / 8</div> <img src="http://bartonlewisfilm.com/img_in_theaters.JPG" style="max-width: 100%" alt="in theaters, Elmhurst Ave., IND Queens Blvd. Line " style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">8 / 8</div> <img src="http://bartonlewisfilm.com/img_287-159.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> </div> <div class="browse"> <p class="indent">Oversize</p> </div> </section> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="about"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 3000); // Change image every 3 seconds } </script> <footer> <div class="flex-container-footer"> <div> <p>copyright © 2018 by Barton Lewis</p> </div> <div class="social"> <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a> <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a> </div> </div> </footer> <script> </script> </body> </html>
-
The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}
