Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Victor Gordian
4,656 PointsMaking my second menu mobile freindly
http://i.imgur.com/w57KIN6.png this is in pc http://i.imgur.com/mo5ayyH.png this is in mobile How do i make it so they won't over lap
<div id="wrapper">
<section>
<div class='pictureBody'>
<h2>css Portfolio Gallery</h2>
<input type="radio" id="select-all" name="button">
<label for="select-all" class="label-all">
All
</label>
<input type="radio" id="select-doors" name="button">
<label for="select-doors" class="label-doors">
Doors
</label>
<input type="radio" id="select-gate" name="button">
<label for="select-gate" class="label-gate">
Gates
</label>
<input type="radio" id="select-fence" name="button">
<label for="select-fence" class="label-fence">
Fence
</label>
<input type="radio" id="select-railing" name="button">
<label for="select-railing" class="label-railing">
Railings
</label>
<input type="radio" id="select-porch" name="button">
<label for="select-porch" class="label-porch">
Porch Enclosure
</label>
<input type="radio" id="select-window" name="button">
<label for="select-window" class="label-window">
Window Guards
</label>
<ul class="gallery">
<li class="doors-item">
<a href="img/door1.jpg">
<img src="img/door1.jpg" alt="">
</a>
</li>
<li class="gate-item">
<a href="img/Gate4.jpg">
<img src="img/Gate4.jpg" alt="">
</a>
</li>
<li class="fence-item">
<a href="img/fence1.jpg">
<img src="img/fence1.jpg" alt="">
</a>
</li>
<li class="railing-item">
<a href="img/railing1.jpg">
<img src="img/railing1.jpg" alt="">
</a>
</li>
<li class="porch-item">
<a href="img/porch.jpg">
<img src="img/porch.jpg" alt="">
</a>
</li>
<li class="window-item">
<a href="img/guard1.jpeg">
<img src="img/guard1.jpeg" alt="">
</a>
</li>
<li class="doors-item">
<a href="img/door2.jpg">
<img src="img/door2.jpg" alt="">
</a>
</li>
<li class="gate-item">
<a href="img/gate2.jpg">
<img src="img/gate2.jpg" alt="">
</a>
</li>
<li class="fence-item">
<a href="img/fence2.jpg">
<img src="img/fence2.jpg" alt="">
</a>
</li>
<li class="railing-item">
<a href="img/railing2.jpg">
<img src="img/railing2.jpg" alt="">
</a>
</li>
<li class="porch-item">
<a href="img/porch2.jpg">
<img src="img/porch2.jpg" alt="">
</a>
</li>
<li class="window-item">
<a href="img/gaurd2.jpg">
<img src="img/guard2.jpg" alt="">
</a>
</li>
<li class="doors-item">
<a href="img/door3.jpg">
<img src="img/door3.jpg" alt="">
</a>
</li>
<li class="gate-item">
<a href="img/Gate1.jpg">
<img src="img/Gate1.jpg" alt="">
</a>
</li>
<li class="fence-item">
<a href="img/foldingfence.jpg">
<img src="img/foldingfence.jpg" alt="">
</a>
</li>
<li class="railing-item">
<a href="img/railing3.jpg">
<img src="img/railing3.jpg" alt="">
</a>
</li>
<li class="porch-item">
<a href="img/porch3.jpg">
<img src="img/porch3.jpg" alt="">
</a>
</li>
<li class="window-item">
<a href="img/gaurd3.jpg">
<img src="img/guard3.jpg" alt="">
</a>
</li>
</ul>
</div>
</section>
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
pictureBody {
margin: auto;
background: #F2F5E9;
width: 347px;
font-family: "Arial"
}
ul {
padding:0;
}
ul.gallery li {
display: inline-block;
opacity:1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
position: relative;
float: center;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin-left:10px;
}
label {
cursor: pointer;
color: #fff;
background: #5D6B74;
padding: 5px 19px;
}
input {
display: none;
}
img {
padding: 5px;
border: 1px solid #ccc;
}
/*Select Categorie*/
input#select-doors:checked ~ .gallery li:not(.doors-item), input#select-gate:checked ~ .gallery li:not(.gate-item), input#select-fence:checked ~ .gallery li:not(.fence-item),
input#select-porch:checked ~ .gallery li:not(.porch-item), input#select-railing:checked ~ .gallery li:not(.railing-item), input#select-window:checked ~ .gallery li:not(.window-item){
opacity: 0.1;
}
2 Answers
Greg Kaleka
39,021 PointsHi Victor,
A quick fix would be to just set a line-height rule on the label element:
label {
cursor: pointer;
color: #fff;
background: #5D6B74;
padding: 5px 19px;
line-height: 2em; // this is new
}
P.S. I hope you don't mind, but I changed the topic to CSS, since you're asking a bit more of a technical question here.
Oliver Sewell
16,425 PointsHi Victor , it would be best to use responsive layout and media queries i think it would be a great idea if you check out some of the lessons on those
Victor Gordian
4,656 Pointsthanks, i wasn't sure where to look.
Victor Gordian
4,656 PointsVictor Gordian
4,656 PointsThank you!
Greg Kaleka
39,021 PointsGreg Kaleka
39,021 PointsNo problem! Also quick tip - your code wasn't displaying properly because you were adding the language to both your opening and closing tags - you only need to use it on the opening ones:
```html
[code here]
```
```css
[code here]
```
Happy coding!