I am trying to build this nav bar and make it responsive as well, the thing is that when I apply display: flex; the logo just dissapears. For some reason, when I use a fixed width the image stays, but when I use percentages the image just goes away. I would like to use percentages to mantain the responsiveness of the nav bar.
Here is what I have so far.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
border: 10px solid orange;
justify-content: space-around;
width: 100%;
}
header div#company-logo img#header-img {
width: 50%;
}
<header id="header">
<div id="company-logo">
<img src="https://via.placeholder.com/100x50.jpg" alt="hamburguer logo" id="header-img">
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">Home</li>
<li class="nav-link">Info</li>
<li class="nav-link">Contact Us</li>
</ul>
</nav>
</header>
Like I said before, I have tried with fixed percentages, such as px or vw. I just want to understand why the image dissapears when I use percentages.
#company-logo {
flex: 0 0 auto;
}
...should do it. It means:
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
The important bits are flex-shrink: 0; flex-basis: auto;.
Related
Inside my HTML:
<div class="certificates-container">
<button class="certificates-exit-btn">⇐</button>
<div class="carousel">
<ul class="carousel-list">
<li class="slide" data-active>
<img src="images/img1.png" alt="Certificate Image #1">
<p>lorem10</p>
<p>2022</p>
</li>
<li class="slide">
<img src="images/img2.png" alt="Certificate Image #2">
<p>Lorem10</p>
<p>2022</p>
</li>
<li class="slide">
<img src="images/img3.png" alt="Certificate Image #3">
<p>lorem10</p>
<p>2022</p>
</li>
</ul>
</div>
</div>
Inside my scss;
.certificates-container{
position: fixed;
width: 100vw;
height: 100vh;
z-index: 99999;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
.certificates-exit-btn{
position: absolute;
top: 20px;
right: 20px;
font-size: 1em;
padding: 0.5em 1em;
}
.carousel{
display: block;
.carousel-list{
border: 1px solid blue;
padding: 2em;
display: flex;
overflow-y: scroll;
.slide{
border: 1px solid green;
width: 400px;
img{
display: block;
width: 100%;
}
p{
text-align: center;
}
}
}
}
}
I want .carousel-list to be horizontally scrollable. But green bordered .slide elements overflows the container and become invisible and looks like this;
image It does not become horizontally scrollable they just overflows the container and i can't put certain pixel width to them. How should I do that?
overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element when it overflows at the top and bottom edges. You need to use overflow-x for this.
Add this
.carousel-list {
overflow-x: scroll;
}
so I'm facing a very frustrating CSS issue at the moment, where my list items seem to be ignoring the max-width constraints and causing a horizontal scroll to appear, which for a webapp primarily aimed at mobile screens is less than ideal!
I strongly suspect it's to do with using ul and li elements to present, surprise surprise, a list! And then embedding divs inside that list.
I have pasted the crux of the code I have below:
html {
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 0;
}
body {
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 0;
// I want the navbar to be down the left, a bit like GitLab's interface
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
header {
flex: 0 0 auto;
margin: 0;
}
// Navbar rules go here but this is the bit that seems absolutely fine.
main {
flex: 1 0 auto;
margin: 0;
padding: 1em;
max-width: 100%;
}
ul.ticket-menu {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 100%;
}
ul.ticket-menu li {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
grid-template-areas: "icon title" "icon description";
}
ul.ticket-menu li div {
word-wrap: normal; // This isn't working which seeing as it's the default value anyway comes as little surprise
display: inline-block; // I have tried this, inline and block, to no avail
width: 100%;
max-width: 100%;
}
ul.ticket-menu li svg {
grid-area: icon;
}
ul.ticket-menu li div:nth-child(2) {
grid-area: title;
}
ul.ticket-menu li div:nth-child(3) {
grid-area: description;
}
<header>
// This all behaves as it should
<nav>
<ul>
<li>Home</li>
<li>Tickets</li>
<li>And so on</li>
<li>And so forth</li>
</ul>
</nav>
</header>
<main>
<h1>Ticket Menu</h1>
<ul class="ticket-menu">
<li>
<svg class="menu-item-icon">/* SVG Contents */</svg>
<div>Create a ticket</div>
<div>A longer description of what this link is for, not needed here clearly but this is what is causing the wrapping issues</div>
</li>
<li>
<svg class="menu-item-icon">/* SVG Contents */</svg>
<div>View open tickets</div>
<div>A longer description of what this link is for, not needed here clearly but this is what is causing the wrapping issues</div>
</li>
<li>
<svg class="menu-item-icon">/* SVG Contents */</svg>
<div>View your tickets</div>
<div>A longer description of what this link is for, not needed here clearly but this is what is causing the wrapping issues</div>
</li>
<li>
<svg class="menu-item-icon">/* SVG Contents */</svg>
<div>Ticket history</div>
<div>A longer description of what this link is for, not needed here clearly but this is what is causing the wrapping issues</div>
</li>
</ul>
</main>
Essentially what is happening is that on narrow screens the list items are spilling off the right hand side of the page before it then decides "oh hang on, I'm supposed to wrap these words"!
I have built a demo of the issue at https://codesandbox.io/s/ancient-glitter-19exhv
Is there anything that anyone can suggest?
broken height
How it looks when overflow: auto is not active
So, I had the height working perfectly as it filled the remaining space of a 100vh app container (blue border line), but when I added overflow: auto to the .action-list and added enough items that it required the overflow to activate suddenly the height is breaking past the app container and pushing past the bottom of the viewport. I have tried every height manipulation of .action-list possible to no avail. I was able to make the whole thing fit perfectly if I changed the .action-container or .action-plate to a smaller percentage of height but that breaks the height to something too small if the overflow: auto is not active. I'm at my wits end.
(.app is in a separate css file. All colored borders are included for reference only.)
.app {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border: 1px blue solid;
}
.app-container {
margin: 0 0 30px 0;
padding: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
border: 1px solid green;
}
.action-plate {
height: 100%;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.action-container {
width: 85%;
height: 89%;
background: black; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9A070E, #9e4676, #f98a2f93); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4e080b63, #77335a48, #b6662457); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 2px 1px 18px rgb(202, 202, 202);
border: 1px thistle solid;
}
.action-list {
width: 100%;
overflow: auto;
box-sizing: border-box;
}
.add-item {
margin: 10px;
box-sizing: border-box;
}
Make your list container flexible with flex-grow so it fills the available space, and change the default min-height: auto to allow the list container to shrink.
Seeing your HTML markup would help in understanding what’s going on here. But it seems like .action-plate is unable to resolve its height: 100%, so it behaves as thought height was auto, which in this case means it will try to size itself based on the height of its content. And that’s why it’s growing so big instead of staying within its 100vh container.
To get the effect you want, you could take advantage of Flexbox properties instead of using percentages.
The header and the tabs should be the size of their content, so we don’t need to do anything extra there.
The container for the list should take up all the remaining space in the app container — not more, and not less. To make sure it grows to fill the available space, we set flex-grow: 1 (by default flex items have flex-grow: 0).
Next, flex items will try to preserve their min-content size by default. This basically means your flex item will try to at least have the size to contain all of its items. This is why it grows beyond the app container.
So instead of its default min-height: auto, we will give it min-height: 0. That means that if you have lots of content, your flex item will no longer try to “protect” its size, and will shrink to fill the size of the container.
Here’s a working example:
body {
margin: 0;
color: white;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
width: 320px; /* just to illustrate the working example */
height: 480px; /* just to illustrate the working example */
box-sizing: border-box;
background-color: black;
}
header {
text-align: center;
}
.nav-list {
display: flex;
list-style-type: none;
padding: 0;
justify-content: space-evenly;
}
.todo-list-container {
flex-grow: 1;
padding: 16px;
min-height: 0;
overflow: auto;
}
.todo-list-content {
background-color: burlywood;
}
.todo-item {
font-size: 32px;
}
<main class="app">
<header><h1>Exist Better</h1></header>
<nav>
<ul class="nav-list">
<li>Routines</li>
<li>Behaviors</li>
<li>To Dos</li>
</ul>
</nav>
<div class="todo-list-container">
<div class="todo-list-content">
<ul class="todo-list">
<li class="todo-item">Routine 1</li>
<li class="todo-item">Routine 2</li>
<li class="todo-item">Routine 3</li>
<li class="todo-item">Routine 4</li>
<li class="todo-item">Routine 5</li>
<li class="todo-item">Routine 6</li>
<li class="todo-item">Routine 7</li>
<li class="todo-item">Routine 8</li>
<li class="todo-item">Routine 9</li>
<li class="todo-item">Routine 10</li>
</ul>
<button>Add a new routine</button>
</div>
</div>
</main>
I have this layout on my HTML-page :
page layout
It's a form with checkboxes (which are hidden) and the labels are styled to look like buttons (white border and transparent background to show the gradient below). The gradient part is the container.
Now what I would like to achieve is to show the gradient background only below the buttons so that the parts between the buttons remains white.
See the example here : example (and worship my Photoshop skills)
I tried to figure out a solution but I ended up with nothing. If some of you guys could help me out, I would really appreciate it :)
Thank you in advance !
Create multiple small round boxes with no background and large box-shadow values.
Excess shadow on these boxes will be clipped by overflow: hidden on their respective parents.
Apply gradient background on the outermost parent.
Here is a working demo:
*,
*:before,
*:after {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow) no-repeat;
margin: 0;
}
.list {
justify-content: center;
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 0;
margin: 0;
}
.list li {
justify-content: center;
padding: 30px;
overflow: hidden;
display: flex;
flex-grow: 1;
flex-basis: 50%;
}
.list .box {
box-shadow: 0 0 0 1000px #fff;
justify-content: center;
align-items: center;
border-radius: 100%;
display: flex;
height: 120px;
width: 120px;
}
<ul class="list">
<li>
<div class="box">Immobilier</div>
</li>
<li>
<div class="box">Travaux</div>
</li>
<li>
<div class="box">Finance</div>
</li>
<li>
<div class="box">Evenementiel</div>
</li>
<li>
<div class="box">Juridique</div>
</li>
<li>
<div class="box">Communication</div>
</li>
<li>
<div class="box">Recrutement</div>
</li>
</ul>
.c-container {
background-color: coral;
display: flex;
margin: 0 auto;
width: 90%;
}
.c-column {
position: relative;
}
.c-column--left, .c-column--right {
flex: 0 0 auto;
width: 344px;
max-width: 344px;
min-width: 344px;
}
.c-column--left {
order: -1;
}
.c-column--center {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: #ff5213;
}
.c-topic__header, .c-topic__footer {
padding: 24px;
background-color: #e93f00;
}
.c-topic__body {
position: relative;
}
.c-message {
padding: 24px;
position: relative;
}
.c-message__list {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
list-style: none;
}
.c-message__item {
background-color: skyblue;
border-radius: 3px;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding: 24px;
min-width: 0%;
margin-bottom: 5px;
flex: 1 1 auto;
}
.c-message__item--right {
align-self: flex-end;
margin-left: 10%;
}
.c-message__item--left {
align-self: flex-start;
margin-right: 10%;
}
.o-box {
padding: 24px;
}
.u-relative {
position: relative;
}
<div class='c-container'>
<div class='c-column c-column--center'>
<div class='c-topic__header'>
Header: flex-child
</div>
<div class='c-topic__body'>
<div class='c-message'>
<ul class='c-message__list'>
<li class='c-message__item c-message__item--right'>
Hi, I'm a message placed on the right side and I'm quite wide
</li>
<li class='c-message__item c-message__item--left'>
How swell. I'm on the left and a bit shorter.
</li>
</ul>
</div>
</div>
<div class='c-topic__footer'>
Footer: flex-child
</div>
</div>
<div class='c-column c-column--left'>
<div class='o-box u-relative'>
<span>Left column: 344px</span>
</div>
</div>
<div class='c-column c-column--right'>
<div class='o-box u-relative'>
<span>Right Column: 344px</span>
</div>
</div>
</div>
Recently I've been working on implementing flexbox into a webapp interface. One page consists of three columns, with the left and right column having a fixed width, and the center being flexible.
The center column in turn consists of 3 flexed children. A fixed height header and footer, with a flexible center. This column-center (hence CC) gets a vertical scrollbar if the content it holds overflows.
Inside the CC, there is a wrapper with a padding. This is there because javascript doesn't handle the scrolling well with the padding being on the CC item itself.
The problem is that in IE10 the text inside the blue blocks doesn't wrap when the viewport gets smaller. Safari, Chrome and Firefox all don't have this issue. Does anyone know how to get IE10 to behave like the rest?
An example of the problem can be found here:
http://codepen.io/csssavvy/pen/qOgjmN
Tl;dr. IE10 flexbox text overflow not working. Need help. Code example: http://codepen.io/csssavvy/pen/qOgjmN
Thanks for the answers. Fixed this issue this afternoon:
Changes on .c-message__item:
Add max-width: 90%; Remove min-width: 0%;.
Changes on .c-column--center:
Add min-width: 0%;
See the codepen for the updated version: codepen.io/csssavvy/pen/qOgjmN