Hi I'm trying to make my nav_list class is not responsive i have used the following code, but when I test on browser it isn't responsive gets cut from view.
/*queries*/
#media only screen and (max-width: 1200px) {
.nav_list {
width: 100%;
padding: 0 2%;
}
}
/*css*/
.top_nav {
display: flex;
}
.nav_list {
display: inline-flex;
list-style: none;
margin-right: 150px;
}
<header>
<nav>
<ul class="nav_list">
<li class="nav_list_item"><a>Sign in</a></li>
<li class="nav_list_item"><a>What is Shi</a></li>
<li class="nav_list_item"><a>Sign up</a></li>
</ul>
</nav>
</header>
What you need is media query and flex-direction: column.
For example, if overflow occur in 768px, then you would need to change your flex direction from row (default) to column view.
.nav_list {
display: flex;
}
#media (max-width: 767.98px) {
.nav_list {
flex-direction: column;
}
}
Or a smarter way flex-wrap:
.nav_list {
display: flex;
flex-wrap: wrap;
}
Related
I have an ul element (one of three on the page) that I don't want to be shown on mobile devices. I'm trying to apply display: none; to it but it doesn't work.
The code isn't mine, I just used a template from the internet, so go easy on me, plz
Html part
<section id="banner" class="major">
<div class="inner">
<header class="major">
<h1>This the title</h1>
</header>
<div class="content">
<p> and some text here </p>
<ul class="actions">
<li>A button</li>
</ul>
</div>
</div>
</section>
What I have in CSS
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 1.3em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 1em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
}
ul.actions are used for different buttons throughout the page: one that I showed you in the html part and two other buttons to fill out a form.
So, I'm adding this bit of code but it just won't work
#media screen and (max-width: 480px) {
#banner .actions {
display: none;
}
}
You have used this code in wrong CSS file.
Please use right approch:
Your mentioned URL have this CSS
https://html5up.net/uploads/demos/forty/assets/css/main.css
The media query #media screen and (max-width: 480px) is mentioned in this css. Please go there
Please use this bit of code in this media query
#banner .actions {
display: none;
}
The code seems to work fine, I am not sure if you opened the page on the mentioned browsers before doing some code editing. In that case, clearing the caches could help.
That code works fine.
If this is not work fine on you site It seems like any other declaration overriding this declarations.
When an important rule is used on a style declaration, this declaration overrides any other declarations.
Please use CSS rule with !important and check after Clear your cache.
#media screen and (max-width: 480px) {
#banner .actions {
display: none !important;
}
}
The code snippet below technically achieves the goal of having a footer that has layout for wide and small screens as seen in the images below.
My question, am I using flex box correctly? Is there a more optimal way to achieve the desired result as seen in the images? I ask as my css feels verbose and I'd like to learn if there's a better way.
WIDE Screen:
SMALL Screen:
.appFooter {
display: flex;
flex-flow: wrap;
justify-content: space-between;
text-align: center;
}
.appFooter ul.navigation {
margin: 0 0 48px 0;
padding: 0;
list-style: none;
}
.appFooter > * {
flex: 1 100%;
}
#media only screen and (min-width: 900px) {
.appFooter {
display: flex;
flex-flow: row wrap;
}
.appFooter ul.navigation {
margin: 0;
order: 2;
text-align: right;
}
.appFooter ul.navigation li {
display: inline;
margin-right: 20px;
}
.appFooter ul.navigation li:last-child {
margin-right: 0;
}
.appFooter .copyright {
order: 1;
text-align: left;
}
.appFooter > * {
flex: 1;
}
}
<footer class="appFooter">
<ul class="navigation">
<li>Contact Us</li>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
<div class="copyright">
<span>© 2018 Site</span>
</div>
</footer>
Yes, I would say there's room for simplification in your code (both the CSS and HTML).
This should be all you need:
.appFooter {
text-align: center;
}
.navigation {
display: flex;
flex-direction: column;
margin-bottom: 48px;
}
#media (min-width: 900px) {
.appFooter {
display: flex;
justify-content: space-between;
}
.navigation {
flex-direction: row;
order: 1;
margin: 0;
}
.navigation a + a {
margin-left: 20px;
}
}
<footer class="appFooter">
<nav class="navigation">
Contact Us
Terms of Service
Privacy Policy
</nav>
<div class="copyright">© 2018 Site</div>
</footer>
https://jsfiddle.net/1sw59n4v/
For your desktop view, you don't need to worry about all the order and text-align declarations, as you can achieve the same result with flex-direction: row-reverse. Keep in mind that you'll still want to allow the elements to span a single line, you'll additionally need to remove the flex on the children with flex: inherit.
Also keep in mind that with your example, you have things like display: flex in the media query. These don't need to be re-declared in the media query, as the rules are inherited :)
Here's an example using flex-direction: row-reverse that cuts out the re-declarations:
.appFooter {
display: flex;
flex-flow: wrap;
justify-content: space-between;
text-align: center;
}
.appFooter ul.navigation {
margin: 0 0 48px 0;
padding: 0;
list-style: none;
}
.appFooter > * {
flex: 1 100%;
}
#media only screen and (min-width: 900px) {
.appFooter {
flex-direction: row-reverse;
}
.appFooter > * {
flex: inherit;
}
.appFooter ul.navigation li {
display: inline;
margin-right: 20px;
}
.appFooter ul.navigation li:last-child {
margin-right: 0;
}
}
<footer class="appFooter">
<ul class="navigation">
<li>Contact Us</li>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
<div class="copyright">
<span>© 2018 Site</span>
</div>
</footer>
This cuts out more than half of your media query declarations, giving the exact same result.
Hope this helps! :)
You can optimize/shorten that code quite a bit, and at the same time increase its render flexibility.
By simply remove all elements but the actual links a and the copyright span, you easily control both their stacking/render order and alignment.
Initially set:
flex-direction: column, vertical direction
margin: 48px 0 0 0, top margin for copyright
With the media query:
flex-direction: row, switch to horizontal direction
order: -1, position the copyright first in order, enable it to align left
margin: 0 auto 0 0, reset top and push the links to the right by make its right margin "auto"
Stack snippet
.appFooter {
display: flex;
flex-direction: column;
align-items: center;
}
.appFooter span {
margin: 48px 0 0 0;
}
#media only screen and (min-width: 900px) {
.appFooter {
flex-direction: row;
}
.appFooter span {
order: -1;
margin: 0 auto 0 0;
}
.appFooter a + a {
margin-left: 10px;
}
}
<footer class="appFooter">
Contact Us
Terms of Service
Privacy Policy
<span>© 2018 Site</span>
</footer>
If you still want to wrap the links, just add its selector to the .appFooter {...} rule.
Stack snippet
.appFooter, .appFooter nav {
display: flex;
flex-direction: column;
align-items: center;
}
.appFooter span {
margin: 48px 0 0 0;
}
#media only screen and (min-width: 900px) {
.appFooter, .appFooter nav {
flex-direction: row;
}
.appFooter span {
order: -1;
margin: 0 auto 0 0;
}
.appFooter a + a {
margin-left: 10px;
}
}
<footer class="appFooter">
<nav>
Contact Us
Terms of Service
Privacy Policy
</nav>
<span>© 2018 Site</span>
</footer>
I'm trying to create a very basic navigation bar with a horizontal unordered list and flexbox, but my list items are being shifted to the right and I don't understand why.
In my example, I want the list items to be grouped together and centered in the smaller viewport, and evenly distributed in the larger one.
This works as expected, except everything seems shifted slightly to the right. So in the smaller viewport, the content is never quite centered, and in the larger viewport, there's a gap before my first list item.
Using a negative margin helps me in the larger viewport, but not the smaller one.
I'm very new to CSS, so I may have missed something obvious.
.container {
display: flex;
flex-flow: row;
justify-content: space-between;
display: flex;
list-style: none;
background: black;
}
.container a {
text-decoration: none;
color: white;
background: red;
}
#media all and (max-width: 600px) {
.container {
justify-content: center;
}
.container a {
padding: 10px;
}
}
<div>
<ul class="container">
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>
Codepen
ul elements (your container) has a default padding you need to set to 0.
.container {
display: flex;
justify-content: space-between;
list-style: none;
background: black;
padding: 0; /* added property */
}
.container a {
text-decoration: none;
color: white;
background: red;
}
#media all and (max-width: 600px) {
.container {
justify-content: center;
}
.container a {
padding: 10px;
}
}
<div>
<ul class="container">
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>
I want to break a unordered list using CSS. What i currently have is this
What i require is this
Scenario after Marcus code
Here is the html
<div class="tab-content">
<div class="tab-content-block">
<div class="home-subheading">'Functional Requirement Documents'</div>
<ul style="list-style: none;">
<li><a href="https://prod.us/System_Functionality/Functional_
Requirement_Documents/Agent_and_Commission">'Agent and Commission'</a></li>
<li><a similar other 21 li</a></li>
</ul>
</div>
Here's the CSS
tab-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
margin-left: 2.2em;
}
.tab-content-block {
padding: 0 1em 1em .5em;
min-width: 25%;
}
.tab-content-block ul li {
margin-bottom:10px;
margin-left:-17px;
}
You can use columns only in the <ul>.
.tab-content-block ul {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
See it working:
https://jsfiddle.net/hrm3tx9j/1/
Change the flex-direction to column and give flex-wrap
tab-content {
display: flex;
flex-direction: column;
height: 500px;
flex-wrap: wrap;
justify-content: left;
margin-left: 2.2em;
}
It will be great if you provide a Demo link of jsFiddle or Plunkr.
I have the following code for flexbox and it works perfectly in Chrome and Firefox, however it's not effective in Safari(any version). I have tried specific prefixes but couldn't achieve the same simple order. What should I modify/add for Safari so it will work normal like Chrome and Firefox?
JSFiddle
.container {
display: -webkit-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
flex-direction: row;
-webkit-flex-direction: row;
list-style:none;
}
li {
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
-webkit-flex-grow: 3;
flex-grow: 3;
}
<ul class="container">
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
</ul>
Safari 5 (the latest windows version of safari) only supports flexbox with the old syntax and with the -webkit- prefix. (display:-webkit-box)
http://caniuse.com/#search=flexbox
.container {
display: -webkit-box; /*safari*/
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap; /* Safari 6.1+ */
justify-content: space-around;
flex-direction: row;
-webkit-flex-direction: row;
list-style:none;
}
li {
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
flex-grow: 3;
}
<ul class="container">
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
</ul>
Safari 5 does also not support wrapping, so the responsiveness won't be there. safari 6.1+ does support this property using the -webkit- prefix, but it's only available for mac.
If you really want the responsiveness, you could try to make a grid with media queries and floats. here's an example i made:
https://jsfiddle.net/pvLsw09u/2/
.container {
list-style:none;
width:100%;
overflow: hidden;
padding:0;
background: salmon; /*same color as border. just to look better*/
}
.container li {
box-sizing:border-box;
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
width:100%;
float:left;
margin:0;
}
/*media queries*/
#media (min-width: 480px)
{
.container li {
width: 50%;
}
}
#media (min-width: 640px)
{
.container li {
width: 33%;
}
}
#media (min-width: 768px)
{
.container li {
width: 25%;
}
}
#media (min-width: 1024px)
{
.container li {
width: 20%;
}
}
#media (min-width: 1280px)
{
.container li {
width: 15%;
}
}
#media (min-width: 1824px)
{
.container li {
width: 10%;
}
}
/*etc...*/
<ul class="container">
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
</ul>
It's not as perfect as flexbox, but it's a good replacement.
The best thing you can do, is combine flexbox and the responsive grid using modernizr.
you make your styles with flexbox, but when modernizr detects .no-flexbox, you can use the responsive grid as a fix (or use the grid, and when modernizr detects .flexbox, use flexbox. you can choose)
http://jsfiddle.net/msf67Lum/
.container {
list-style:none;
width:100%;
overflow: hidden;
padding:0;
background: salmon; /*same color as border. just to look better*/
/*flexbox*/
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
flex-direction: row;
-webkit-flex-direction: row;
}
.container li {
box-sizing:border-box;
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
margin:0;
flex-grow: 3;
}
.no-flexbox .container li
{
width:100%;
float:left;
}
/*media queries*/
#media (min-width: 480px)
{
.no-flexbox .container li {
width: 50%;
}
}
#media (min-width: 640px)
{
.no-flexbox .container li {
width: 33%;
}
}
#media (min-width: 768px)
{
.no-flexbox .container li {
width: 25%;
}
}
#media (min-width: 1024px)
{
.no-flexbox .container li {
width: 20%;
}
}
#media (min-width: 1280px)
{
.no-flexbox .container li {
width: 15%;
}
}
#media (min-width: 1824px)
{
.no-flexbox .container li {
width: 10%;
}
}
/*etc...*/
<!--make sure to include modernizr!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<ul class="container">
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
</ul>
this example works with flexbox when it's supported, but in safari (or when not supported) it's done with the grid
You need to add a webkit prefix for display:
display: -webkit-flex;
https://css-tricks.com/using-flexbox/
http://caniuse.com/#feat=flexbox