I don't know how to center icon with the text. I have SVG + text. I can do it with plain CSS(flex-box) but I have to use bootstrap. Also, I want to center text, so it will be centered as other parts of the webpage, I want it to be aligned vertically
I have this:
I want to get this:
I have tried different solutions but did not come up with a good idea.
So the questions are:
How to make text to be centered to the left so it looks centered?
How to aligned svg icon with the text?
thanks
<section class="perks">
<img src="./media/blueCircle.svg" alt="" />
<div class="container">
<div class="row">
<div class="col perksFirst">Perks of Meetlete</div>
<div class="w-100"></div>
<div class="row perksList">
<div class="col">Access to our secure video platform!</div>
<div class="col">
<img src="./media/2.svg" alt="" />Calls are executed through our
App!
</div>
<div class="w-100"></div>
<div class="col">Metelete calls take place on your time!</div>
<div class="col">None of your information is shared!</div>
<div class="w-100"></div>
<div class="col">Build loyalty with your fans!</div>
<div class="col">Make lifetime memories!</div>
<div class="w-100"></div>
<div class="col">Earn up to 10x more than other platforms!</div>
<div class="col">Meetlete calls are timed!</div>
</div>
<div class="w-100"></div>
<div class="col">
<button class="earlyAccess btn">Early access</button>
<div class="launchDate">Launching 2/14/21!</div>
</div>
</div>
</section>
.perks {
display: flex;
text-align: center;
margin-top: 310px;
position: relative;
}
.perks .earlyAccess {
margin-top: 117px;
}
.perks img {
position: absolute;
left: 0;
top: -50%;
}
.perks .row {
justify-content: center;
}
.perksList {
max-width: 860px;
display: flex;
justify-content: center;
align-items: center;
}
.perksList .col {
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
display: flex !important;
text-align: start;
margin-top: 26px;
}
.perksFirst {
margin-bottom: 77px;
font-size: 24px;
font-weight: 700;
}
.launchDate {
font-weight: 700;
font-size: 18px;
margin-top: 26px;
}
In order to align icons with the text you can put them together in a
Or you use bootstrap grid https://getbootstrap.com/docs/4.6/layout/grid/. You could use this easily to render it all dynamically, by putting your text in a list.
You can use text-align: center on the outer div (container) to center all. then text-align left in the inner one (perklist) in case this turns your text all left aligned.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
justify-content: center;
margin: auto;
text-align: left;
margin-top: 10px;
}
.heading {
text-align: center;
padding: .5rem;
}
.heading h3 {
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
}
.card {
background: whitesmoke;
padding: 2rem;
border: darkgrey
}
span {
display: flex;
vertical-align: middle;
padding-top: 1rem;
}
span img {
display: inline-flex;
height: 2rem;
}
span a {
font-size: 18px;
font-weight: 600;
line-height: 2rem;
padding-left: .5rem;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solution By Tarak</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="new.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-1"></div>
<div class="card col-xl-10 col-sm-12">
<div class="row">
<div class="heading col-12">
<h3>Perks of Meetlete</h3>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-md-12">
<span><img src="./test-tubes.svg" /><a>Access to our secure video platform!</a></span>
<span><img src="./test-tubes.svg" /><a>Metelete calls take place on your time!</a></span>
<span><img src="./test-tubes.svg" /><a>Build loyalty with your fans!</a></span>
<span><img src="./test-tubes.svg" /><a>Earn up to 10x more than other platforms!</a></span>
</div>
<div class="col-xl-6 col-md-12">
<span><img src="./test-tubes.svg" /><a>Calls are executed through our App!</a></span>
<span><img src="./test-tubes.svg" /><a>None of your information is shared!</a></span>
<span><img src="./test-tubes.svg" /><a>Make lifetime memories!</a></span>
<span><img src="./test-tubes.svg" /><a>Meetlete calls are timed!</a></span>
</div>
</div>
</div>
</div>
</div>
</body>
height of span img == line-height of span a (for it to be inline center)
change svg of your choice.
play with styles.
Related
My content images are stacking over one another, and I have set max width yet they take up more space than the desired. My other image under the heading is also taking up more space than the website designed. I tried deleting the .image selector in css but nothing changed.
* {
font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a {
font-size: 16px;
text-decoration: none;
color: #e5e7eb;
}
li {
list-style-type: none;
margin: 8px;
}
ul {
display: flex;
flex-direction: row;
}
.header {
background-color: #1f2937;
margin: 0;
padding: 0;
}
.header2 {
display: flex;
justify-content: space-around;
}
.heromain {
font-weight: bolder;
font-size: 48px;
color: #f9faf8;
}
.herotwo {
font-size: 18px;
color: #e5e7eb;
}
.section-left {
display: flex;
flex-direction: column;
}
.logo {
font-size: 24px;
color: #f9faf8;
font-weight: bold;
padding-top: 10px;
}
.content {
font-size: 36px;
font-weight: bolder;
color: #1F2937;
text-align: center;
}
.quote {
background-color: #e5e7eb;
font-size: 36px;
font-style: italic;
color: #1f2937;
padding: 100px 300px;
}
.action, button {
background-color: #3882f6;
color: white;
}
.action {
width: 650px;
height: 80px;
margin: 0 auto;
border-radius: 15px;
padding: 30px 100px;
}
button {
border-radius: 5px;
border: 2px solid white;
padding: 4px 17px;
width: 50px;
margin: 10px;
display: inline;
}
footer {
background-color: #1F2937;
color: #e5e7eb;
text-align: center;
padding: 30px;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.container {
display: flex;
justify-content: space-around;
padding: 100px;
}
.info {
border-radius: 15px;
border-color: #3882f6;
border-width: 4px;
max-width: 200px;
}
.information {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
flex: 1 1 auto;
}
.text {
text-align: center;
}
.image {
max-width: 200px;
}
<!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>My website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header2">
<div class="logo">Header Logo</div>
<ul>
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</ul>
</div>
<div class="container">
<div class="section-left">
<div class="heromain">This website is<br>awesome</div>
<div class="herotwo">This website has some subtext that goes here under the <br>main title. It is a smaller font and colors contrast.</div>
<button>Sign up</button>
</div>
<div class="image">
<img src="image.png">
</div>
</div>
</div>
<div class="content">Some random information.</div>
<div class="information">
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
</div>
<div class="quote">This is an inspiring quote, or a testimonial from a customer.
Maybe its just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.
<div class="attribution">-Thor, God of Thunder</div>
</div>
<div class="action">
<p><strong>Call to action! It's time!</strong><br>
Sign up for our product by clicking that button right over there!
</p>
<button>Sign up</button>
</div>
<footer>Copyright © The Odin Project 2021</footer>
</body>
</html>
The desired outcome for my images
The outcome I am getting:
[2]: https://imgur.com/O4EFYVo
Solution one:
you can fix that by adding bootstrap to your project, for example you want 3 picture be next each other, try this one and edit that by your image src
<!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">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>StackOverFlow</title>
</head>
<body>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</body>
</html>
or if you want 4 picture be next of each other change the md and g ... in line 17
Solution two:
or you can fix that with HTML and CSS with class and ... look at this one :
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
Remember that your pictures size are important too , and your web site it would be better to be responsive because of that i suggest you to use number one, but in the end both of them are useful and you can use them
Add this to your css:
.info img {
max-width: inherit;
}
I am new to HTML and CSS so sorry if this was a simple question. This is a image of what I am trying to achieve
Picture of number of clients and years of experience
And this is what I managed to make
My Question is how do I align the text) to the same level as the number
.experience {
color: orange;
display: flex;
width: 50%;
}
.number {
font-size: 5rem;
}
.number-text {
float: right;
padding-left: 10px;
}
.clients {
color: orange;
display: flex;
width: 50%;
}
<div class="row">
<div class="experience">
<div class="col-lg-auto">
<p class="number">
12
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Years Of <br> Experience.</p>
</div>
</div>
<div class="clients">
<div class="col-lg-auto">
<p class="number">
14
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Satisfied <br> Clients.</p>
</div>
</div>
</div>
Your html is far too complex for this and all the other answers are incorrect as they are centering the text rather than aligning it with the bottom of the text. You can do this properly using align-items: last baseline;.
.client {
display: flex;
align-items: last baseline;
}
.number {
font-size: 5rem;
}
.text {
margin-left: 1em;
}
<div class="client">
<div class="number">14</div>
<div class="text">
Years Of <br> Experience.
</div>
</div>
But if you need to use your html then you can do it like this:
.experience, .clients {
color: orange;
display: flex;
width: 50%;
align-items: last baseline;
}
.number {
font-size: 5rem;
}
.number-text {
float: right;
padding-left: 10px;
margin: 0;
}
.clients {
color: orange;
display: flex;
width: 50%;
}
<div class="row">
<div class="experience">
<div class="col-lg-auto">
<p class="number">
12
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Years Of <br> Experience.</p>
</div>
</div>
<div class="clients">
<div class="col-lg-auto">
<p class="number">
14
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Satisfied <br> Clients.</p>
</div>
</div>
</div>
you can use position: relative; and use top CSS property for moving down the text
I used a rem value for the top property, because if you px it not will be working for all devices.
.number-text {
/* here the trick */
position: relative;
top: 0.8rem;
}
I see also that you don't use the DRY method
DON'T REPEAT YOURSELF
do this instead
.experience,
.clients {
/* your CSS */
}
I also added the same colors you put in the image in reusable CSS variables
* {
--bg-color-blue: #252734;
--gold-orange: #e9b258;
}
that's it here the code
* {
--bg-color-blue: #252734;
--gold-orange: #e9b258;
}
body {
background-color: var(--bg-color-blue);
}
.experience,
.clients {
color: var(--gold-orange);
display: flex;
width: 50%;
align-items: center;
justify-content: center;
}
.number {
font-size: 5rem;
font-weight: bold;
}
.number-text {
float: right;
padding-left: 10px;
color: white;
/* here the trick */
position: relative;
top: 0.8rem;
}
.row {
display: flex;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!-- first parent -->
<div class="experience">
<div class="col-lg-auto">
<p class="number">
12
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Years Of <br> Experience.</p>
</div>
</div>
<!-- second parent -->
<div class="clients">
<div class="col-lg-auto">
<p class="number">
14
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Satisfied <br> Clients.</p>
</div>
</div>
</div>
</body>
</html>
The following code should work. Just add the align-items:center; property to the .experience div.
.experience{
align-items:center;
}
You can use align-self: center on the container to be centred.
body {
font-family: sans-serif;
background: #000000;
}
#app {
display: flex;
}
.experience {
color: #fff;
display: flex;
width: 50%;
}
.number {
font-size: 5rem;
}
.number-text {
float: right;
padding-left: 10px;
}
.clients {
color: #fff;
display: flex;
width: 50%;
}
p {
margin: 0; // set margin to zero
// the p tag has a margin by default that you have to remove
}
.align-self-center {
align-self: center; make the container align itself to center
}
<div id="app">
<div class="experience">
<div class="col-lg-auto">
<p class="number">10</p>
</div>
<div class="col-lg-auto align-self-center">
<p class="number-text">
Years Of <br />
Experience.
</p>
</div>
</div>
<div class="clients">
<div class="col-lg-auto">
<p class="number">12</p>
</div>
<div class="col-lg-auto align-self-center">
<p class="number-text">
Satisfied <br />
Clients.
</p>
</div>
</div>
</div>
As you can see from the title I want to know how to position this menu that I will show to you like on this UI design that I have made.
Here is the examples:
And here is how I tried to do it.
This is the code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="root flexbox">
<div class="navbar flexbox">
<div class="container flexbox align-center">
<img src="Slike/logo-avion.png" alt="">
<div class="right-column flexbox align-center">
<div class="navbar__navigation">
Početna
Destinacija
O nama
Partner
</div>
<div class="order-btn flexbox align-center">
Prijavi se!
</div>
<div class="konj flexbox align-center">
Registriraj se!
</div>
</div>
</div>
</div>
<div class="content">
<div class="container flexbox">
<div class="content__left_column">
<h2>Ostvarite svoje
putovanje iz snova!</h2>
<p>Potraži svoj odmor na pravom mjestu!</p>
<div class="linija">
<span class="linija crna-linija"></span>
</div>
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
</div>
<div class="content__right_column">
<img src="Slike/template_3_-_copy_dribble1dribble_1.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
The div class kvadrati is used to make this menu. I know this may seem complicated to describe but I hope you know what I meant by asking this question. I tried using flexbox display and grid still failed. I am not a beginner in CSS but clearly this is something that I have a problem with.
Here is the CSS code:
.prvi {
width: 22rem;
height: 5.2rem;
border-radius: 0.6rem;
border: 0.1rem solid #afb0b9;
}
EDIT: Here is all of the styles.css
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
font-family: Inter;
}
.right-column {
margin-left: auto;
}
body {
background-color: #ffffff;
line-height: 3rem;
}
.container {
width: 1300px;
margin: auto;
}
.root {
font-size: 1.2rem;
flex-direction: column;
min-height: 100%;
}
.flexbox {
display: flex;
}
.align-center {
align-items: center;
}
a {
text-decoration: none;
}
html, body {
height: 100%;
}
.navbar {
margin-top: 20px;
}
.navbar__navigation a {
color: #b8becd;
display: inline-flex;
font-size: 1.5rem;
font-weight: 400;
margin-right: 20px;
}
.order-btn {
height: 4.4rem;
margin-left: 50px;
border-radius: 0.8rem;
border: 0.1rem solid #57d2a3;
margin-right: 15px;
}
.order-btn a {
padding: 21px 24px;
}
.navbar__navigation .active {
color: #202336;
}
.konj {
height: 4.4rem;
border-radius: 0.8rem;
background-color: #57d2a3;
}
.konj a {
color: #ffffff;
padding: 21px 24px;
}
.content__left_column {
margin-left: 20px;
margin-top: 200px;
}
.content__right_column {
margin-top: 90px;
margin-left: auto;
}
.content__left_column h2 {
width: 55.9rem;
color: #202336;
font-family: "Playfair Display";
font-size: 6.4rem;
font-weight: 700;
line-height: 8rem;
}
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
.linija {
margin-top: 21px;
width: 3.2rem;
height: 0.3rem;
border-radius: 0.4rem;
background-color: #202336;
}
.kvadrati {
margin-top: 20px;
display: grid;
grid-template: 70px 70px / 226px 226px;
width: 226px;
height: 52px;
grid-gap: 20px;
padding: 16px;
}
.kvadrati div {
border-radius: 10px;
border: 1px solid gray;
}
A couple issues with your code
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
As you can see both the grid div <div class="kvadrati"> and the items <div class="kvadrati drugi flexbox align-center "> share the same class kvadrati. As a result they both create a 2x2 grid. You should remove the kvadrati class on the 4 grid items.
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
And in this part of the code you give the <p> elements a margin-top: 69px;. This causes the <p> Items in your grid to move down 69 pixels. You could change <p>Potraži svoj odmor na pravom mjestu!</p> to a <h3> style it using a class so it doesn't affect the other <p> elements.
Alternatively, since you probably want a dropdown list, you can avoid this by using <select> tags instead. See here for a guide on creating a custom select.
-----------
Here is a simple example on how to use a grid to create a 2x2.
If you need more information on how to use css grid, read on w3schools or MDN
body {
margin: 0;
height: 80vh;
width: 80vw;
}
.grid {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
width: 100%;
height: 100%;
grid-gap: 16px;
padding: 16px;
}
.grid div {
border-radius: 10px;
border: 1px solid gray;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I'm trying to create a podium using CSS and HTML. I have achieved to positionate the steps of the podium at the bottom by adding position: relative to the father and position: absolute; bottom: 0 to the steps, but as I want to display a text just above the steps, I'm having problems positioning this text there.
My first aproach was to put the text and the step on a div and positioning absolutely this div, but as the steps get their height by a percentage of their father the father needs to have a height: 100% property, so the div solution isn't valid.
Here I attach my code snippet:
#font-face {
font-family: DaggerSquare;
src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
}
#podium-box {
width: 100%;
margin: 0 auto;
}
.podium-number {
font-family: DaggerSquare;
font-weight: bold;
font-size: 4em;
color: white;
}
.step-container {
width: 100%;
position: relative;
}
.step {
width: 100%;
position: absolute;
bottom: 0;
}
.bg-blue {
background-color: #063b65;
}
#first-step {
height: 50%;
}
#second-step {
height: 35%;
}
#third-step {
height: 30%;
}
.centerBoth {
display: flex;
justify-content: center;
align-items: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="import" type="css" href="podium-chart.css">
<div id="podium-box" class="row" style="height: 400px">
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 2
</div>
<div id="second-step" class="bg-blue step centerBoth podium-number">
2
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 1
</div>
<div id="first-step" class="bg-blue step centerBoth podium-number">
1
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 3
</div>
<div id="third-step" class="bg-blue step centerBoth podium-number">
3
</div>
</div>
</div>
No need to use position:absolute just use flexbox and flex-columns.
Then push the text div to the bottom.
#font-face {
font-family: DaggerSquare;
src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
}
#podium-box {
margin: 0 auto;
display: flex;
}
.podium-number {
font-family: DaggerSquare;
font-weight: bold;
font-size: 4em;
color: white;
}
.step-container {
flex: 1;
display: flex;
flex-direction: column;
}
.step-container>div:first-child {
margin-top: auto;
text-align: center;
}
.step {
text-align: center;
}
.bg-blue {
background-color: #063b65;
}
#first-step {
height: 50%;
}
#second-step {
height: 35%;
}
#third-step {
height: 30%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="import" type="css" href="podium-chart.css">
<div id="podium-box" class="row" style="height: 300px">
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 2
</div>
<div id="second-step" class="bg-blue step centerBoth podium-number">
2
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 1
</div>
<div id="first-step" class="bg-blue step centerBoth podium-number">
1
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 3
</div>
<div id="third-step" class="bg-blue step centerBoth podium-number">
3
</div>
</div>
</div>
As has already been pointed out, you could probably start from scratch and structure this a bit better. But if you want to keep as is then just give the divs that contain the text a class and give them the following attributes:
position:absolute;
bottom:70px;
Basically, I want half the screen to be my image and the other half to have my text. But if the screen is very small, I want the text to go over the image and the image and text shrink. So far I have the big screen working, but when I go into small screen the text is still huge (making it go off the screen) and is still to the right of the image.
.html:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9 col-md-6">
<img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-3 col-md-6">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
.css
.first{
font-family: Cinzel;
color: black;
font-size: 45px;
font-weight: normal;
}
.second{
font-family: Cinzel;
color: black;
font-size: 20px;
font-weight: normal;
}
It's tricky to answer as you haven't specified what you mean by "too small" or how big your current image is. The smallest device is probably an old iPhone (320px). The following works for 320px but not below as the margin-left here is in pixels (percentage would be ideal). There is a jsbin here
.first {
font-family: Cinzel;
color: black;
font-size: 45px;
font-weight: normal;
}
.second {
font-family: Cinzel;
color: black;
font-size: 20px;
font-weight: normal;
}
#media screen and (max-width:320px) {
.first {
font-size: 16px;
text-align: center;
vertical-align: middle;
left: 0!important;
margin-left: -300px;
color: white;
}
.second {
font-size: 10px;
text-align: center;
vertical-align: middle;
margin-left: -300px;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-9 col-md-6">
<img class="img-responsive" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2014/06/Brain.jpg" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-3 col-md-6">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
You could use media queries to get text over the image. Override position attribute as it is shown here How to position text over an image in css
Also, there is no need to use col-xs-9 and col-xs-3. You can use col-xs-12. Atleast col-xs-3 is not needed (col-xs-9 is a choice).
Something similar to this (not tested):
<div class="container-fluid cntr">
<div class="row">
<div class="col-xs-12 col-md-6 image1">
<img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-12 col-md-6 text1">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
#media screen and (max-width: 767px) {
.cntr {
position: relative;
}
.image1 {
position: absolute;
left: 0;
top: 0;
}
.text1 {
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
}
}