I am trying to make a simple webpage however I am stuck on one problem. As soon as I add more text underneath the four boxes unequally the position of these boxes messes up. I was trying adding the height and width in .content .text in CSS and it seems to work when I specify height 150px or any positive integer(however the text moves out from the parent div) but I want to achieve the result in a flexible way. Rather than defining the height, I want to implement the height so that no matter how long the text I add the container's height expands rather than moving the blue box up or down.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
box-sizing: border-box;
}
.header {
background-color: rgb(13, 13, 83);
padding: 0 200px;
}
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-links {
display: flex;
padding-top: 10px;
}
.right-links {
margin-left: auto;
}
.right-links ul li {
padding-left: 20px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 90px 0px;
}
.container .image {
margin-left: auto;
}
img {
height: 200px;
width: 400px;
}
button {
border: 2px solid rgb(68, 68, 211);
margin-top: 10px;
padding: 10px 20px;
font-size: large;
font-weight: 700;
background-color: rgb(68, 68, 211);
border-radius: 5px;
cursor: pointer;
color: white;
}
/* Section of thw code that i causing problem*/
.info {
color: black;
background-color: rgb(235, 195, 195);
padding: 30px 200px;
text-align: center;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 30px 0;
}
.card {
height: 150px;
width: 150px;
border: 3px solid rgb(48, 15, 235);
border-radius: 10px;
display: flex;
flex-direction: row;
}
.content .text {
max-height: auto;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/portfolio css/portfolio.css">
<title>My Portfolio</title>
</head>
<body>
<div class="header">
<div class="header-links">
<div class="left-links">
<ul>
<li>Header Logo</li>
</ul>
</div>
<div class="right-links">
<ul>
<li>Header Link one</li>
<li>Header Link two</li>
<li>Header Link three</li>
</ul>
</div>
</div>
<div class="container">
<div class="someInfo">
<h1>This website is awesome.</h1>
<p>The website has some subtext that goes here.</p>
<button>Sign Up</button>
</div>
<div class="image"><img src="https://media.istockphoto.com/photos/minar-e-pakistan-picture-id899141640" alt="Minar-e-Pakistan"></div>
</div>
</div>
</div>
<div class="info">
<h1>Some random information.</h1>
<div class="cards">
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
</div>
</div>
<div class="quote"></div>
<div class="callToAction"></div>
<div class="footer"></div>
</body>
</html>
Try using the following style on .cards
.cards {
display: flex;
justify-content: space-evenly;
/* start works, but doesn't have full browser support */
/* align-items: start; */
align-items: flex-start;
padding: 30px 0;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
padding: 30px 0;
}
You set the align-items to center instead of flex-start.
Now it will align the items on the top line.
Related
hello i have a two elements of position sticky 1st is NAV LIST with background of ORANGE, 2nd is HOME with background of PINK. now my goal is when i am scrolling i want to stick the Home while continuing scrolling other contents. but i don't have a idea how to do that.. the best way i did is i used overflow:scroll to hide other elements and achieve that goal. but i don't want to show other scrollbar like overflow. i want the only one default of scrollbar.
here is my code that i wrote
* {
margin:0px;
padding: 0px;
}
.first {
height:50px;
background:orange;
position:sticky;
top:0;
}
.second {
height:90vh;
background:pink;
position:sticky;
top:90px;
}
section{
text-align: center; display: flex; align-items: center; justify-content: center; color:white;
}
ul{
text-align: center; display: flex; align-items: center; justify-content: center; color:white; flex-direction: column;
list-style-type: none;
}
li{
font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section style="height: 90vh !important; font-size: 2rem; background: purple; ">
<h1>THIS IS A TITLE</h1>
</section>
<section class="first" style="height: 10vh !important; font-size: 1rem; background: orange;">
<h1>THIS IS A NAV LIST</h1>
</section>
<section style="height: 90vh; font-size: 2rem; background: cornflowerblue;">
THIS IS A CONTENT 1
</section>
<div class="second" style="display: flex; overflow-y: hidden;">
<div style="flex:1;">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PAGE</li>
<li>LOGIN</li>
</ul>
</div>
<div style="flex:3; overflow-y: scroll;">
<section style="height: 100vh; font-size: 2rem; background: green; ">
THIS IS A CONTENT 2
</section>
<section style="height: 100vh; font-size: 2rem; background: skyblue; ">
THIS IS A CONTENT 3
</section>
<section style="height: 100vh; font-size: 2rem; background: brown; ">
THIS IS A CONTENT 4
</section>
<section style="height: 100vh; font-size: 2rem; background: violet; ">
THIS IS A CONTENT 5
</section>
</div>
</div>
</div>
</body>
</html>
You can hide this way lets try
CSS
.hide-scrollbar{
overflow: scroll;
}
.hide-scrollbar::-webkit-scrollbar {
background: transparent; //this will hide the scrollbar
width: 0px;
}
Div tag
<div class="hide-scrollbar"></div>
* {
margin:0px;
padding: 0px;
}
.hide-scrollbar {
overflow: scroll;
}
.hide-scrollbar::-webkit-scrollbar {
background: transparent;
width: 0px;
}
.first {
height:50px;
background:orange;
position:sticky;
top:0;
}
.second {
height:90vh;
background:pink;
position:sticky;
top:90px;
}
section{
text-align: center; display: flex; align-items: center; justify-content: center; color:white;
}
ul{
text-align: center; display: flex; align-items: center; justify-content: center; color:white; flex-direction: column;
list-style-type: none;
}
li{
font-size: 2rem;
}
<html>
<head>
<title></title>
</head>
<body>
<section style="height: 90vh !important; font-size: 2rem; background: purple; ">
<h1>THIS IS A TITLE</h1>
</section>
<section class="first" style="height: 10vh !important; font-size: 1rem; background: orange;">
<h1>THIS IS A NAV LIST</h1>
</section>
<section style="height: 90vh; font-size: 2rem; background: cornflowerblue;">
THIS IS A CONTENT 1
</section>
<div class="second" style="display: flex; overflow-y: hidden;">
<div style="flex:1;">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PAGE</li>
<li>LOGIN</li>
</ul>
</div>
<div style="flex:3;" class="hide-scrollbar"> <!-- changes here-->
<section style="height: 100vh; font-size: 2rem; background: green; ">
THIS IS A CONTENT 2
</section>
<section style="height: 100vh; font-size: 2rem; background: skyblue; ">
THIS IS A CONTENT 3
</section>
<section style="height: 100vh; font-size: 2rem; background: brown; ">
THIS IS A CONTENT 4
</section>
<section style="height: 100vh; font-size: 2rem; background: violet; ">
THIS IS A CONTENT 5
</section>
</div>
</div>
</div>
</body>
</html>
I want to make header like on the photo:
Now it looks like that:
header
Here is the html code:
<header class="header">
<div class="container">
<nav class="navBar">
<div class="navBar-wrapper">
<div class="img-logo">
<img src="./img/logo.jpg" alt="" srcset=""></div>
<div class="home">Home</div>
<div class="aboutUs">About us</div>
<div class="findSpace">Find space</div>
<div class="share-space">Share space</div>
<div class="promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
And here is css:
Is there any way to add space between logo and move the navigation to the left?
body{
font-family:"Poppins",sans-serif;
font-weight: 400;
}
.container{
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header{
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
}
.navBar-wrapper div{
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home{
font-weight: 700 !important;
color:#F78434 !important;
}
How can I make a space between logo and nav?
Tried to access second child using nth-child(2), but that didn't work.
Code snippet: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
You can do that by simply applying margin-right: auto; to the img-logo-container.
Note that this will affect the parent containers justify-content: space-between;, so I would suggest applying another CSS-property such as gap: 10px; to navBar-wrapper.
Alternatively, you could wrap all the links in the navbar inside another container for better control in your navbar.
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.img-logo img {
max-width: 100px;
}
.img-logo {
margin-right: auto;
}
.container {
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
.header {
height: 112px;
width: 100%;
background: #fff;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navBar-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.navBar-wrapper div {
font-size: 16px;
line-height: 24px;
color: #323232;
margin-top: 28px;
}
.home {
font-weight: 700 !important;
color: #F78434 !important;
}
<header class="header">
<div class="container">
<nav class="navBar">
<div class="navBar-wrapper">
<div class="img-logo">
<img src="https://4m4you.com/wp-content/uploads/2020/06/logo-placeholder.png" alt="" srcset=""></div>
<div class="home">Home</div>
<div class="aboutUs">About us</div>
<div class="findSpace">Find space</div>
<div class="share-space">Share space</div>
<div class="promoteSpace">Promote space</div>
</div>
</nav>
</div>
</header>
CLICK HERE TO SEE WHAT IT LOOKS LIKE RIGHT NOW!!!
CLICK HERE TO SEE MY GOAL-ish
(had to hide my name and face for privacy names in the picture and censor my name in the html)
1. So basically I was wondering how I could put the text and the image in two separate columns side by side?
2. Also, I don't know how to remove that space between the header and main part. I'm sorry if this seems ridiculous.
HTML (not all of it, just the important part):
<h4>My Portfolio</h4>
<nav>
<ul>
<li>Home</li>
<li>Education</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
<div class="intro">
<p>
<b>Hi!</b>
<br>
My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.
</p>
<img src="Me.jpg" alt="A picture of me in front of pink flowers" width="500" height="500">
</div>
CSS:
body{margin-left: 10%;
margin-right: 10%;
margin-top: 2em;
}
header{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
h4{
padding: 20px;
}
.wrapper{
background-color: #a989d6;
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul{
list-style-type: none;
}
nav a{
text-decoration: none;
padding: 20px;
}
nav li{
display: inline;
}
.intro{
text-align: center;
align-items: center;
}
main{
background-color: #dfcff6;
}
footer{
background-color: #a989d6;
text-align: center;
padding: 20px;
font-style: italic;
}
You probably want to use display grid for the columns. But it should work with display flex also.
For the space remove the margin and padding.
Something like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content">content</div>
<div class="content">content</div>
</div>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container{
height: 100vh;
background-color: yellow;
display: grid;
grid-template-columns: 1fr 1fr;
}
.content{
display: grid;
place-items: center;
border: 1px solid blue;
}
</style>
</body>
</html>
Here's my solution using flex:
.intro {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
text-align: center;
background-color: #dfcff6;
}
body{
margin-left: 10%;
margin-right: 10%;
margin-top: 2em;
}
<div class="intro">
<p>
<b>Hi!</b>
<br> My name is <b>insert my name here</b> and I am a first year <b>computer science</b> student.
</p>
<img src="https://fotojoker.pl/blog/wp-content/uploads/autor-300x300.jpg" alt="Another photo because I have not original :)" width="500" height="500">
</div>
I am using flexbox and the footer is outside of flexbox contents.
my issue is the footer is in the middle of flex items and is not setting on the bottom. I don't know what I did wrong. everything I've tried either hasn't worked so far.
any help will be apperiaciate.thanks
here is my full code : https://codepen.io/ROY1319/project/editor/ANyGyr
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #9bf6ff;
font-family: 'Oswald', sans-serif;
width: 100%;
}
#headerExperience {
line-height: 200px;
font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: khaki;
background-color: steelblue;
background-image: url("images/Experience\ background\ imagee.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 25px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
.century,
.LNA {
border: 2px solid black;
font-size: 16px;
background-color: #E5ECE9;
display: block;
}
.century,
.LNA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 15OPX
}
.headers,
.tasks {
display: block;
align-content: space-around;
}
/* nav and ul */
ul {
overflow: hidden;
display: inline-block;
/* how do I set the vertical spacing between the list items? */
}
li {
margin: 10px 0;
letter-spacing: 2px;
}
footer {
background-color: orangered;
padding: 0 1rem;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer .foot {
display: flex;
justify-content: space-between;
align-items: center;
color: red;
padding: 5em 0;
}
footer ul {
list-style: none;
margin: 0;
}
footer li {
display: inline-block;
padding: 0.75rem 1.25rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="experience.css" />
<title>Experience</title>
</head>
<body>
<!--Header-->
<div id="headerExperience">
<h1>Experience</h1>
</div>
<!--container-->
<div class="container">
<!-- Century-->
<div class="century">
<div class="media">
<img src="imag logo.png" alt="CenturyImage" />
<figcaption>Century Logo</figcaption>
</div>
<div class="headers">
<h2>ddddd</h2>
<h3>IT student Worker</h3>
<h4>Whie MN,2018</h4>
</div>
<div class="tasks">
<h5>TASKS</h5>
<ul>
<li>
1.Instructed users over the phone by describing what to look for and steps to take.
</li>
<li>
2.Adapted to change and learn new version of Microsoft quickly.
</li>
<li>
3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
</li>
<li>4.Created appropriate technical documents.</li>
</ul>
</div>
</div>
<!-- lNA-->
<div class="LNA">
<div class="media">
<img src="images/logo.jpg" alt="logo" />
<figcaption>LNA Logo</figcaption>
</div>
<div class="headers">
<h2>LNA</h2>
<h3>Digital Support Specialist</h3>
<h4>Minneapolis MN,2021-Present</h4>
</div>
<div class="tasks">
<h5>Tasks</h5>
<ul>
<li>1.Update and manage a simple program website.</li>
<li>2.Help participants access free and safe internet service.</li>
<li>
3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
</li>
<li>
4.Distribute free laptops and tech accessories to participants.
</li>
<li>5.Lead small student groups practicing computer skills.</li>
</ul>
</div>
</div>
</div>
<footer> // footer started here
<div class="foot">
<div class="copyright">© A Team</div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Experience</li>
<li>Achievemants</li>
<li>About</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I am trying to replicate a full-width rectangle div on a website but I'm having problems with responsiveness and mobility.
Here's an example of what I'm trying to replicate.
And here's what I have so far.
The problem is that the text won't go inside the separate boxes and it breaks in mobile version.
Here's my snippet:
HTML
<div class="row remove-container">
<div class="speech-bubble1 test-text">
<div class="row">
<h3 class="strong-text felinetitle">ADD</h3>
</div>
<div class="row">
<ul id="feline-ul">
<li>
<h6>Heartworm Test</h6>
</li>
<li>
<h6>$25</h6>
</li>
</ul>
</div>
</div>
<div class="speech-bubble speech-bubble-top">
<div class="container" style="padding-top: 35px; padding-bottom: 35px;">
<h3 class="strong-text felinetitle2">
A LA CARTE </h3>
<div class="row">
<div class="col-lg-9">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-6">
DHPP or DHLPP
</div>
<div class="col-sm-6">
Canine Flu
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.speech-bubble {
position: relative;
background-color: #045faf;
width: 100%;
height: 150px;
color: white;
text-align: center;
font-family: sans-serif;
}
.speech-bubble1 {
position: absolute;
background-color: #045faf;
width: 32%;
height: 150px;
left: 0;
color: white;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
.remove-container {
margin: 0 !important;
padding: 0 !important;
}
.serviceprice {
display: flex;
justify-content: center;
padding-top: 50px;
}
.speech-bubble {
position: relative;
background-color: #045faf;
width: 100%;
height: 150px;
color: white;
text-align: center;
font-family: sans-serif;
}
.speech-bubble1 {
position: absolute;
background-color: #045faf;
width: 32%;
height: 150px;
left: 0;
color: white;
text-align: center;
z-index: 1;
font-family: sans-serif;
}
.remove-container {
margin: 0 !important;
padding: 0 !important;
}
.serviceprice {
display: flex;
justify-content: center;
padding-top: 50px;
}
#feline-ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#feline-ul li{
float: left;
margin-left: 70px;
}
#feline-ul2{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#feline-ul2 li{
float: left;
margin-left: 70px;
}
.test-text{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}
I'm having problems on the second box with my texts not compressing into a square/container. It just goes full width.
I just recreated your structure to show you an minimal example.
tl;dr; Your bootstrap code is not property nested.
What did i do?
I wrapped the row into a container. A container is the element which wraps all rows in it. There is a .container and .container-fluid where the .container-fluid is for full-width layouts. Below a container is a row. A row is always split into 12 parts in bootstrap. You can specify the amount of columns for each display width. Read up on the width breakpoints at the bootstrap grid doc. You will NEVER want to have a .row with a nested .row. A row is always a parent of a column. If you resize my example you will notice that these two columns (.col-md-8 and .col-md-4) are resizing to two 12-width column on small size devices.
And if you have key-value pairs as data i'd recommend to use tables instead of listings. This is just a semantical tip. A list covers just an enumeration like a shopping list. Instead a table is suited for object-like formatting (starting at one attribute): e.g. a dish which has a price.
*{
color: white;
}
footer{
background-color: #045faf;
padding: 20px;
}
#footer--left, #footer--right{
padding: 0 20px;
}
#footer--left{
-webkit-box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}
table{
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="container">
<div class="row">
<div id="footer--left" class="col-md-4">
<h3>Some Head Text</h3>
<table>
<tr>
<td>Value</td>
<td>25$</td>
</tr>
</table>
</div>
<div id="footer--right" class="col-md-8">
<h3>Some Head Text</h3>
<table>
<tr>
<td>Value</td>
<td>25$</td>
</tr>
</table>
</div>
</div>
</div>
</footer>
Well, your example of code appears to me too overloaded. I would do in this way:
.blocks {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.blocks .block {
border: 1px solid #000;
height: 150px;
}
.blocks .block h3 {
text-align: center;
padding: 0;
margin: 0;
}
.blocks .block ul {
list-style-type: none;
padding-left: 0;
}
.blocks .block ul li {
padding: 0 0 0 15px;
margin: 0;
}
.blocks .block ul li:nth-child(1n) {
display: inline;
}
.blocks .block:first-child {
width: 33%;
}
.blocks .block:last-child {
width: 66%;
}
<div class="blocks">
<div class="block">
<h3>Add</h3>
<ul>
<li>Service 1</li>
<li>5$</li>
<br>
<li>Service 2</li>
<li>10$</li>
<br>
<li>Service 3</li>
<li>15$</li>
</ul>
</div>
<div class="block">
<h3>Add</h3>
<ul>
<li>Service 1</li>
<li>5$</li>
<br>
<li>Service 2</li>
<li>10$</li>
<br>
<li>Service 3</li>
<li>15$</li>
</ul>
</div>
</div>