I am creating a vertical website that has several different sections.
I want to make each section responsive to the content it has, but it seems like it's not responsive right now. Those two texts on the first row below the navbar is supposed to be in two different lines because it is written like:
<div id="firstRow">
<a id="about" class="smooth"></a>
<div class="intro">
<div>Welcome to my website</div>
<div>Scroll down to know more about us</div>
</div>
</div>
and I tried to use flex to make the first div responsive
div#firstRow {
padding: 100px;
display: flex;
}
How can I make this work?
I think you should put the display: flex property to your .intro div and also add a flex-direction of row to put it on the same line:
.intro {
display: flex;
flex-direction: row;
}
Example on jsFiddle.
do it something like this
.intro > div {
float:left;
clear: both;
display:block;
}
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I bet this question was asked a hundred times before but i was unable to find a solution for my exact problem. I have 4 Div boxes and they have a max width of 50% and a min width of 400px, so if the site is smaller (eg. on a phone), the boxes align below each other. Now i want to center the boxes if they are below each other (it looks fine while they are side by side). I tried to use
display: table; margin: 0 auto;
but it doesnt work. Another thing I tried was to place everything inside of another div and give them the parameters above and in addition i tried to play with the width of this one (max-content, min-content, auto, fit-content) but it didn't work either. Does anyone know an easy workaround?
Here a short version of my problem:
.format {
width: 50%;
float: left;
height: auto;
min-width: 500px;
background-color: lightblue;
display: table;
margin: 0 auto;
}
<div class="format">
<p>Landestrainer</p>
</div>
<div class="format">
<p>U17</p>
</div>
<div class="format">
<p>U15</p>
</div>
<div class="format">
<p>Sonstige</p>
</div>
sorry for my partly bad english. Hopefully, it was not that bad :)
I would recommend using display: flex instead to center them.
So you would need to put all 4 divs inside a parent div and apply the css below:
.parent-div {
display: flex;
flex-direction: column;
align-items: center;
}
New Edit based on the screenshot given
My approach for this problem would be something like this:
Make use of display: flex and #media query
.parent-div {
// This will divide the page into 2 columns cause of sub-parents
display: flex;
align-item: center;
}
.sub-parent{
display: flex;
align-items: center;
flex-direction: column;
}
// #media query means that if the screen becomes smaller than 768px (specified below), then apply the CSS queries which in this case apply flex-direction: column to the "parent-div"
#media screen and (max-width: 768px) {
.parent-div {
flex-direction: column;
}
}
<div class="parent-div">
<div class="sub-parent">
<div class="format">
<p>Landestrainer</p>
</div>
<div class="format">
<p>U17</p>
</div>
</div>
<div class="sub-parent">
<div class="format">
<p>U15</p>
</div>
<div class="format">
<p>Sonstige</p>
</div>
</div>
</div>
Here's the link to CSS display: flex guide: Display Flex Guide
This question already has answers here:
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 6 years ago.
I'm working on a navigation bar for a page using only HTML and CSS. It should look like this, with the logo setting the height of the containing div, then with the text vertically centered in other divs next to it.
What it should look like:
I've tried to do this by setting up some nested flex boxes. The idea is that:
The container (nav-holder) stretches to fit the tallest content
The second container (nav-item) should all be as tall as its parent
The third container (nav-cont) should be as tall as its own content, and should be vertically centered inside nav-item
Instead, I'm ending up with an odd extra bit of space at the bottom of my logo inside nav-cont, and I can't work out where it's coming from.
It looks like this:
What it really looks like:
HTML code:
<div id="header">
<div id="nav-holder">
<div class="nav-item">
<div class="nav-cont"><img src="images/placeholder-logo.jpg"/></div>
</div>
<div class="nav-item">
<div class="nav-cont">Listings</div>
</div>
<div class="nav-item">
<div class="nav-cont">Services</div>
</div>
<div class="nav-item">
<div class="nav-cont">About</div>
</div>
<div class="nav-item">
<div class="nav-cont">Blog</div>
</div>
<div class="nav-item">
<div class="nav-cont">Contact</div>
</div>
</div>
</div>
CSS Code:
#nav-holder {
background-color: blue;
display: flex;
}
.nav-item {
background-color: yellow;
display: flex;
align-items: center;
margin-right: 0.5em;
}
.nav-cont {
background-color: green;
}
Attempted fixes:
Checked to see if there was a margin or padding set for images or for divs in general.
Looked for information in the most similar solved problem on StackOverflow ("CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height")
Went through a couple of flexbox tutorials to see if there were any similar issues described, including "Solved by Flexbox" on GitHub and "Dive into Flexbox" by Greg Smith
I have took at look at your code and changed some CSS to try to get the idea of what you want.
#nav-holder {
background-color: blue;
display: flex;
}
.nav-item {
background-color: yellow;
display: flex;
align-items: center;
margin-right: 0.5em;
padding: 10px;
}
.nav-cont {
background-color: green;
width: 70px;
text-align: center;
}
Here is a Jsfiddle:
https://jsfiddle.net/r3msjtnL/
You had to change the nav-cont div to a pixel and float the text in the center, so it is not unbalanced. Also, I added a padding to make space around your nav.items.
Update:
If you do not want your buttons being fixed to a specific pixel, attempt changing the width to a percentage (%) instead !
If this helped vote up !
My sidebar is getting pushed down instead of staying inline with my main class, you can view the issue more in my fiddle. (This is one of the first times I've not used bootstrap for a project in a very long time).
view my fiddle.
Instead of float, using flex is a better approach for responsive design.
Try putting your sidebar and main inside a div with display as flex and flex-wrap as wrap.
Here's an example-
.flexbox {
display: flex;
flex-wrap: wrap;
}
.latest-single {
width: 70%;
background-color: blue;
}
.sidebar {
width: 30%;
background-color: green;
}
<div class="flexbox">
<div class="latest-single">
This is our primary content
</div>
<div class="sidebar">
This is our sidebar content
</div>
</div>
You have to choose a way of how to display them. (block,flex,table)
i made it working by adding the display:flex on .container class.
jsfiddle https://jsfiddle.net/31rjm8qb/7/
You have a couple of problems here.
.main has width 100% so .sidebar can not fit
.sidebar is floated while .main is not, so they will not line up
I think it would be a good idea to try out display: flexbox and remove floats altogether.
Check out the following article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to do a responsive design for a menu, you can see the code here.
As you can see flex works pretty well for that design. My only concern is that it won't be compatible with older browsers. Is there an easy way of implementing this without flex, I have tried having only divs inside a container here
The problem is I don't know how to make the My log box appear beside the New log box.
I want to keep responsiveness (boxes stacking up vertically in smaller screens).
Here is the code:
HTML:
<div class="block-menu vertical">
<div class="menu-item">My organizations</div>
<div class="block-menu horizontal">
<div class="block-menu vertical">
<div class="menu-item">
ITPs
</div>
<div class="menu-item">
My log
</div>
</div>
<div class="menu-item">
New log
</div>
</div>
<div class="menu-item">
Profile
</div>
</div>
</div>
CSS:
div.block-menu.horizontal {
display: flex;
width: 100%;
flex-wrap: wrap;
}
div.block-menu.horizontal > div {
flex-grow: 1;
}
div.block-menu.vertical {
display: flex;
flex-direction: column;
}
div.block-menu.vertical > div.menu-item {
width: auto;
}
.menu-container div.menu-item {
padding: 20px;
margin: 10px;
background-color: red;
flex-grow: 1;
}
If you add one extra div (like it is in the flex example), it is kind of simple playing with the values for float and width, you can see an example here: http://jsfiddle.net/ggb2ecu7/3/
Although that one doesn't take into account the margin that you have in the flex example. To fix that, you could use calc, like this: http://jsfiddle.net/ggb2ecu7/4/ (sorry about the extra unnecessary CSS rules). E.g.:
.w2 {
width: calc(100% - 20px);
}
[20px because the margin I set was 10px (on both sides = 20px)]
The problem with calc is that it may not work with all the older versions. You can check the support for calc in here: http://caniuse.com/#feat=calc
I am making a fairly simple responsive website. I have a logo div that keeps the logo centered on small screens, and to the left on big screens. Everything is working how I want it to, (try resizing the jsfiddle) except that I want the logo div to scale down to it's min-width before the links wrap to the next line. I'm not sure how to word this, but I want the logo div to resize based on if the links are pushing it (if they have enough room). When it reaches it's min-width, then the links should wrap. Not sure if this is possible, but I figured I'd ask anyway.
Here is the jsfiddle.
The html:
<div class="header">
<div class="logo">logo</div>
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
The css:
.header {
text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
max-width: 300px;
min-width: 100px;
width: 100%; /* It is always the min-width without this*/
background-color: red;
display: inline-block;
float: left;
}
.link {
display: inline-block;
background-color: green;
}
I hope I was clear, I'm still learning. Let me know if I need to add any more details.
I went looking some more and found flexboxes. Got them to do exactly what I wanted.
http://jsfiddle.net/3525C/10/
My new HTML:
<div class="header">
<div class="logo">logo</div>
<div class="nav">
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
</div>
and CSS:
.header {
text-align: center;
display: flex;
flex-flow: row wrap;
}
.logo {
flex: 1 0 auto;
min-width: 100px;
background-color: red;
}
.nav {
flex: 1 1 auto;
background-color: lightgray;
text-align: center;
}
.link {
display: inline-block;
background-color: green;
}
Thanks hexalys for helping me get it working.
The only real thing that responds the way you're talking is a table. Table cells have the capability of being flexible with their width.
You can use CSS to make this happen. It's a more modern display, so not all browsers (looking at you, older IE) will support it. But this should get you started: http://jsfiddle.net/mfvf8/
Here's what I added as a proof of concept:
.header
{
display: table;
width: 100%;
}
.header > div
{
display: table-cell;
}
.header .link
{
white-space: nowrap;
width: 1px;
}
I set the header to be displayed as a table, and gave it full width. I made all of the child divs act like a table cell. I made the links minimum width (1px) and said not to wrap whitespace. With regular divs, that would overflow. With table cells, that means it tries to be 1px wide but will expand to fit its content.
The rest of a table row's width will go evenly to whichever cells are left over that don't have a set width. In this case, it's the logo div. Then, as you shrink the window, it will slowly start to shrink the logo as needed.
You will need to tweak this to fit your design better. If you don't want your nav pushed all the way to the right like it is in the jsfiddle, you might need a "buffer" div to the far right, or different width settings, or a set max-width on the header div.