I want to make a responsive layout. But I am doing something wrong. This is how I want to make my layout look like
.row_4 {
background-color: #F9F8FD;
height: 14.87%;
width: 100%;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.info {
margin-left: 4.83%;
margin-top: 2.9%;
float: left;
}
.action {
display: flex;
flex-flow: row;
margin-right: 3%;
}
<div class="row_4" id="rapper_1">
<div class="pfp">
<img src="profile_pics/eminem.jpg" alt="Eminem">
</div>
<div class="info">
<div class="name">
Eminem
</div>
<div class="number">
7867598568
</div>
<div class="designation">
RAPGOD
</div>
</div>
<div class="action">
<div class="message">
<i id="sms_logo" class="fa fa-comment-dots"></i>
</div>
<div class="call">
<i id="phone_logo" class="fa fa-phone"></i>
</div>
</div>
</div>
I never suggest using margin and % for centering stuff,
just flexbox, with their properties like justify and align
* {
/* this is important so image don't go outside the card div after writing 100% with padding */
box-sizing: border-box;
}
.row_4 {
display: flex;
background-color: #f9f8fd;
/* with this type of card, normally we try to make them responsive by width, not height. so is good having a static value here */
/* the card is 10rem (since I counted that you are using 15%, and my screen is 999px so 15% of 999px is 150px, that translate to 10rem (1rem = 16px) */
height: 10rem;
border-radius: 1rem;
}
.pfp img {
/* this 100% will only work if you added on the top box-sizing */
/* because the height then it will be (10rem - (0.5rem * 2)) */
height: 100%;
padding: 0.5rem;
border-radius: 1rem;
}
.info {
display: flex;
/* this make them like grid behaviur, but in flexbox */
flex-direction: column;
/* in the html a wrapped the first two elements in one div, so this will work */
justify-content: space-between;
padding: 1rem 0.5rem;
}
.action {
display: flex;
align-items: center;
justify-content: center;
/* so the .action can have all the width that remains, to can be centered responsivelly */
flex: 1;
gap: 1rem;
color: orange;
}
/* not important this next lines, just styling */
.info .name {
font-size: 2rem;
font-weight: 800;
}
.info .number {
opacity: 0.5;
}
/* .row_4 > * {
border: 1px dashed red;
} */
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="row_4" id="rapper_1">
<!-- 1 -->
<div class="pfp">
<img src="https://picsum.photos/200" alt="Eminem" />
</div>
<!-- 2 -->
<div class="info">
<!-- here I changed some stuff -->
<!-- basically I wrapped the first two element inside one, so we can add a space-between successfully -->
<div>
<div class="name">Eminem</div>
<div class="number">7867598568</div>
</div>
<div class="designation">RAPGOD</div>
</div>
<!-- 3 -->
<div class="action">
<div class="message">
<i id="sms_logo" class="fa fa-comment-dots"></i>
</div>
<div class="call">
<i id="phone_logo" class="fa fa-phone"></i>
</div>
</div>
</div>
</body>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: black;
/* ^^^ for demo purposes. because putting white on white is dumb */
}
.profile {
display: flex;
background: white;
padding: 0.25em;
border-radius: 10px;
justify-content: space-between;
max-width: 80%;
margin: 0 auto;
}
.profile__wrapper {
display: flex;
gap: .675em;
}
.profile__image {
background-size: cover;
aspect-ratio: 1;
width: 80px;
border-radius: 10px;
}
.profile__info {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-block: .5em .25em;
}
.profile__name {
font-family: sans-serif;
color: hsl(0 0% 50%);
font-weight: 700;
}
.profile__number {
color: hsl(220 100% 50%);
font-size: .8rem;
}
.profile__msg>svg {
width: 1.5rem;
color: orange
}
.profile__call>svg {
width: 2rem;
color: orange;
}
.profile__buttons {
margin: auto 0;
margin-right: 1.5em;
display: flex;
gap: 1em;
justify-content: center;
align-items: center;
}
<div class="profile">
<div class="profile__wrapper">
<div class="profile__image" style="background-image: url('https://randomuser.me/api/portraits/men/83.jpg')"></div>
<div class="profile__info">
<div class="profile__info_wrapper">
<div class="profile__name">Uncle Joe</div>
<div class="profile__number">123456</div>
</div>
<div class="profile__nickname">Broseph</div>
</div>
</div>
<div class="profile__buttons">
<div class="profile__msg">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><defs><style>.cls-1{fill: CurrentColor;}</style></defs><path class="cls-1" d="M448,76.56A38.44,38.44,0,0,1,486.4,115v230.4a38.44,38.44,0,0,1-38.4,38.4H66.2l-7.5,7.5-33.1,33.1V115A38.44,38.44,0,0,1,64,76.56H448M448,51H64A64,64,0,0,0,0,115V443.21A17.78,17.78,0,0,0,17.92,461a17.42,17.42,0,0,0,12.45-5.25L76.8,409.36H448a64,64,0,0,0,64-64V115a64,64,0,0,0-64-64Z"/><path class="cls-1" d="M332.8,191.76H179.2a12.8,12.8,0,0,1,0-25.6H332.8a12.8,12.8,0,1,1,0,25.6Z"/><path class="cls-1" d="M332.8,243H179.2a12.8,12.8,0,1,1,0-25.6H332.8a12.8,12.8,0,1,1,0,25.6Z"/><path class="cls-1" d="M332.8,294.16H179.2a12.8,12.8,0,1,1,0-25.6H332.8a12.8,12.8,0,0,1,0,25.6Z"/></svg>
</div>
<div class="profile__call">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><defs>
<style xmlns="http://www.w3.org/2000/svg">
.svg__phone__call1 {
transform: rotate(-45deg);
transform-origin: center center
}
</style>
</defs><path xmlns="http://www.w3.org/2000/svg" class="svg__phone__call1" d="M258.7,80.74,236.91,101.4c-74.85,72.75-64.43,247,0,309.87l21.79,20.66c5.68,5.39,15.16,5.39,21.79,0l42.64-41.32a14.64,14.64,0,0,0,0-20.66L276.7,324.15l-50.22,3.59c-15.16-14.37-15.16-129.34,0-143.71l52.11,2.69,44.53-44a14.64,14.64,0,0,0,0-20.66L280.49,80.74C273.86,74.46,264.39,74.46,258.7,80.74Z" fill="CurrentColor"/></svg>
</div>
</div>
In this answer I used a lot of flexbox tricks to create the layout.
let's break them down 1 by 1:
I wrapped the whole profile card with a div <div class="profile"></div>. If we look at its CSS, we can see that I put display: flex and justify-content: space-between. Flexbox puts the direct children on a horizontal line and space-between stores them like this: it takes all the available space at puts it between the flex items.
inside the profile div, we have 2 sections: profile-wrapper and profile-buttons. Let's start with profile-wrapper, it's a flex container with a gap, pretty basic. Now profile-buttons, it's a flex container with justify-content: center and align-items: center, they are both used to center the content of the flex container vertically and horizontally.
profile-image: it has background-size: cover. It's used to make the background shrink or grow to match the size of the element.
profile-info: it has display: flex combined with flex-direction: column to make the elements stackup vertically.
profile-info-wrapper: this div is just used to wrap the name and the phone number fields to make them act like one element. (check layout to understand the purpose).
FOR MORE INFO ON FLEXBOX LAYOUTS: Check MDN's docs
EXTRAS:
CSS grid
Free Course by CSS Guru Kevin Powell on responsive layouts
I have a header with a nav list and a logo in it. When the screen size shrinks to a certain size, I want the nav list to go away, and have a nav icon appear instead. I am having trouble sizing the image. Here is my html
<header>
<div class="navContainer">
<img src="download.png" alt="Nehemiah Logo" class="logo">
<!--consider adding a div to the drop down for easier styling-->
<nav>
<ul class= "navList">
<li class=navListItem><a class="navTag current"
href="nehemiahUniversity.html">Home</a></li>
<li class=navListItem><a class="navTag"
href="courses.HTML" >Courses</a>
<ul class="navDropList" id="navDropCourses">
<li class="navDropItem"><a class="dropTag"
href="courses.html#lifeSkillsSection">Life Skills</a></li>
<li class="navDropItem"><a class="dropTag"
href="courses.html#jobSkillsSection">Job Skills</a></li>
</ul>
</li>
<li class=navListItem>
<a class="navTag" href="training.html">Training
Material</a>
<ul class="navDropList">
<li class="navDropItem"><a class="dropTag"
href="training.html#productionSection">Production</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#warehouseSection">Warehouse</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#qualitySection">Quality Control</a></li>
<li class="navDropItem"><a class="dropTag"
href="training.html#blendingSection">Blending</a></li>
<li class="navDropItem"><a
class="dropTag" href="training.html#officeSection">Office</a></li>
</ul>
</li>
<li class=navListItem><a class="navTag"
href="resources.HTML">Resources</a></li>
</ul>
<!--styling the nav list that shows on smaller screens-->
</nav>
<div class=navIconContainer>
<img src="nav.png" alt="nav icon" class="navIcon">
</div>
</div>
</header>
And here is my css
body{
width: 100%;
height: 100%;
margin: 0;
background: #fff;
}
.navContainer {
width: 90%;
display: flex;
margin: 0 auto;
}
/*background color*/
header{
height: 150px;
background:#414141;
}
/* this makes it so the header block still shows even the logo and ul
are floated to the left and right, respectively*/
/*header::after {
content: '';
display: table;
clear: both;
}*/
/*have logo appear on the left and set sizing and round edges*/
.logo {
float:left;
width: 80px;
height: 80px;
border-radius: 50%;
margin-top: 20px;
margin-bottom: 20px;
}
/*maybe put this inside a div and center that div*/
.navIcon{
background-color: rgb(223, 196, 196);
display: flex;
height: 30%;
}
.navIconContainer{
display: none;
}
.navListSmall{
display: none;
}
/*styling nav responsiveness*/
/*create a mobile style nav for when screen is below certain pixel*/
#media screen and (max-width: 1400px) {
.navList {
display: none;
}
}
#media screen and (max-width: 1400px) {
.navIconContainer {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
}
I colored the container and the image background to make it easier to
see how they are being manipulated. Can someone help me get the size of
the container (red cube) to fit the header? i ultimately want that icon
to be centered horizontally and floated to the right. Thanks.
In the css, Remove height: 150px from header and add it to .navContainer.
Modify your css code
.navContainer {
width: 90%;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: space-between;
}
.navIcon has height: 30% which is the 30% of the parents height.
.navIconContainer is the parent and it has no height giving a height to it should fix this.
Also instead of floats try adding display: flex and justify-content: space-between to .navContainer
and to center .navIcon try adding display: grid and place-items: center to navIconContainer
I wanted the nav bar right at the top, to have the class with left on the left side, the class with middle right in the middle, and the class with right in the right side.
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.flex-container {
width: 100%;
}
.flex-container ul {
display: flex;
align-items: center;
justify-content: center;
}
.flex-container li {
border: 1px solid red;
}
.flex-container nav ul .nytl {
width: 189px;
height: 26px;
}
.flex-container nav ul .first {
justify-content: flex-start;
}
hr {
margin-top: 10px;
}
<div class="flex-container">
<nav>
<ul>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
</li>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
</li>
<li class="left">SPACE & COSMOS
</li>
<li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
<li class="right"><button>Subscribe</button> .
</li>
<li class="right"><button>Login</button></li>
</ul>
</nav>
<hr>
</div>
Try using auto margins to push the left and right elements away from the middle element.
(Also, since you're using the HTML5 nav element and CSS3 properties, you really don't need a ul to structure your layout. You can simplify your code substantially.)
nav {
display: flex;
align-items: center;
}
nav > * {
border: 1px solid red;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
hr {
margin-top: 10px;
}
* {
padding: 0;
margin: 0;
}
<nav>
<a href="#">
<img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#">
<img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
<button>Subscribe</button>
<button>Login</button>
</nav>
<hr>
Learn more about auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Here's another flex method you may find useful:
Aligning Three Divs Horizontally Using Flexbox
You may encounter another problem now: Because flex features such as auto margins, justify-content and align-items work by distributing free space, your middle item may not be perfectly centered. See these posts for more details and solutions:
Keep the middle item centered when side items have different widths
Center and right align flexbox elements
I would utilise the space-between option that flex brings with the justify-content property. You have to be careful of the way the code is listed for SEO purposes as opposed to placing anywhere and have the css reposition it all. It should cascade in natural order first.
.flex-thirds {
display: flex;
justify-content: space-between;
}
.flex-thirds .col {
width: 32%;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
<div class="flex-thirds">
<div class="col">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
</div>
<div class="col">
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
</div>
<div class="col">
<button>Subscribe</button>
<button>Login</button>
</div>
</div>
You can find more about justify-content here at css-tricks
I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.
I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:
You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.
Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.
HTML CODE
<nav class="navbar is-fixed-top">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</nav>
CSS CODE
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
How can I get my navigation like that?
Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
Here a codepen to play with.
Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start navbar-start--centered">
<a class="navbar-item" href="">Products</a>
<a class="navbar-item" href="">Our Story</a>
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-item" href="">Blog</a>
<a class="navbar-item" href="">Contact Us</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
<span>Cart</span>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.
Then use normal flex positioning to set the contents of the second (right) container to be right aligned.
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
.nav-container{
display:flex;
flex:1;
justify-content: flex-end;
}
.nav-container a {
margin:0 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<nav class="navbar is-fixed-top">
<div class="nav-container"></div>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>
I am trying to center my logo it is in a div with the id "logocont" here is my css code no matter how i tried is stay stuck at the left if i put display block my navigation bar goes in another line and logo will be centered.
#logocont {
display: inline-block;
float: none;
align-content: center;
text-align: center;
margin : 0 auto;
overflow : visible;
}
Note: I am using grid layout I created the grids in another css file and i am linking it.
Here is my HTML code:
<div class="gr-16" id="menu">
<div id="logocont" class="gr-2">
<a href="#">
<img id="logo" src="images/mylogo21.png" alt="Logo" runat="server" />
</a>
</div>
<div id="navbar" class="gr-5">
<nav>
<a href="#">
Home
</a>
<a href="#">
Programmers
</a>
<a href="#">
Request Program
</a>
</nav>
</div>
</div>
Use display inline-flex for your logo container
#logocont {
display: inline-flex;
align-items: center;
}
This example centers a div in a div:
<html>
<style>
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
</style>
<div id="outer">
<div id="inner">Foo foo</div>
</div>
I used the following CSS to make a vertically and horizontally aligned div accordingly to what i understood from your HTML. May you check if this helps? (link to JSFiddle: https://jsfiddle.net/est02o5m/1/)
CSS:
.gr-16 {
display: grid;
}
.gr-2 {
grid-column: 2;
background-color: red;
border: 1px solid black;
grid-column-start: 1;
grid-column-end: 2;
}
.gr-5 {
grid-column: 5;
grid-column-start: 3;
grid-column-end: 8;
}
#logocont {
width:100%;
height: 200px;
display: inline-flex;
float: none;
align-content: center;
text-align: center;
margin : 0 auto;
overflow : visible;
border: 2px solid black;
background: #ccc;
align-items: center;
justify-content: center;
}
If the css that i used doesn't correspond to what you're using may you complement it and update your question?
I fixed this problem by removing the nav tag from the div as well as the logo so my code became:
<div class="gr-16" id="menu">
<nav id="navbar">
Home
Programers
Request Program
</nav>
<a href="#" id="logocont">
<img id="logo" src="images/mylogo21.png" alt="Logo" runat="server" />
</a>
</div>
and changed the css to:
#logocont {
width : 100px;
display : block;
margin : 0 auto;
}