Footer for restaurant page
For my project im recreating this basic restaurant home page and the only part I have left is the footer. In my course we only know the most basic css and flexbox so I want to keep my solution in that area, but my thought process right now is splitting the footer in half and then using justify-content: center to center the Join our mailing list! on the left half of the footer and the navigation links on the right side of the footer. Is this possible?
I've tried using widths, using divs of left-footer and right-footer and using display flex on both, using margins and padding to manually push one side to the other, but it never lined up correctly.
Use nested flexboxes.
One on the footer, so you can use justify-content: space-between; to separate its content left and right
Another one on the nav, so you can use gap: 1em; to specify the space between the menu items.
Like this:
footer {
display: flex;
justify-content: space-between;
background: cyan;
padding: 1em;
}
nav {
display: flex;
gap: 1em;
}
<footer>
<div>
<input placeholder="email address">
<button>Sign Up</button>
</div>
<nav>
Menu1
Menu2
Menu3
</nav>
</footer>
Related
.content{
display: grid;
grid-template-columns: repeat(auto-fill, 21.25em);
gap: 20px;
justify-content: center;
align-content:center;
align-items:center;
}
I made this grid for three cards in a section, and I recognized that my grid works well but when I zoom out I see that the grid is in the left of the page and not centered. What the usual way to center these grid items? Should I put them in contaier or like is there a way to center the whole page or is there a grid feature for that?
If you are using Bootstrap, just use an outer div around grid with class="text-center". Example below:
<div class="text-center">
<table>...</table>
</div>
i want the items in flexbox not to come out of flexbox when the div's width next to flexbox is increased.
consider i have a flexbox container which has items such as svg, input field and div with simple text. Next to this flexbox container i have one side panel. This side panel can be resized..meaning when user drags the side panel sideways its width either increases or decreases. In doing so, the flexbox container is shrunk and hence the items in flexbox come out of it...how can i avoid it? how can i make sure that even when the sidepanel is dragged the flexbox items should stay intact?
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;}}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<Svgsearch/><input type=text/>
</div>
</div>
<div>dropdown to be added</div>
</div>
Could someone help me with it? thanks.
You can use flex-wrap to make the items drop down to another row if they are larger than their container:
display: flex;
flex-wrap: wrap;
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
If you want the items to remain on one line then i would give them percentage widths.
how do I position a title on top of a gallery , like in the picture below.
I'm using a shortcode for the gallery, which comes with my theme.
I was able to do it using position:absolute; and top and bottom values, then center it with display:block; and margin:0 auto;. However, when I change the size of the screen it get's all out of whack.
the html is
<div class="gallery-column">
[shortcode goes here]
<h2>Title goes here</h2>
</div>
The easiest way to keep an element centered both horizontally and vertically is with flexbox.
All you need on the parent element is:
display: flex to treat the element as a flexbox
align-items: center for vertical alignment
justify-content: center for horizontal alignment
a fixed height (to create the padding) - 100vh for a full screen
This can be seen in the following:
body {
margin: 0;
}
.gallery-column {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<div class="gallery-column">
<div class="centered">
<h2>Centered Element</h2>
</div>
</div>
The element in question will remain at the exact center of the page, regardless of screen resizes.
In your case you'll also want a z-index to ensure that the element stays on top.z-index: 1 should suffice.
I'm having a lot of trouble setting a div to appear under another div (like they do normally).
I'musing MaterializeCSS. My layout is as follows:
<div class="container valign-wrapper">
<div class="customClass"></div>
<div class="customClass"></div>
</div>
And css:
.valign-wrapper{
display: flex;
align-items: center;
}
.customClass{
margin: 0 auto;
/* text and font css */
}
However , even adding width:100% or changing display class won't make the two divs appear vertically, they appear side by side. I found out that removing valign-wrapper class will work, but my items will obviously appear at the top of the site...
If anyone has encountered the same problem I would appreciate the help!
You need to add the flex direction:
.valign-wrapper { flex-direction: column; }
That way, flex items are positioned as a column. Alternatively, if you need to go with flex-direction: row; (default), you can use
.valign-wrapper { flex-wrap: wrap; }
.customClass { flex-basis: 100%; }
to still maintain the row style but have your two items wrap and eventually positioned above each other.
Even though the post is from 2013, it still teaches the magic of flexbox in a nice way and I can just recommend everyone to read about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The more I think about this the less feasible it seems, but I was wondering if there was a way to control a flex item's margin based on how it has been laid out in the flex flow.
A screenshot probably explains it best:
The 'captured pieces' divs are in a flex container, which is a sibling to the div with the move history in it. The captured pieces container, and the history, are themselves flex items in another container. Each captured pieces div has a 3px top margin, to space them out from each other and from the history.
The problem is when there is enough space to display the history div and the 'captured pieces' container side by side, as shown here by artificially shrinking the history div:
When they're side by side like this, the 3px top margin is unnecessary - I'd like the top of the 'opponent's captured pieces' to line up with the top of the history.
Is there any way to achieve this with CSS?
Here's the CSS for the relevant divs:
div.history_and_captured {
display: flex;
flex-wrap: wrap;
}
div.game_history {
flex-basis: 15em;
flex-grow: 1;
}
div.captured_pieces_container {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
And the HTML:
<div class="history_and_captured">
<div class="game_history" id="history">
<!--history widget is created dynamically-->
</div>
<div class="captured_pieces_container">
<div class="captured_pieces" id="captured_pieces_opponent">
opponent's captured pieces
</div>
<div class="captured_pieces" id="captured_pieces_player">
player's captured pieces
</div>
</div>
</div>