I need the table part align in the image but i'm using bootstrap container, col-md-4 and also i need お知らせ to be at the top when using mobile.
HTML:
<div class="container padding" id="temp">
<div class="row text-center padding">
<div class="col-md-4">
<img src="sbpage/img/img1.png">
<div class="txt">
<h3>かっこよく<br>
しっかり稼げる</h3>
<h4>
マグロなど一匹あたり約１～２万円で<br>
売れるので月収100万円も夢ではあ<br>
りません。目指せ年収1000万円！
</h4>
</div>
</div>
<div class="col-md-4">
<img src="sbpage/img/img2.png">
<div class="txt">
<h3>大物釣って<br>
家族に自慢！</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br>
ではない、がここにはある！うちの父<br>
ちゃんりょうマンやき！そんな声が聞こ<br>
えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img src="sbpage/img/img3.png">
<div class="txt">
<h3>漁師になるなら<br>
土佐が一番！</h3>
<h4>
日本を代表する漁場といえば、何とい<br>
っても言わずと知れた南国土佐。釣っ<br>
た魚はおそらくどこにも負けない旨さ<br>
のものばかり！土佐の高知は日本一<br>
魚がうまい所なのです。
</h4>
</div>
</div>
</div>
</div>
CSS:
#temp h3{
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4{
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
#info{
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info tr a{
color: white;
padding-left: 25px;
float: left;
}
#info tr td a:hover{
color: #ffff00;
}
Alignment
News table
Note that I've made the footer #info heading to go from left aligned to center on smaller screens. the images are also responsive so that they don't overlap on smaller screens. Images are aligned with the #info borders.
Here is your updated code: Codepen
#temp h3 {
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4 {
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
#info {
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info a {
color: white;
padding-left: 25px;
float: left;
text-decoration: underline;
}
#info a:hover {
color: #ffff00;
text-decoration: none;
}
#info .txt {
height: 2em;
}
.headin {
text-align: center
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex pt-4" id="temp">
<div class="col-md-4">
<img class="img-fluid" src="https://picsum.photos/900?image=0" alt="">
<div class="txt text-center">
<h3>かっこよく<br> しっかり稼げる
</h3>
<h4>
マグロなど一匹あたり約１～２万円で<br> 売れるので月収100万円も夢ではあ
<br> りません。目指せ年収1000万円！
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://picsum.photos/900?image=2" alt="">
<div class="txt text-center">
<h3>大物釣って<br> 家族に自慢！
</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br> ではない、がここにはある！うちの父
<br> ちゃんりょうマンやき！そんな声が聞こ
<br> えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://picsum.photos/900?image=6" alt="">
<div class="txt text-center">
<h3>漁師になるなら<br> 土佐が一番！
</h3>
<h4>
日本を代表する漁場といえば、何とい<br> っても言わずと知れた南国土佐。釣っ
<br> た魚はおそらくどこにも負けない旨さ
<br> のものばかり！土佐の高知は日本一
<br> 魚がうまい所なのです。
</h4>
</div>
</div>
</div>
<div class="d-flex p-3">
<div class="col-sm-12" id="info">
<div class="txt h5 text-xs-center text-sm-center text-md-left headin">
<b>お知らせ</b>
</div>
<div class="container-fluid">
<div class="row">
<div>2019.1.20 </div>これはテストのための長いリンクです。
</div>
<div class="row">
<div>2019.1.21 </div>これもまた長いリンクです。
</div>
</div>
</div>
</div>
</body>
それが役立つことを願います
平和 🖖
I'm not sure what you are exactly looking for. But as to my understanding setting your image width to 100% within the container would solve your alignment issue.
.col-md-4 img{
width: 100%;
}
And to answer your second question (News table), you need to show your news table in your markup so that I can provide you with an solution. Cheers!
Hope this will help you. I've just create the class for <img> tag.
.img
{
height: 30%;
width: 100%;
}
It shows the aligned image.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
#temp h3{
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4{
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
.img
{
height: 30%;
width: 100%;
}
#info{
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info tr a{
color: white;
padding-left: 25px;
float: left;
}
#info tr td a:hover{
color: #ffff00;
}
</style>
</head>
<body>
<div class="container padding" id="temp">
<div class="row text-center padding">
<div class="col-md-4">
<img class="img" src="https://i.stack.imgur.com/ac47X.png">
<div class="txt">
<h3>かっこよ<br>
しっかり稼げる</h3>
<h4>
マグロなど一匹あたり約１～２万円で<br>
売れるので月収100万円も夢ではあ<br>
りません。目指せ年収1000万円！
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img" src="https://i.stack.imgur.com/ac47X.png">
<div class="txt">
<h3>大物釣って<br>
家族に自慢！</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br>
ではない、がここにはある！うちの父<br>
ちゃんりょうマンやき！そんな声が聞こ<br>
えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img" src="https://i.stack.imgur.com/ac47X.png">
<div class="txt">
<h3>漁師になるなら<br>
土佐が一番！</h3>
<h4>
日本を代表する漁場といえば、何とい<br>
っても言わずと知れた南国土佐。釣っ<br>
た魚はおそらくどこにも負けない旨さ<br>
のものばかり！土佐の高知は日本一<br>
魚がうまい所なのです。
</h4>
</div>
</div>
</div>
<!--div class="d-flex p-3"-->
<div class="row">
<div class="col-sm-12" id="info">
<div class="txt h5 text-xs-center text-sm-center headin" style="text-align:center;">
<b>お知らせ</b>
</div>
<div class="container-fluid">
<div class="row">
<div>2019.1.20 </div>これはテストのための長いリンクです。
</div>
<div class="row">
<div>2019.1.21 </div>これもまた長いリンクです。
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And I've used the online bootstrap package. Instead of that use your downloaded package. So you can avoid the uncaught errors.
Best of luck.
Related
I am working on project where in final result, I need to have like this
As you can see in modal, there is background-image and 2 icons, my problem is I don't know how to make it,
I did a div with image background but for icons I have them in psb format and I don't know how to put them on the background in beautiful way .
I tried to screen part of icon and put it but it wasn't good
<section id="about">
<div class="container-fluid mt-0" style="background-image: url(background.png);background-size:cover;height:550px">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading mt-5">Nos activités</h2>
</div>
</div>
<div class="row text-center" >
<div class="col-md-6 image" >
<img src="icon1.png">
</div>
<div class="col-md-6" style="padding-top: 100px">
<img src="icon2.png">
</div>
</div>
<!--
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading ">Nos dernières réalisataions</h2>
</div>
</div>
</div>-->
</section>
This is the structure I'm doing - just replace the images and add the font type
.activities {
background-image: url('http://inspirationhut.net/wp-content/uploads/2013/05/61.png');
background-position: center;
background-size: cover;
width: 100%;
min-height: 100vh;
}
.activities .title {
margin: 0;
padding: 25px 0;
color: #5ABF28;
font-weight: bold;
}
.activities .row {
min-height: calc(100vh - 135px);
align-items: center;
}
.activities .activity {
display: block;
text-decoration: none;
margin: 10px auto;
}
.activities .activity p {
font-weight: bold;
color: #999;
}
.activities .activity button {
width: 30px;
height: 30px;
line-height: 0;
border-radius: 100%;
padding: 0;
margin: 0;
outline: 0;
background: none;
border: 2px solid #aaa;
font-size: 20px;
color: #999;
padding-bottom: 10px;
}
.activities .activity:hover p,
.activities .activity:hover button {
color: #5ABF28;
border-color: #5ABF28;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="activities text-center">
<div class="container">
<h2 class="title pt-5">Nos activités</h2>
<div class="row">
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/in/en/images/products/smycka-artificial-flower__0903311_PE596728_S5.JPG?f=s" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">entretien de jardin</p>
<button>...</button>
</a>
</div>
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/us/en/images/products/smycka-artificial-flower-rose-white__0903190_PE596774_S5.JPG" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">creation de jardin</p>
<button>...</button>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
Struggling to understand bootstrap, I'm trying to make a header that looks like the image below and stays like that for all screens sizes, however I don't seem to get the results using the code below, help?
.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row intro">
<div class="col-md-12">
<div class="row">
<h1 class="what">This is Text</h1>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<h3 style="float:left">BIGGER </h3>
</div>
<div class="col-lg-1">
<h1> ?</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<hr/>
</div>
</div>
</div>
</div>
Please replace this code with you old code.
I think it's help for you?
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row intro">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6">
<h1 class="what">This is Text</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h3>BIGGER <span>?</span></h3>
</div>
</div>
</div>
</div>
</div>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.intro {
top: 20%;
left: 32%;
color: black;
font-weight: bold;
font-size: 18px;
}
h1 {
color: green !important;
font-weight: bold;
font-size: 42px;
line-height: 1rem !important;
}
h3 {
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
position: relative;
margin: 0;
line-height: 1;
}
h3 span {
font-size: .5em;
display: inline-block;
transform: translateY(-75%);
line-height: 1;
}
h3:after {
content: '';
position: absolute;
border-bottom: 6px solid black;
bottom: 0;
left: 30%;
right: 0;
}
</style>
I saw your code and I can see unwanted tag because I am not able to see the opening tag of hr and some edits in style sheet.
CSS:
.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
}
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}
HTML:
<div class="row intro">
<div class="col-md-12">
<div class="row">
<h1 class="what">This is Text</h1>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<h3 style="float:left">BIGGER </h3>
</div>
<div class="col-lg-1">
<h1> ?</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
</div>
</div>
</div>
</div>
Be sure to load your styles after bootstrap. Changed your h3 a little, added the ? in a span and am using a pseudo element for the underline.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.intro {
top: 20%;
left: 32%;
color: black;
font-weight: bold;
font-size: 18px;
}
h1 {
color: green !important;
font-weight: bold;
font-size: 42px;
line-height: 1rem !important;
}
h3 {
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
position: relative;
margin: 0;
line-height: 1;
}
h3 span {
font-size: .5em;
display: inline-block;
transform: translateY(-75%);
line-height: 1;
}
h3:after {
content: '';
position: absolute;
border-bottom: 6px solid black;
bottom: 0;
left: 30%;
right: 0;
}
</style>
<div class="container">
<div class="row intro">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6">
<h1 class="what">This is Text</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h3>BIGGER <span>?</span></h3>
</div>
</div>
</div>
</div>
</div>
This should do what u want in terms of bootstrap. If you want to change the spacing size and color of the text then use CSS but this way will keep everything the same cross browser
<html>
<head>
<title> C.E.O.
</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.cdn.com/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Background image builder -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="head" style="text-align:center;"> This is text </h1>
<h1 class="head2" style="text-align:center;"> This is too </h1>
<h3 class="subhead" style="text-align:center; font-size: 90px;"> BIGGER? </h3>
</div>
</div>
</div>
</body>
</html>
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;
}
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 6 years ago.
I am styling steps 1,2,3 for my landing page. I use the bootstrap framework in this case.
What I want is just move text for step 1 and step 3 down a little bit but leave step 2 as normal.
.steps:.step:first-child:last-child h5 {
margin-top: 25px;
}
.step {
padding-left: 130px;
padding-top: 12px;
padding-bottom: 25px;
background-color: black;
height: 110px;
border: 2px solid #62a9af;
border-radius: 60px 0px;
}
.step .number {
position: absolute;
top: 14px;
left: 25px;
font-family: "Oswald", sans-serif;
color: #ffbe01;
font-size: 4em;
line-height: 1.4em;
text-align: center;
width: 1.5em;
height: 1.5em;
background-color: rgba(98, 169, 175, 0.25);
border-radius: 50%;
}
.step h5 {
font-family: "Oswald", sans-serif;
font-size: 2em;
color: white;
font-weight: 500;
text-transform: uppercase;
}
.steps {
margin-top: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">1</div>
<h5>REGÍSTRATE</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">2</div>
<h5>SIGUE LAS INSTRUCCIONES</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">3</div>
<h5>¡JUEGA!</h5>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
My Codepen
I don't think that's the best way to solve the problem you're facing, I think you should use flexbox, it's a lot more responsive. Here's my code.
* {
font-family: Oswald, sans-serif;
}
.step {
background-color: #000;
height: 110px;
border: 2px solid #62a9af;
border-radius: 60px 0;
display: flex;
align-items: center;
}
.step .number {
color: #ffbe01;
font-size: 4em;
line-height: 1.4em;
text-align: center;
width: 1.5em;
height: 1.5em;
background-color: rgba(98, 169, 175, .25);
border-radius: 50%;
margin: 15px;
}
.step h5 {
font-size: 2em;
color: #fff;
font-weight: 500;
text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">1</div>
<h5>REGÍSTRATE</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">2</div>
<h5>SIGUE LAS INSTRUCCIONES</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">3</div>
<h5>¡JUEGA!</h5>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I've simplified your CSS a little, and also changed how your number is added. You'll notice display: flex; and align-items: center; are now in .step this means everything inside .step is vertically central.
Now the text in each step will look central no matter how many lines they take up.
I hope this helps.
Just add an id for the 2 steps:
HTML:
<h5 id="heightdown">REGÍSTRATE</h5>
<h5 id="heightdown">¡JUEGA!</h5>
CSS:
#heightdown {
padding-top: 5px;
}
My title box is too wide. It should only be as wide as the title-text inside it called "WEBSITE TITLE".
Is it possible to get my padding-right to be the same as my current padding-left which would be around 5px?
FIDDLE HERE... FIDDLE
HTML:
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1</p>
<p>text2</p>
</div>
</div>
</div>
</div>
</footer>
CSS:
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
}
.text-center-footer-text h4 span {
color: red;
}
Set display: inline-block or display: table to h4
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
display: inline-block;
}
.text-center-footer-text h4 span {
color: red;
}
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1
</p>
<p>text2
</p>
</div>
</div>
</div>
</div>
</footer>
try with
display:inline-block.
http://jsfiddle.net/sunp5usj/2/
hope this helps.
Regards!