Search the Community
Showing results for tags 'flexbox'.
Found 9 results
-
I saw an example in w3schools. they gave a percentage to flex-grow and I don't know how does it work? I thought that we can use just number for flex-grow and now I don't know what is the result of percentage value. I need to help... the example is here https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex
-
PROBLEM ::: .navbar >:nth-child(3){margin:auto; } hover is not working in the media quires. Is there any other solution for this code? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html>
-
BACKGROUND: I am inserting a div tag into an HTML document via Javascript and for some reason an ultra-specified flexwrap attribute is being suppressed. Other flexbox attributes contained within the same specification appear. It is baffling. CODE: section#middle #main #gctutor_div #heading #needhelp_flexbox { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flexwrap: wrap; } .needhelp_left { width: 48%; text-align: right; } .needhelp_right { width: 48%; } THE EXPERIENCE: You may experience this phenomenon by proceeding to tutor.grammarcaptive.com, clicking where it says, "Learn to navigate ...", and then narrowing the width of your screen. QUESTION: How does one account for the suppression? And, if possible, correct for it. Roddy
-
BACKGROUND: I have a flexbox (#contact_div) that creates a column of rows (.content_item). Each row represents another flexbox that is divided into two columns (.contact_info and .contact_data). Now, each row of columns is neatly spaced across the entire width of the parent #contact_div when in full-screen browser mode. As the width of the viewport is made smaller, however, spacing problems begin to arise. in smaller viewports the width of each row is no larger than that of the widest content contained in each of the two columns. I would like the columns to fill the entire width of the original box (contact_div). I have experimented with the flex statement, but to know avail. #contact_div { display: -webkit-flex; display: flex; flex-direction: column; justify-content: start; } .contact_item { display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .contact_info { padding: 0 1em; font-variant: small-caps; font-weight: bold; text-align:right; color: #4E7F4E; } .contact_data { padding: 0 1em; } You can find a visual display of the problem by clicking on the option Info in the Contact menu in the navigation bar of the Grammar Captive mainpage. After the panel has been inserted narrow your viewport and observe how the problem appears and then disappears as you narrow your viewport ever further. This problem does not appear to be smartphone related. CSS strikes again! QUESTION: Any ideas? Roddy -
I found code for a scrolling looping slideshow that I like but I can't get the div's to center. The div's seem to be left aligned with more space on the right side of the screen than left; this is evident on my 1366px monitor but much more obvious on a 1920px monitor where there is a lot of blank space on the right side of the screen. I have assigned display:flex to the parent and nested containers and center to align-items and justify-content, but the 2 main div's ("slider" and "wrapper_slider_text") are not centering. If anyone can help, I'd be very grateful. Thanks. <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { width: 100%; margin: 0 auto 0; } .flex-container-slider { display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 0px; justify-content: center; align-items: center; } .slider { width: 768px; height: 432x; overflow: hidden; } #slider_images { width : 9984px; height: 432px; overflow: hidden; /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */ animation: slide 36s infinite; -moz-animation: slide 36s infinite; -webkit-animation: slide 36s infinite; -o-animation: slide 36s infinite; } #slider_images img { float: left; } .container_blank_space_small p { text-indent: -9999px; height: 26px; } @keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-moz-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-webkit-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-o-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } .wrapper_slider_text { display: flex; width: 35%; overflow: hidden; min-height: 100%; justify-content: center; align-items: center; } .slider_text { font-family: "europa",sans-serif; font-size: 125%; color: black; font-weight: 500; line-height: 125%; padding: 75px; letter-spacing: .8px; font-weight: 600; } </style> </head> <body> <header> </header> <section class="flex-container-slider"> <div class="slider"> <!-- Each image is 768px by 432px --> <div id="slider_images"> <img src="http://bartonlewisfilm.com/img_768_water.jpg" alt="water" /> <img src="http://bartonlewisfilm.com/img_768_blue.jpg" alt="blue" /> <img src="http://bartonlewisfilm.com/img_768_robins_egg.jpg" alt="robins egg" /> <img src="http://bartonlewisfilm.com/img_768_23rd_st.jpg" alt="23rd st" /> <img src="http://bartonlewisfilm.com/img_768_broken_guru.jpg" alt="broken guru" /> <img src="http://bartonlewisfilm.com/img_768_i_will_miss_you.jpg" alt="i will miss you" /> <img src="http://bartonlewisfilm.com/img_768_pants.jpg" alt="pants" /> <img src="http://bartonlewisfilm.com/img_768_nose.jpg" alt="nose" /> <img src="http://bartonlewisfilm.com/img_768_swirls.jpg" alt="swirls" /> <img src="http://bartonlewisfilm.com/img_768_church_ave.jpg" alt="church ave" /> <img src="http://bartonlewisfilm.com/img_768_network_reality_stars.jpg" alt="network reality all stars" /> <img src="http://bartonlewisfilm.com/img_768_ports.jpg" alt="ports" /> <img src="http://bartonlewisfilm.com/img_768_kline.jpg" alt="kline" /> </div> </div> <div class="wrapper_slider_text"> <div class="slider_text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus diam odio, non dignissim lectus auctor vitae. Sed facilisis malesuada velit nec vehicula. Vivamus eleifend scelerisque faucibus. </p> <div class="container_blank_space_small"> <p>text</p> </div> <p>Mauris porttitor faucibus lorem, ut tincidunt justo dignissim eget. Nulla congue orci sit amet sem commodo, et volutpat lorem cursus. </p> </div> </div> </section> </body> </html>
-
BACKGROUND: Recently I designed a filler page that is called with AJAX. When the AJAX call is made a css style sheet is called in addition to the filler. For the most part the style-sheet appears to work. Even the styling for the flex-box that is included in the filler works in part. Simply, it appears to be breaking on inheritance, and I do not know how to override it. The HTML <div id='yp_container'> <div class='yp_item'> <div class='yp_param'>Visitor ID:</div> <div id='current_visitorId' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>IP Address:</div> <div id='current_visitIp' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>Total Visits:</div> <div id='current_totalVisits' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>City:</div> <div id='current_cities' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>Referral URL:</div> <div id='current_referral_url' class='yp_value'></div> </div><!-- end div.line_item --> </div><!-- end div#yp_container --> CSS Style-Sheet (Relevant Code Only) /*************************************************** Visitor Info (Flexbox) ***************************************************/ #yp_container { display: -webkit-flex; display: flex; flex-direction: column; width:100%; } .yp_item { display: -webkit-flex; display: flex; flex-direction: row; justiy-content: space-between; } .yp_param { text-align: -webkit-right; text-align: -moz-right; padding-right: 2em; } .yp_value { text-align: -webkit-left; text-align: -moz-left; } You may observe the result by clicking on the words Your Profile under the sub-heading User Profile in the Grammar Captive navigation bar. Roddy
-
BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
-
BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
-
Helloin this page, in wich I used fullpage.js, I have some issues with (i think) the flexbox with safari and with android browser (portrait view). The boxes are overlapped and not stacked. Is it possible to fix this problem? thanks Luigi
