iwato Posted September 10, 2018 Share Posted September 10, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2018 Share Posted September 11, 2018 That is what using float on middle section will do, it will shrink to total width of the contact content, and the flex can only work to available width of its parent container element the middle section element. Link to comment Share on other sites More sharing options...
iwato Posted September 11, 2018 Author Share Posted September 11, 2018 So, if I change the value of the float property for the #middle section to none for smaller viewports, the problem will go away. Is this what you are suggesting? Roddy Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2018 Share Posted September 11, 2018 Yes! you have it twice in media queries 1 floats left the other right, these need to cancelled when it becomes single column. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2018 Share Posted September 11, 2018 I've just notice, when I gradually reduce the width of my browser before it reached a media queries breakpoint, scroll bars appear? that is not supposed to happen. It should smoothly move from one to the other with no scrollbars appearing, that usually means you have fixed width content, or containers which will remain greater than the next Media Query break point. It should on whatever width adjust accordingly to a responsive layout before that break point is reached, then it does not matter what specific device width it is. 1 Link to comment Share on other sites More sharing options...
iwato Posted September 13, 2018 Author Share Posted September 13, 2018 Dsonesuk: You are the Wizard of CSS. By setting float to none my Contact/Info page now fills the entire width of the #middle section. Thank you! Roddy Link to comment Share on other sites More sharing options...
iwato Posted September 13, 2018 Author Share Posted September 13, 2018 I will need some more time for your last observation, as I cannot replicate what you have described. All of my browsers are very old, and my operating system is obsolete. Also, I am very tired. it has been a long day. Something to investigate again tomorrow! In any case, thank you! Roddy Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now