I want to set up a page that hides a menu bar, depending in the size of the screen. I have it set up so that this menu bar is supposed to disapper when someone sets it to a mobile screen size (I believe 480px). However, when I assign the nag to display:none, it won't appear at all on the page. Here's the code:
Here is the url: http://matthewtbrown.com/jeffandcricketquilt/liquid/index2.html
<nav class="fluid fluidList hide_mobile">
<ul>
<li>Home</li>
<li>Quilt Show Photos</li>
<li>Video Tutorials</li>
<li><a>Services</a>
<ul>
<li>Quilt Photography</li>
<li>Photos to Fabric Transfers</li>
<li>Downloadable Patterns</li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li>Contact Us</li>
<li>Photo Credit</li>
</ul>
</li>
</ul></nav>
Here is the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
background-image: url(../images/pattern2.jpg);
background-repeat: repeat;
min-width: 480px;
}
#div1 {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
Put
.hide_mobile {display:block} in the #media only screen and (min-width: 769px) area and then put .hide_mobile {display:none} in the #media only screen and (max-width:480px) area.
and let me know if that helps.
Related
I built a few websites with responsive navigation already. There are many solutions for responsive designs of website navigation if you have a static navigation.
However, for my current project I am building an user-individual dynamic navigation, so the number of navigation element as well as their contents are subject to change and are user individual. Therefore I tried different things with flexbox and floating layouts already but did not find a solution meeting my needs.
Do you have an idea how to fix the problem showed in the picture attached?
I also attached some sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: "Avenir";
}
body {
margin: 0;
}
header {
background: #303ca2;
color: white;
margin-bottom: 20px;
display: flex;
}
h1 {
font-size: 24px;
margin: 0;
text-transform: uppercase;
font-weight: 400;
padding: 10px;
line-height: 40px;
flex-shrink: 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
text-align: right;
}
nav ul li {
list-style: none;
display: inline-block;
font-size: 16px;
padding: 10px 10px;
line-height: 40px;
}
</style>
</head>
<body>
<header>
<h1>Title Zone</h1>
<nav>
<ul>
<li>Navigation Elem 1</li>
<li>Navigation Element 2</li>
<li>Navigation 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Navigation 6</li>
<li>Element n</li>
</ul>
</nav>
</header>
</body>
</html>
you need use media query to set what will appear in each screen size.
In the HTML file you will define all cases including a div tag "more" with yheir li tag
but when the screen size if less than a certain number this div will recive display: none
for example:
<ul>
<li>element 1</li>
<li>element 2</li>
<li class="disabledOnMobile">element 3</li>
<li class="disabledOnMobile">element 4</li>
<div class="activeOnMobile">more...
<ul>
<li>element 3</li>
<li>element 4</li>
</ul>
</div>
</ul>
and with media query you can hide or show something based in the width screen like this:
#media only screen and (max-width: 400px) {
.disabledOnMobile {
display: none;
}
}
hiding all tag with disabledOnMobile class (element 3 and 4 showing their only with "more")
#media only screen and (min-width: 400px) {
.activeOnMobile {
display: none;
}
}
Here we hide the activeOnMobile when the screen is bigger than 400px showing only element 3 and 4 that is outside activeOnMobile class
in your case you need add the hover on "more" and set anothers settings, it's only a example, you can also add a breakpoin in any screen size. To becobe it's easier you can use some library like bootstrap.
You can lear more about media query here
I'm still trying to get the hang of <details> and I've run into a snag that I know has a very obvious answer, but... it's late, I'm stupid, and I cannot figure it out.
How do I prevent a div from moving to accommodate an expanded details tag, like in the instance of the red div in the following snippet?
.test {
background: red;
height: 50px;
width: 50px;
}
<details>
<summary>Summary Test</summary>
<ul>
<li>Thing #1</li>
<li>Thing #1</li>
<li>Thing #1</li>
</ul>
</details>
<div class="test">
Test
</div>
Based on the problem statement, this will do the job.
.test {
background: red;
height: 50px;
width: 50px;
top:26px;
position:absolute;
z-index:-1;
}
position:absolute - Will fix it to the parent (in the snippet the parent is body element), you can adjust the position.
top:26px; - I am setting the position from the top of the parent to 26px, you can also set left, right, bottom
z-index:-1 - If you want the absolute element to be behind the dropdown, you need to set this property and the dropdown will show above the div with class test
.test {
background: red;
height: 50px;
width: 50px;
top: 26px;
position: absolute;
z-index: -1;
}
<details>
<summary>Summary Test</summary>
<ul>
<li>Thing #1</li>
<li>Thing #1</li>
<li>Thing #1</li>
</ul>
</details>
<div class="test">
Test
</div>
Like a folding menu, you can set the folding part in absolute position
.test {
background: red;
height: 50px;
width: 50px;
}
details {
position:relative;/* reference for absolute child */
background:tomato;
}
summary + ul {
margin:0;/* reset margin to stick to summary*/
position:absolute;/* take it off the flow to not disturb the layout */
background:inherit;/* make sure background is there too and .test hidden underneath*/
}
<details>
<summary>Summary Test</summary>
<ul>
<li>Thing #1</li>
<li>Thing #1</li>
<li>Thing #1</li>
</ul>
</details>
<div class="test">
Test
</div>
or set an height to details and let overflow be visible
.test {
background: red;
height: 50px;
width: 50px;
}
details {
height:1.4em;
position:relative;/* keep it on top */
background:tomato;
}
summary + ul {
margin:0;
background:inherit;
}
<details>
<summary>Summary Test</summary>
<ul>
<li>Thing #1</li>
<li>Thing #1</li>
<li>Thing #1</li>
</ul>
</details>
<div class="test">
Test
</div>
I want to know how to give a max-height to <div> or <ul> elements.
I have this:
<div id="list1">
<ul class="list-group">
<li class="list-gorup-item">item1</li>
<li class="list-gorup-item">item2</li>
<li class="list-gorup-item">item3</li>
<li class="list-gorup-item">item4</li>
<li class="list-gorup-item">item5</li>
</ul>
</div>
And this CSS media:
#media (max-width: 480px){
#list1{
max-height: 10%;
}
}
But it doesn't work. Also, must it appear on scroll?
EDIT:
Hi, accomplish it work, using overflow: auto; and "px" :
#media (max-width: 480px){
#list1{
overflow: auto;
max-height: 150px !important;
}
}
You can manipulate with overflow: hidden|auto|...
Maybe you want to set maximum height for your content to scaling?
How you want it to behave when height of list exceeds defined height?
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.
I'm trying to display a grid of items, with each item having a photo on the left and a description on the right, something like this:
----------------------------
| photo | item description |
----------------------------
I want to display these items in a 3x3 grid on the page. I have the grid part worked out, what I'm having trouble with is alignment of the photo and description. When the height of the description exceeds the height of the photo, I don't want the text to wrap under the photo. I essentially want to maintain two separate columns.
I have tried this:
.item{
padding-left: 60px; // size of photo + 5px margin
background-position: 5px 0px;
}
<div class="item" style="background-image: url('/img/photo123.jpg');">
Here is the item description
</div>
That has worked very well. the markup is clean and I don't have to mess around with absolute/relative, however, now I can't add a border to the image. Can anyone suggest a workaround or alternative?
IMHO that is not clean. Those are obviously content relevant images, so they shouldn't be background images.
It usually very simple with floating, but there are several other ways.
CSS:
.item img {
float: left;
}
.item p {
margin-left: 60px; // size of photo + 5px margin
}
HTML:
<div class="item">
<img src='/img/photo123.jpg'> <!-- Add width/height and alt text -->
<p>Here is the item description</p>
<div style="clear:left"></div>
<!-- or any other clearing solution, for example, "clearfix" -->
</div>
Have a look here. You just need to apply min-height on your div.
Why don't you want to use a table? This seems to me to be tabular data (admittedly with the image being a data element), so wouldn't a table would be the obvious choice?
you could use list-elements like so
<ul>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
</ul>
and the CSS
ul {width: 960px; font-family: Arial; font-size: 12px; float: left;}
ul li {width: 80px; height: 180px; padding: 10px; background: #444444; list-style: none; float: left; color: #cccccc; }
ul li.image {width: 180px; height: 180px; padding: 10px; background: #cccccc; margin: 0 20px 20px 0; color: #444444; }