I'm trying to make a responsive footer using grid and it's almost working but not quite. When the screen is wide everything's spaced out perfectly. Once the screen size gets smaller, the items should start wrapping onto the next implicit row. At least that's what happened in a video guide I watched.
In my case though, for some reason only the last item wraps to the next row while the rest of them stay static causing overflow and horizontal scrolling. I've been trying to figure out what's going for a few hours now but no luck. Am I not seeing something? Please help.
.footer__logo {
width: 40px;
margin-bottom: var(--spacer-xs);
}
.footer__header {
margin-bottom: var(--spacer-xs);
}
.contact-us {
margin-top: var(--spacer-xs);
}
.footer__unit--last {
align-self: end;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
<footer class="footer">
<div class="container footer-grid">
<div class="footer__unit">
<h3 class="footer__header">Abstract</h3>
<ul class="footer__list">
<li class="footer__item">Start Trial</li>
<li class="footer__item">Pricing</li>
<li class="footer__item">Download</li>
</ul>
</div>
<div class="footer__unit">
<h3 class="footer__header">Resources</h3>
<ul class="footer__list">
<li class="footer__item">Blog</li>
<li class="footer__item">Help Center</li>
<li class="footer__item">Release Notes</li>
<li class="footer__item">Status</li>
</ul>
</div>
<div class="footer__unit">
<h3 class="footer__header">Community</h3>
<ul class="footer__list">
<li class="footer__item">Twitter</li>
<li class="footer__item">LinkedIn</li>
<li class="footer__item">Facebook</li>
<li class="footer__item">Dribble</li>
<li class="footer__item">Podcast</li>
</ul>
</div>
<div class="footer__unit">
<h3 class="footer__header">Comapny</h3>
<ul class="footer__list">
<li class="footer__item">About Us</li>
<li class="footer__item">Careers</li>
<li class="footer__item">Legal</li>
</ul>
<ul class="footer__list contact-us">
<li>
<h4 class="contact-us__header">Contact Us</h4>
</li>
<li class="footer__item">info#abstract.com</li>
</ul>
</div>
<!-- Footer last item -->
<div class="footer__unit footer__unit--last">
<img src="/img/venus-svgrepo-com.svg" alt="logo" class="footer__logo">
<ul class="copyright">
<li class="copyright__item">
<p class="copyright__text">© Copyright 2022</p>
</li>
<li class="copyright__item">
<p class="copyright__text">Abstract Studio Design, Inc.</p>
</li>
<li class="copyright__text">
<p class="copyright__item">All rights reserved</p>
</li>
</ul>
</div>
</div>
</footer>
I made a screenshot, as you can see the last item (copyright section) wraps while the rest of them stays where they are.
https://i.stack.imgur.com/ht35u.png
edit: added screenshot
Related
I am trying to target the last adjacent sibling in a situation where I don't know how many siblings there will be (1 to 6). See this plunk: http://plnkr.co/edit/JBsMUg2yl1JkbK6j8Bfj?p=preview
<section>
<div class="c">Category 1</div>
<div class="c">Category 2</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 3</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 4</div>
<div class="c">Category 5</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 6</div>
<div class="c">Category 7</div>
<div class="c">Category 8</div>
<div class="p">product</div>
<div class="c">Category 9</div>
</section>
My best efforts still left me with this missing: Category 3 SHOULD be selected; Category 7 should NOT be selected.
div {
padding: 5px;
margin-bottom: 5px;
}
.c {
color: yellow;
background: blue;
opacity:.1;
}
.c+.c {
opacity:1;
}
.p+.c {
color: yellow;
background: blue;
}
.c:last-child { /* orphan cat on end of list */
opacity:.1;
}
I cannot easily change my html, nor put a class on the last adjacent sibling.
The background: this is a catalog rendered by angular ng-repeat on a flat array that contains category headings followed by products. The ng-repeat uses a text filter (from a search box) which ignores the category headings (otherwise they would likely all be hidden) and applies only to the products. I therefore end up with a situation where I have empty category heading which I want to remove via css (but other suggestions are welcome)
The solution shown here: http://plnkr.co/edit/6DUHUEHC9j5mONGG1z0N?p=preview will work as far as creating the visual effect I need.
It uses separate <ul> for each category and :only-child pseudo selector.
However, it is actually not an acceptable answer to the question because it required changing the html which was undesirable. I think there should still be a solution for a flat list of elements using some combination of nth child / last child / not(), etc. but haven't found it yet.
I changed the HTML code and used the title-Attribute as well as the CSS visibility property. Thats the only solution I can imagine right now.
.c {
visibility: hidden;
}
.c ul {
visibility: visible;
}
.c ul:before {
content: attr(title);
}
<ul>
<li class="c">
Category 1
</li>
<li class="c">
Category 2
<ul title="Category 2">
<li class="p">product</li>
<li class="p">product</li>
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 3
<ul title="Category 3">
<li class="p">product</li>
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 4
</li>
<li class="c">
Category 5
<ul title="Category 5">
<li class="p">product</li>
<li class="p">product</li>
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 6
</li>
<li class="c">
Category 7
</li>
<li class="c">
Category 8
<ul title="Category 8">
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 9
</li>
</ul>
I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).
My Code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<ul class="off-canvas-list">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</ul>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
.zurb-links li{
display:inline;
}
.sideBar{
height:100%;
position:fixed !important; /* added !important just for the snippet to work. not needed for live production..
}
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row ">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation"> <a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).</p>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Fiddle.
If you want to fix your side bar in your web page you have to go with position:fixed.
The problem that one faces by doing this is that rest of the columns are relatively positioned -they go under the side-bar or on top of it(including the footer if you span to 100% width).
In the fiddle i gave a span of small-4 and medium-2 columns for side-bar , small-8 and medium-10 small-push-4 medium-2-push columns for content and nested footer in to this.
As the side-bar has position:fixed the content column(position:relative) stacks underneath it so i push the columns based on the span of side-bar.
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
....
..
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>Your content</p>
.....
...
<div class="zurb-footer-bottom">
....
..
</div>
</div>
</div>
I had a similar problem. Here is my solution:
HTML-Code:
<body>
<!-- Header content "top-bar" ... -->
<div class="icon-bar vertical side_fixed hide-for-small-only">
<a class="item">
<label>Menuitem 1</label>
</a>
<a class="item">
<label>Menuitem 2</label>
</a>
<a class="item">
<label>Menuitem 3</label>
</a>
</div>
<div class="admin_content">
<!-- Main-Content "row" "column" ... -->
<!-- footer -->
</div>
<!-- scripts -->
</body>
SCSS-Code: (CSS similar)
#media #{$medium-up} {
.side_fixed {
left: 0;
top: $topbar-height;
bottom: 0;
position: fixed;
width: 8rem;
max-width: 8rem;
overflow-x: hidden;
}
.admin_content {
margin-left: 9rem;
}
}
On wider screens my login button is visible, but on smaller screens it is hidden.
JSBIN http://jsbin.com/nowubuseqeza/1/edit?html,js,output
Relevant code:
<div class="top-bar" data-topbar="" style="background:#074e68">
<ul class="title-area">
<li class="name">
<h1><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</h1>
</li>
</ul>
<div class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
Login
</li>
</ul>
</div>
</div>
Is it possible to have this visible in all circumstances? Otherwise my users cannot login.
Change your code to this DEMO
<div class="top-bar" data-topbar="" style="background:#074e68">
<div class="top-bar-section right">
<!-- Right Nav Section -->
<ul class="right show-for-small">
<li class="active">
Login
</li>
</ul>
</div>
<ul class="title-area">
<li class="name">
<h1><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</h1>
</li>
</ul>
<div class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
Login
</li>
</ul>
</div>
</div>
In the smaller screen, a number of css properties are changing for the title-area and the links in the top-bar. If you add the following, it should bring the login button back on small screens:
//Only use it for screens under 40.063em, using the media query
#media only screen and (max-width: 40.063em) {
.top-bar .name h1 a {
width: auto;
}
.top-bar-section ul {
width: auto;
}
.top-bar-section ul li.active > a {
padding: 0px 15px;
line-height: 45px;
}
.top-bar .title-area {
float: left;
}
}
However, it may need a bit more refinement for very small screens where the "Pacific Medical Training" takes up the whole top-bar and pushes the login button down
I'm trying to move my navbar to the right, tried both navbar-right, and pull-right, but all I get is something like this -
<div class="container" >
<h1 align="center">My Site</h1>
<div class="container" >
<ul class="nav nav-tabs navbar-right" >
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
</div>
<br>
Hello
</div>
So there are 2 problems here -
The grey line underneath the tabs is much shorter, and the tabs themselves aren't aligned properly - I want "tab1" to be the rightmost one, and correspondingly "tab4" the leftmost one.
I get the same results for navbar-right and pull-right. How can this be fixed?
Thanks!
you can easily have that behavior by just extending the Bootstrap.
Demo on JSBin: http://jsbin.com/zaniz/1/edit?html,css,output
all I did was added a right-to-left class to the <ul> and the CSS Style should be:
.right-to-left li { float: right; }
I've added the following rules to solve the problem without losing the border on the ul or reordering the markup:
.nav-tabs-right { text-align: right; }
.nav-tabs-right > li { display: inline-block; float: none; }
you can apply that to .nav-tabs directly but I prefer to create a separate class to replace .navbar-right
You can try this; if you want that gray line to cover the entire page horizontly
<div class="container" >
<h1 align="center">My Site</h1>
<div class="container" >
<ul class="nav nav-tabs" >
<li class="active pull-right" >tab1</li>
<li class="pull-right">tab2</li>
<li class="pull-right">tab3</li>
<li class="pull-right">tab4</li>
</ul>
</div>
<br>
Hello
</div>
I just added a float: right; (equal to pull-right) style to the <ul> and it seemed to produce the desired output, as for the tab1 being the rightmost one, it's probably best to reorder your markup to say:
<ul class="nav nav-tabs navbar-right" >
<li class="active">tab4</li>
<li>tab3</li>
<li>tab2</li>
<li>tab1</li>
</ul>
Using Bootstrap 5 you can simple add justify-content-end to the <ul> class
<div class="container" >
<h1 align="center">My Site</h1>
<div class="container" >
<ul class="nav nav-tabs justify-content-end" >
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
</div>
<br>
Hello
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}