EDIT: Resolved!
EDIT: Kevin's answer resolves the issue; however, it's not clear to me why the float declaration within the #media query doesn't work. Any thoughts would be appreciated--
I have two data sets which are semantically one, chronological list. On tablets and browsers, I'd like to display these lists as two separate columns. On a phone or smaller screens, I'd like to collapse the two columns into a single column preserving their chronological order. A solution which preserves the chronological ordering of the elements is an ordered list which I style to create the appearance of two columns; e.g. here is a fiddle demonstrating that solution.
Basically, I have an ordered list whose list elements have one of two classes (.left or .right) which cause them to float to the left and right, and I have a set of #media-queries which creates the responsive behavior I want. The issues is that while I can float them left and right, I don't know how to create the vertical flow I want. e.g. in that fiddle, I have a list,
<body>
<ol>
<li class='left'>Left 1 <br> Left 1 continued </li>
<li class='right'>Right 1</li>
<li class='right'>Right 2</li>
<li class='left'>Left 2</li>
</ol>
</body>
which is styled simply,
<style>
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
#media (min-width: 50em) {
body {
width: 50em
}
li {
width: 45%
}
}
#media (max-width: 50em) {
li {
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
}
li {
display: inline-block;
}
li.left {
background-color: blue;
}
li.right {
background-color: red;
}
</style>
But, with that, the content in the right column appears shifted down--as below:
instead of what I actually want, which would look something like this:
I know that I can implement this as two separate columns/divs which are re-ordered by JavaScript on a smaller screen, but I was wondering if there was a way which would preserve the semantic aspect of their ordering while avoiding the vertical flow issues here?
Thanks!
your fiddle
The problem is that those elements were not floating elements.
Giving them the float property in that particular media query simply doesn't work as you expected. Check now, it should go. Just enlarge the window of the fiddle.
Your new CSS
#media (max-width: 50em) {
li {
width: 100%;
}
}
li.left {
float:left;
background-color: blue;
}
li.right {
float:right;
background-color: red;
}
Here is quite a bit of a different attemp. Maybe it fits your need.
http://jsfiddle.net/NicoO/vyMWS/2/
your question is quite confusing, you should have not put the phrases left and right into your image, but: start story 1 + end story 1 etc.
ol
{
margin: 0;
padding: 0;
list-style-type: none;
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
ol li
{
background-color: blue;
display: block;
}
ol li:nth-child(2n)
{
background-color:red;
}
#media (max-width: 50em) {
ol
{
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
}
Related
I have added a responsive menu to a blog developed on CodeIgnitor. FYI, someone else made this blog.
Everything is working fine but the menu is not expanding in mobile device while clicking on the icon to expand the menu.
function myMenuFunction() {
var x = document.getElementById("nav");
if (x.className === "navMenuCustom") {
x.className += " responsive";
} else {
x.className = "navMenuCustom";
}
}
.navMenuCustom {
background-color: #333;
overflow: hidden;
font-weight: 900;
}
.navMenuCustom a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 8px 16px;
}
.navMenuCustom a:hover {
background-color: #ddd;
color: black;
}
.navMenuCustom a:active {
background-color: #4CAF50;
color: white;
}
.navMenuCustom .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navMenuCustom a:not(:first-child) {
display: none;
}
.navMenuCustom a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.navMenuCustom.responsive {
position: relative;
}
.navMenuCustom.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navMenuCustom.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="nav" class="navMenuCustom">
Learn Guitar Fast
Teach Yourself Guitar
How to Buy a Guitar
String Ninja
Easy Guitar Songs
Contact
Blog
<a href="javascript:void(0);" class="icon" onclick="myMenuFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
I have used w3schools tutorial to add responsive menu. Link to w3schools tutorial.
You can also check the live website here.
The reason your menu does not work is because you have "overflow: hidden".
Overflow hidden causes the other element's to not show up, this because they will appear underneath the parent div.
When your page is on mobile size you have to remove the "overflow: hidden" so that the other menu items can show up.
#media only screen and (max-width: 600px){
.navMenuCustom {
overflow: auto;
}
}
I would also give the a attributes a background-color.
.navMenuCustom a {
background-color: #444;
}
The only problem that is left is that your image has an higher z-index than your menu items, so it will appear above it.
You can fix this problem with the following code:
Add higher index on the element you want to appear on top.
#nav {
z-index: 10
}
#slideshow-main-homepage div img {
z-index: 9;
}
It works, but .navMenuCustom has overflow: hidden, so you do not see it.
Quick fix would be to add overflow: visible to the .navMenuCustom.responsive. But you will still see nothing, because the items have transparent background and light font color. You must set background-color to the .navMenuCustom.responsive a as well. Last problem will be that the header image will appear over the navigation. You can fix that by removing all the position: relative attributes of its elements (I counted three of them: #banner-home, #slideshow-main-homepage and <div style="...">), but I am not sure if it cannot broke anything else. You must test it a little bit.
It's because you declared height with !important in your #nav, I recommed removing it or use the code below.
#media screen and (max-width: 600px) {
#nav {
height: auto !important;
}
}
I'm currently trying to upgrade my HTML and CSS skills by producing a Responsive Navigation Menu and I think I have got into a bit of a mess - here's my problem: when my page width is greater than 768px I wish to hide the div with the class "menu__hamburger" and show an unordered list of items with a DIV with the class "header__navigation". Should the page width be less than 768px I wish to show the div with the class "menu__hamburger" but drop the div "menu__hamburger" so it fills the whole width of the parent DIV with the class header.
Permit me to demonstrate with some images:
Layout greater than 768px
Layout less than 768px (notice how the header__navigation drops to the next row)
The reason I want to show the header__navigation currently is because I am styling the header__navigation. Later I wish to use a hidden checkbox to toggle the display of the header__navigation using css when the user clicks the div with the menu__hamburger class. However I think I have structured my HTML badly as I cannot get the header__navigation to "drop" and "take up a full row".
Here is my HTML so far (a jsbin is here: https://jsbin.com/wecemiyepe/edit?html,css,output):
<div class="header">
<div class="header__logo">
<img src="brand-logo.png">
</div>
<div class="menu__hamburger">
<label for="menuToggle">☰</label>
<input type="checkbox" id="menuToggle">
</div>
<div class="header__navigation">
<ul class="menu">
<li class="menu__item">Home</li>
<li class="menu__item">Company</li>
<li class="menu__item">Services</li>
<li class="menu__item">Products</li>
<li class="menu__item">Careers</li>
<li class="menu__item">Contact</li>
</ul>
</div>
</div>
Here is my CSS
.header {
display: flex;
background-color: black;
border-bottom: 1px solid white;
align-items: center;
}
.header__logo {
flex: 0 1 30%;
padding: 10px 20px;
}
.header__navigation {
flex: 1 1 auto;
align-items: flex-end;
padding: 10px 20px;
}
.menu {
margin: 0;
padding: 0;
color: white;
list-style: none;
display: flex;
}
.menu__item {
flex: 1 1 auto;
}
.menu__hamburger {
color: white;
display: none;
}
input[type=checkbox] + label {
display: none;
}
#media only screen and (min-width: 320px) and (max-width: 768px) {
.menu__hamburger {
color: white;
display: flex;
justify-content: flex-end;
font-size: 40px;
}
input[type=checkbox] {
display: none;
}
/*
ToDo - toggle display of .menu if is checked
input[type=checkbox]:checked
*/
.menu {
/* display: none; */
flex-direction: column;
flex: 1 0 100%;
}
.menu__item {
text-transform: uppercase;
border-bottom: 1px solid #fff;
padding: 10px;
}
}
I'll continue to persevere with my code but if someone can give me a tip to get this working I will be most appreciative. Once again here is a link to a JSbin with the code: https://jsbin.com/wecemiyepe/edit?html,css,output
So first why you need that (min-width: 320px)?
Better delete it, and you want when the user click on the hamburger menu , the unordered list to be displayed?
I'm not sure if I totally understand your ask, but it seems like you are looking to put your navigation into a hamburger menu on smaller screens. I could type out the code but there is a pretty clear explanation on w3schools on how to create this. Hope this helps! 👍
I want to add a margin (a break <br>) between the title and the price tag on mobile. the website is http://www.jokerleb.com. I tried
.h3{
margin:5px;
}
// and
.tags{
margin:5px;
}
and I also tried working on other divs and media queries, nothing worked, it seems that just applying a margin won't change anything. I've been working on this super silly problem for 2 days and don't know why it's not working.
Just add media query like following to get the issue fix.
#media (max-width:400px) {
.tags {
margin-bottom: 8px; /* Added */
padding: 0;
float: right;
right: 24px;
bottom: -12px;
}
}
You are doing it in a wrong way! It's crazily floated and stuff. You might need to do this and it would work:
#media screen and (max-width: 400px) {
.post-block .post-right h3 {
max-width: 100%;
float: none;
padding-top: 40px;
}
}
Preview
My CSS code
[class*="nav"] {width: 100%; }
#media only screen and (min-width=1024px) {
.nav {width= 38%;}
}
is it possible to change [class*="nav"] into [div*="nav"]
If I understand you correct, the [class*="nav"] is an attribute selector and the class is the name of the attribute to target, in this case class, so if you want this to apply to a div and not to any other type of elements, containing nav in its class, you do like this
[class*="nav"] {
position: relative;
display: inline-block;
width: 100%;
padding: 10px;
background: red;
margin-bottom: 10px;
}
#media only screen and (min-width: 300px) {
div[class*="nav"] { width: 38%; }
}
<div class="nav-bar">A div</div>
<span class="nav-item">A span</span>
Note, I changed your equal sign = in your #media rules to color :
I think your syntax might be the issue. Try:
div[class*="nav"] {
width: 100%;
}
// You could also just use .nav above, depending on how your elements are named.
#media only screen and (min-width: 1024px) {
.nav {
width: 38%;
}
}
[class*="nav"] finds all the elements with class nav or that have classes that contain the name nav .
see example ( both divs take the css styles )
[class*="nav"] { height:100px;width:100px;background:red;margin:10px 0}
<div class="nav-bar"></div>
<div class="nav"></div>
[div*="nav"] does not exist . nav is a HTML tag just like a div . they are two different tags
div { width:100px;height:100px;background:red;}
nav { width:100px;height:100px;background:blue;}
<div></div>
<nav></nav>
SOLUTION:
1 if you want to select only the nav tags, just use
nav { /*styles here*/ }
2 if you want to select only the div tags that have classes with nav then use
div[class*="nav"] {/*styles here*/}
useful links
Nav tag
Div tag
To avoid long lists I've got my li set to float: left so that they alternate rows. However, on occasion this causes an unintentional gap between elements when the content in a li takes up two lines. My HTML is:
<ul class="gmc-ingredient-list">
<li>500g Tagliatelle</li>
<li>50g wortel</li>
<li>50g ui</li>
<li>50g bleekselderij</li>
<li>100g pancetta</li>
<li>200g half-om-half-gehakt</li>
<li>200g rundergehakt</li>
<li>200 ml Primitivo (rode wijn)</li>
<li>200ml runderbouillon</li>
<li>5 eetlepels tomatenpuree</li>
<li>Olijfolie</li>
<li>Zeezout</li>
<li>Verse peper</li>
</ul>
My CSS is:
ul.gmc-ingredient-list {
margin: 0;
padding: 0;
list-style: none;
width: 300px;
}
ul.gmc-ingredient-list li {
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
list-style: none outside none;
padding: 0px 0 0 20px;
width: 130px;
float: left;
}
And the output looks like http://allesoveritaliaanseten.nl/ragu-alla-bolognese/
But there are also some cases in which a li takes up two lines and the output is just fine like http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/
How can I stop the list showing those gaps?
With css3 you can add columns to your lists
ul.gmc-ingredient-list {
margin: 0;
padding:0;
-moz-column-count: 2;
-moz-column-gap: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0;
column-count: 2;
column-gap: 0;
width:300px;
}
ul.gmc-ingredient-list li {
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
list-style: none outside none;
padding: 0px 0 0 20px;
width:130px;
}
don't forget to remove the float from the li
Example:
http://jsfiddle.net/LWBdp/3/
IE Problems
CSS columns don't seem to work for IE, if you leave the float:left in there it will look like you had in IE but will look better in the other browsers!
For more information about css-columns take a look at this article at w3schools
I would recommend you using http://www.csscripting.com/css-multi-column/
I use this script for a long time now and it's really efficient compared to other possibilities available. If your site is done with AJAX, you will have to modify this line:
ut.XBrowserAddEventHandler(window,'load',function() { documentReady = true; processElements(); } );
EDIT: This solution is working on any browser since IE6...