I want to place a text inline and between two arrows. at first it seems easy but I can't place everything in their right place:
html, body {
height: 100%;
}
body {
background: #fafafc;
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.grid-container {
width: 50%;
display: grid;
grid-template-columns: 40px auto 40px;
}
.referenceText {
font-family: Arial;
display: inline-block;
font-size: 3vw;
color: #4287f5;
/*outline: 0.1vw dashed red;*/
}
.link {
font-size: 200px;
color: #a7a4bf;
text-decoration: none;
width: 100px;
height: 100px;
outline: 0.1vw dashed orange;
}
.link:hover {
color: #636175;
}
<div class="flex-container">
<div class="grid-container">
<a class="link" href="">‹</a>
<div class="referenceText">This is the reference</div>
<a class="link" href="">›</a>
</div>
</div>
Please note that we want the arrows to be at the edges of the screen and the text at the center...
Make these changes in .grid-container and .link
.grid-container {
width: 80%;
display: grid;
grid-template-columns: 100px auto 100px;
align-items: center;
justify-items: center;
}
.link {
font-size: 200px;
color: #a7a4bf;
text-decoration: none;
width: 100px;
/* height: 100px; remove height*/
outline: 0.1vw dashed orange;
}
check codepen
Add display: flex;, align-items: center; and justify-content: space-between; to .grid-container and change the width to 100%.
Related
So I want the divs in the 'header-content-lower' element to wrap down (if they all do not fit on the screen) in a row but its not even working, I tried changing box-sizing of the childs or setting max-width of the parent element but I still do not have a clue whats wrong, please help, im so done - this is my code:
#import "main.css";
.site-header {
display: flex;
align-items: center;
flex-direction: column;
background-color: var(--main-color);
font-family: 'Ubuntu', sans-serif;
height: 150px;
}
.header-content-upper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
width: 90%;
color: var(--main-font);
font-size: 1.1vw;
}
.header-content-upper .header-brand {
color: var(--main-font);
font-family: Glosa;
text-align: center;
font-size: 3.5rem;
}
.header-content-upper .header-nav {
text-align: end;
}
.header-content-upper li {
list-style: none;
display: inline;
padding: 10px;
}
.header-content-lower {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 1000px;
height: 50px;
border-top: 1px solid var(--second-font);
font-size: 1vw;
}
.header-content-lower div {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 50px;
color: var(--second-font);
}
.header-content-lower div:nth-child(2n-1) {
border: 1px solid var(--second-font);
border-width: 0px 1px 0 1px;
}
.header-brand,
.header-news,
.header-nav {
flex: 1;
}
<header class="site-header">
<div class="header-content-upper">
<nav class="header-news">Subscribe & get 15% OFF</nav>
<span class="header-brand">Giovanni</span>
<div class="header-nav">
<ul>
<li>Call + (448) 777 55 00</li>
<li>CART (0)</li>
</ul>
</div>
</div>
<div class="header-content-lower">
<div>HOME</div>
<div>MENU</div>
<div>ORDER</div>
<div>BLOG</div>
<div>CONTACT</div>
</div>
</header>
It won't wrap since you defined a fixed width for .header-content-lower. This will make the container stay 1000px wide, even if the screen is smaller.
Replace width: 1000px; with max-width: 1000px;, remove flex: 1; from the child divs of .header-content-lower, and set a fixed width for them (e.g. width: 200px; so that they have the same width as in your example).
You need to play around with align-items and justify-content on .header-content-lower to change the behavior when wrapped, e.g. with a media query which targets a window width < 1000px.
#import "main.css";
.site-header {
display: flex;
align-items: center;
flex-direction: column;
background-color: var(--main-color);
font-family: 'Ubuntu', sans-serif;
height: 150px;
}
.header-content-upper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
width: 90%;
color: var(--main-font);
font-size: 1.1vw;
}
.header-content-upper .header-brand {
color: var(--main-font);
font-family: Glosa;
text-align: center;
font-size: 3.5rem;
}
.header-content-upper .header-nav {
text-align: end;
}
.header-content-upper li {
list-style: none;
display: inline;
padding: 10px;
}
.header-content-lower {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
max-width: 1000px;
height: 50px;
border-top: 1px solid var(--second-font);
font-size: 1vw;
}
.header-content-lower div {
display: flex;
align-items: center;
justify-content: center;
/* flex: 1;*/
height: 50px;
width: 200px;
color: var(--second-font);
}
.header-content-lower div:nth-child(2n-1) {
border: 1px solid var(--second-font);
border-width: 0px 1px 0 1px;
}
.header-brand,
.header-news,
.header-nav {
flex: 1;
}
<header class="site-header">
<div class="header-content-upper">
<nav class="header-news">Subscribe & get 15% OFF</nav>
<span class="header-brand">Giovanni</span>
<div class="header-nav">
<ul>
<li>Call + (448) 777 55 00</li>
<li>CART (0)</li>
</ul>
</div>
</div>
<div class="header-content-lower">
<div>HOME</div>
<div>MENU</div>
<div>ORDER</div>
<div>BLOG</div>
<div>CONTACT</div>
</div>
</header>
Ok, so during the last weeks I've been trying to understand how html and CSS work, right now I'm struggling trying to make a grid layout. I'm trying to make my web responsive but when I work with percentages the percentages don't seem to apply correctly. For example there's an orange rectangle that's supposed to fit all the width of the screen, but with my code when the screen is pretty small it isn't large enough.
Here's the HTML and CSS (there are different settings depending on the media):
#media screen and (max-width:480px) {
body {
background-color: mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas: "header" "nav" "main" "footer";
}
header img {
display: block;
align-self: center;
justify-self: center;
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.button1 {
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
main {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 70% 30%;
grid-template-areas: "imatge" "descripcio";
}
.imatge {
background-color: mediumspringgreen;
display: inline-block;
}
.descripcio {
background: gold;
justify-content: center;
align-items: center;
display: inline-block;
width: 100%;
height: 50%;
}
footer {
display: inline-block;
width: 100%;
align-items: center;
justify-content: center;
}
}
#media screen and (min-width:481px) {
body {
background-color: mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas: "header" "nav" "main" "footer";
width: 100%;
height: 100%;
}
header img {
display: block;
align-self: center;
justify-self: center;
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.button1 {
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: "imatge descripcio";
}
.imatge {
background-color: mediumspringgreen;
}
.descripcio {
background: gold;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
width: 100%;
height: 50%;
}
footer {
display: inline-block;
width: 100%;
align-items: center;
justify-content: center;
}
span {
color: gold;
}
}
<header style="width: 100%;">
<p style="text-align:center;">
<a href="pàgina%20home.html">
<img src="https://i.imgur.com/BSHMhUe.png" alt="logo">
</a>
</p>
</header>
<nav style="width: 100%;">
<p class="rectangle">
<button class="button1" onclick="location.href='pàgina%20productes.html'">Productes</button>
<span> </span>
<button class="button1" onclick="location.href='pàgina%20contacte.html'">Contacte</button>
</p>
</nav>
<main>
<section style="text-align:center;" class="Imatge">
<h2 style="font-size:150%;">Producte Destacat</h2>
<a href="pàgina%20producte.html">
<p style="text-align:center;">
<img src="https://clubtech.es/wp-content/uploads/2018/12/playstation_4_console_controller_ps4_92842_3840x2160.jpg" alt="Producte destacat" style="width:40%">
</p>
</a>
</section>
<article style="text-align:center;" class="Descripcio">
<p></p>Description</article>
</main>
<footer>
<p style="text-align:center;">
Avís Legal-Privadesa-Termes d'ús
</p>
<p style="text-align:center; font-size:75%;">
Logo vector created by freepik - www.freepik.com
</p>
</footer>
Right now my problems are that elements don't change their size proportionally to the resolutions of the screen, they decrease or increase their size at different speeds. Also, sometimes elements from a grid cell overlap with elements of another cell, like if I leave the header img at 100% it overlaps with the rest of the elements in the html.
JSFiddle: https://jsfiddle.net/915seaLc/
Reset the margin of the body, and I recommend reset the padding to
body {
margin: 0;
padding: 0;
}
I want to make a logo which looks like this:
but I can't get it to work, this is what I have at the moment:
I want the logo on the left to be the same as the first picture I uploaded, does anyone know how to do this?
I tried with vertical-align: middle which doesn't work, and I tried display: flex and then align: center but that doesn't work either.
Here is my attempt:
header {
padding-top: 24px;
padding-bottom: 24px;
background: #1b1b2e;
width: 100%;
border-bottom: 1px solid black;
align-items: center;
display: grid;
grid-template-columns: 1fr 3fr;
}
header a {
text-decoration: none;
display: flex;
justify-content: space-between;
color: white;
}
header img {}
#nav {
display: flex;
justify-content: space-around;
}
#logo {
display: flex;
justify-content: space-around;
}
<header>
<div id="Logo"> <img src="img/logo_shape.png" alt="Logo">
<h1>Dublin apps</h1>
<h3>Ipad applications</h3>
</div>
<div id="nav">
Home Ipad Apps
Demonstrations
Leogards Media
connect us
</div>
</header>
As already mentioned Rickard Elimää your CSS targets #logo but your id says "Logo".
We must also put
flex-direction: column;
and some other adjustment to make it work.
I also created the graphic element in the css logo as it is very simple, if you want an image instead of the pseudo element you can put it inside h1 like this:
<h1><img src="path_to.png" alt="i">Dublin apps</h1>
and remove the css rules for the pseudo element.
#Logo h1:before
You will need to change the logo font to match the one in the image
header {
padding-top: 24px;
padding-bottom: 24px;
background: #1b1b2e;
width: 100%;
border-bottom: 1px solid black;
align-items: center;
display: grid;
grid-template-columns: 1fr 3fr;
}
header a {
text-decoration: none;
display: flex;
justify-content: space-between;
color: white;
}
#nav {
display: flex;
justify-content: space-around;
}
#Logo {
display: flex;
justify-content: space-around;
color: white;
flex-direction: column;
}
#Logo h1, #Logo h3 {
margin: 0;
}
#Logo h1 {
font-size: 24px;
display: flex;
align-items: center;
font-weight: 300;
}
#Logo h3 {
font-size: 14px;
padding-left: 24px;
font-weight: 300;
}
#Logo h1:before {
content: "i";
display: inline-block;
font-size: 14px;
color: black;
background-color: white;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50% 0 50% 50%;
margin-right: 4px;
}
<img src="https://i.stack.imgur.com/NPCDE.png" alt="">
<header>
<div id="Logo">
<h1>Dublin apps</h1>
<h3>Ipad applications</h3>
</div>
<div id="nav">
Home Ipad Apps
Demonstrations
Leogards Media
connect us
</div>
</header>
Try this answer.
header {
padding: 10px 20px;
background: #1b1b2e;
width: 100%;
border-bottom: 1px solid black;
align-items: center;
display: grid;
grid-template-columns: 1fr auto;
}
header img {
width: 25px;
margin-right: 5px;
}
#nav {
display: flex;
justify-content: space-around;
}
#nav a {
text-decoration: none;
color: white;
padding: 3px 5px;
margin: 0 2px;
}
#nav a.active {
background-color: #fff;
color: #111;
border-radius: 2px;
}
#logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.logo-text {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.logo-text h1, .logo-text h3 {
margin: 0;
color: #fff;
}
.logo-text h1 {
font-size:16px;
}
.logo-text h3 {
font-size:14px;
}
<header>
<div id="logo">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/512x512/plain/leaf.png" alt="Logo">
<div class="logo-text">
<h1>Dublin apps</h1>
<h3>Ipad applications</h3>
</div>
</div>
<div id="nav">
Home Ipad Apps
Demonstrations
Leogards Media
connect us
</div>
</header>
enter image description hereUse this css
#logo img{
margin:0 auto;
display:table;
}
im a bit lost:
im trying to make the space between 3 divs (horizontally) 40px, but it doesnt seem to work when i do it:
https://github.com/itsolidude/Tea_Cozy
i want the yellow marked parts to be 40px:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
top: 0;
}
#locations h2 {
flex: 1 0 100%; /* shorthand for: flex-grow:1;
flex-shrink: 0;
flex-basis: 100%; */
text-align: center;
position: absolute; /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
top: 1510px;
z-index: 3;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
#mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
#tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto 70px;
}
#tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}
.contact {
height: 200px;
}
#locations {
height: 500px;
width: 1200px;
margin: 0 auto;
background-image: url(../images/img-locations-background.jpg);
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.address {
background-color: black;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
}
#copyright {
text-align: left;
margin-left: 20px;
}
<div id="locations">
<h2>Locations</h2>
<div class="address">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
i put in the whole css. just in case something is affecting it. Pls explain what and why you did it :p
Don't use justify-content: space-between; as this will allot space depending on the available space.
Instead, center the flex-children and give them side margin of 20px (2 * 20px = 40px).
.wrap {
display: flex;
justify-content: center;
width: 90%;
margin: auto;
border: 1px solid grey;
}
.box {
background: #000;
width: 150px;
height: 150px;
margin: 20px;
}
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Alternatively, you could set a max-width of the parent container, thus making less available space for the children to spread out with the space-between style.
I'm building a line-through header that can span multiple lines. Using the sample code below, is it possible to write my CSS in such a way that the left and right divs are not needed? Where they could be added as pseudo-classes to my header class?
CodePen
.container {
box-sizing: border-box;
display: flex;
place-content: center space-evenly;
align-items: center;
}
.line {
flex: 1;
height: 2px;
background: black;
}
.header {
font-size: 50px;
margin: 0 30px;
text-align: center;
}
.header-broken:after {
content: '';
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 50px;
height: 5px;
flex: auto;
width: 100%;
height: 2px;
background: black;
}
<div class="container">
<div class="line"></div>
<div class="header">Normal Title<br>fdasfsaf</div>
<div class="line"></div>
</div>
It can be done with just one div, see the example below, add some margin to the pseudo elements as needed for spacing.
.container {
display: flex;
text-align: center;
}
.container:before,
.container:after {
content: "";
flex: 1;
background: linear-gradient(black, black) center / 100% 1px no-repeat;
}
<div class="container">
Normal Title<br>fdasfsaf
</div>
You can also try this.
HTML:
<div class="container">
<div class="header">
<h1>Normal Title
<br>fdasfsaf
</h1>
</div>
</div>
CSS:
.container {
display: flex;
text-align: center;
}
.header {
flex: 1;
}
.header h1 {
font-size: 50px;
margin: 0 30px;
text-align: center;
background-color: #fff;
display: inline-block;
}
.header:after {
content: '';
border-bottom: 1px solid #000;
display: block;
margin-top: -58px;
}