How do I make the height of text(tagline) responsive?
I tried padding bottom, but it doesn't work. Is there a way I can make the text's height responsive?
<p class="logo">LoremIpsum</p>
<p class="tagline">LoremIpsum</p>
<img class="mainImage" src="FullSizeRender.jpg">
css:
body{
background-color: black;
margin: 0;
}
.logo{
font-size: 3em;
color: white;
text-align: center;
}
.tagline{
font-size: 0.9em;
color: white;
text-align: center;
position: absolute;
top:20%;
/* padding-bottom: 20%;*/
}
.mainImage{
width: 50%;
height: auto;
}
Try putting the <p> inside a <div> or <span> and assigning the height values to them.
Related
I'm trying to align circles in the center on mobile. Here is what I've used on https://www.wmhi.com.au/elite-edge-leadership-resilience/
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
.circle:hover {
background-color:#79c852;
color:white;
}
I need to keep the texts as laid there now (inline-block). The circles are appearing left aligned on mobile phones. Any help would be highly appreciated.
Thanks in advance :)
Kindly change your CSS from
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
to this
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: block;
padding-top: 10px;
margin: auto;
}
And it will work perfectly fine. I just made these elements block give them an auto margin and give some top padding to the text.
try following code for good design some change for good design please add one div for all content vertically center when you add one line code or more than large content set vertically center also your circle center in mobile.
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: table;
margin: 0 auto;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
}
.circle h2 {
margin-top: 0;
margin-bottom: 15px;
}
.circle p {
margin: 0;
}
.circle:hover {
background-color:#79c852;
color:white;
}
<div class="wpb_wrapper">
<div class="circle">
<div class="vertical-center">
<h2 class="w-h2">
<span style="color: #ffffff;">Step 3</span>
</h2>
<p>Run the popular Elite Edge training</p>
</div>
</div>
</div>
add the div before the circle class. like this and it will resolve the problem
<style>
.divCenter{margin:0 auto;text-align:center;}
</style>
<div style="margin:0 auto;text-align:center;">
<div class="circle">
<h2><span style="color: #ffffff;">Step 1</span></h2>
<p>Tell us your team’s resilience and leadership goals</p>
</div>
I apologize in beforehand if this is a duplicate but I can't seem to find an answer.
I made something that resembles a progress bar. It's a div with p elements inside. However I can't seem to center the p elements vertically.
All i did now was give the parent div some padding and logically the text should be in the middle but it seems like the font is counting the height differently. And so the solution to change the line-height won't work. If I change the font to Verdana the text is aligned but that is not a preferred solution.
Snippet:
div {
width: 90%;
background-color: green;
text-align: left;
padding: 1.2%;
border-radius: 5px;
height: 20px;
font-family: 'Hind Guntur', sans-serif;
}
p {
font-size: 90%;
display: inline;
margin: 0;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet">
<div>
<p>1</p>
</div>
This should be what you are looking for. Your problem was that you had a fixed height of 20px on the div. If you change that value to 28px, your text might vertical-align.
div {
width: 90%;
background-color: green;
text-align: left;
padding: 1.2%;
border-radius: 5px;
height: 28px;
font-family: 'Hind Guntur', sans-serif;
}
p {
font-size: 90%;
display: inline;
margin: 0;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet">
<div>
<p>1</p>
</div>
check this
div {
width: 90%;
background-color: green;
text-align: left;
padding: 1.2%;
border-radius: 5px;
height: 20px;
font-family: 'Hind Guntur', sans-serif;
}
p {
font-size: 90%;
display: inline;
margin: 0;
color: white;
vertical-align: middle;
}
<link href="https://fonts.googleapis.com/css?family=Catamaran|Hind+Guntur" rel="stylesheet">
<div>
<p>1</p>
</div>
Here is the jsfiddle.
HTML:
<div class="main">
<div class="div1"></div>
Center with Red!
</div>
CSS:
.main{
height: 50px;
width: 100%;
background-color: #000000;
text-align: center;
color: #ffffff;
line-height: 50px;
font-size: 24px;
}
.div1{
display: inline-block;
width: 50px;
height: 50px;
background-color: #ff0000;
}
The red div and text are centered. But why line-height does not work. The text is not centered vertically. I think the reason might be the line-height not work in linear layout, but the parent div is block layout. How to center the red div and text both vertically and horizontally. The Text might be changed, so I do not want set them absolute position and use code like:
margin-left: -25px;
margin-top: -25px;
left: 50%;
top: 50%;
Thanks for the help!
You can simple add vertical-align: top to .div1:
.main {
height: 50px;
width: 100%;
background-color: #000000;
text-align: center;
color: #ffffff;
line-height: 50px;
font-size: 24px;
}
.div1 {
display: inline-block;
width: 50px;
height: 50px;
background-color: #ff0000;
vertical-align: top;
}
<div class="main">
<div class="div1"></div>
Center with Red!
</div>
Edit after #chead24 comment.
I'm trying to create a fluid layout, but have a small problem with the height of the container. The outer <div> (yellow, ip_A-1) is not adjusting to the height of it's children.
See a fiddle here.
I've tried placing a spacer inside but it's not working. Also making ip_BA_1 and ip_BB_1 position:relative does nothing.
The HTML:
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
The CSS:
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}
The problem is that you are using floats and position:absolute; on the children these rules prevent the children from expanding parents height.
change the ip_BBA_1 css position:relative.
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show