I'm trying to align the text to the left but center the content as well. Its not working.
Like this: image of the design I wish to accompolish.
Here is my PUG markup and I have placed the rest of the info on codepen.io:
section.team-section.section
.container
.row.center-it
.center-it.col-xs-12.col-sm-12.col-md-8.col-lg-8.u-align--center
h1.section__title.section__title--block
| <span class="u-display-block type---color-light-grey">Experienced.<br></span><span class="type--color-green u-display-block">Reliable.<br></span>
<span class="u-display-block type---color-light-grey">Commited.</span>
p.section__description
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
I'm using flexbox framework so that would have been too much to copy
and paste here.
here is my full code on codepen.io, this link will provide all scss mark up:
https://codepen.io/harp30/pen/GGbKdp?editors=1100
Without setting an explicit width on the h1, I'm not sure you can do this with flex properties. The easiest way to do this would be to add the following:
.center-it {
text-align: center;
}
.section{
padding: 10rem 0 0 0;
&__title{
display: inline-block;
text-align: left;
}
}
p {
text-align: left;
}
This will allow the width of the h1 to match the content, centering it within its parent, then left-aligning the text inside the h1. You'll also need to re-align the text in the paragraph.
It's because your .section has padding: 10rem 0 0 0; rule, which means, that you have only padding from top and not from bottom. To center the content, you can add the same padding from bottom:
.section {
padding: 10rem 0;
}
The idea is to have the same paddings/margins from both, top and bottom. And to center the text in <h1> you can simply use text-align: center rule.
Here is the updated DEMO.
Related
I've got an app where I'm displaying images, one large and then a series of smaller ones beside it. (so two columns essentially) I am using object-fit:cover for the large image on left, so don't know the width of this div. The right I know the width, as I force it to a fixed width.
<div class="browseCardBody">
<div class="browseCardImageLarge">
<img src="https://i.imgsafe.org/4242b5ed94.jpg">
</div>
<div class="browseCardSmallImages">
<div style="width:133px">
<div class="browseCardImageSmall">
<!-- This main image scales to 300px high, varying width, how do get the text under it to match the width of this plus the fixed width div beside it?? -->
<img src="http://i.imgur.com/obwbqDT.jpg" />
<img src="https://steemitimages.com/300x300/https://ipfs.io/ipfs/QmZ42wQdhPwjmhvkmQWbRRuCy1KWM2Ss95Njm5mGJijq6E/20170121_160538.jpg" />
<img src="https://steemitimages.com/300x300/http://i.imgur.com/Oe9Yshv.jpg" />
</div>
</div>
</div>
</div>
<div>
<div class="browseCardFooter" ng-if="story.body.length > 0">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div>
CSS HERE:
.browseCardBody {
display: flex;
max-height: 300px;
}
.browseCardBottom li {
border-right: 1px solid rgba(0,0,0,.1);
float: left;
vertical-align: middle;
font-size: 16px;
padding: 6px;
}
.browseCardImageLarge {
object-fit: contain;
flex-grow: 0;
order: 1;
}
.browseCardImageLarge img
{
height: 300px;
object-fit: cover;
}
.browseCardSmallImages {
overflow: hidden;
flex-grow: 10;
order: 2;
height: 300px;
}
.browseCardImageSmall {
object-fit: cover;
display:inline-block;
}
.browseCardImageSmall img {
height: 100px;
object-fit: cover;
width: 133px;
vertical-align: bottom;
}
I need to make a text block under these two columns of images that matches the width without making the whole container wider.
My text when longer than the div, always widens the container, how do I prevent this without knowing the div width?
my jsfiddle here shows the problem:
https://jsfiddle.net/tseqjc72/
Wrap the images and text in a container div of its own, and use display: table-caption.
JSFiddle - Example
wrap the entire thing in a div and give it a class "container" (name it whatever you want :p )
now style this class container with "display: table-caption;"
I think this should work.
I need to create a text that adapts to the size of its container DIV, distorting itself to always fill the whole space inside the DIV. So it should be always width=100% and height=100% and resize according to the browser window.
I know this can be done with an image, my doubt is if there is any way to do the same to a editable text, deforming the font shapes itself. Which property should I use?
Thank you in advise.
Option 1
We are going to use Javascript to change dynamically the font-size and line-height
First, cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('.foo');
Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
Get the current height of the div and save it as a variable.
var height = $div.height();
Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');
Demo: https://jsfiddle.net/nanilab/6tpztvnc/
Option 2
You can use FitText.js
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
Option 3
You can use slabText.js
A jQuery plugin for producing big, bold & responsive headlines
Check out the CSS Viewport percentage lengths, this might be what you're looking for: https://css-tricks.com/viewport-sized-typography/
I put together a quick container with text that will change size based on the size of the viewport. You can check it out here: http://codepen.io/sktwentysix/pen/GZzvEx
<div class="main">
<p>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum!
</p>
</div>
.main {
border: 1px solid #000;
padding: 1rem;
width: 80%;
height: 500px;
}
p {
margin: 0;
font-size: 4vw;
}
Hope this helps!
only CSS will not be possible unless the lenght of your text is known.
If it is known, vw units + transform will do .
Problems : long text on small window could be too small to be read
Short text on large screen will be awfully stretched
h1 {
height: 3vw;
background: #147EBD;
text-align: center;
}
span {
display: inline-block;
height: inherit;
line-height: inherit;
font-size: 10vw;
transform-origin: top center;
transform: scale(1, 0.3);
}
h1 + h1 span {
line-height: 40vw;
font-size: 40vw;
transform: scale(1, 0.08);
}
<h1> <span>longer text to strecth </span></h1>
<h1> <span>short</span></h1>
As you can see, javascript will be needed to find out text lenght before to apply a font-size and a proper scale to start with .
It would be wise somehow to still set a max and min font-size so it remains readable at anytime time, and eventually let break a line on small screen.
edit: i did understand 100% of container, not window's height but scale() will do also in this case.
Im trying to approach this design where i have different divs with display inline block. What im trying to do is keep the same margin bottom for all the divs but it seems like the content height of a div affects the space at the top of every div.
Here's the code and the css:
.box {
border: 1px solid red;
display: inline-block;
background: #eee;
margin-bottom: 0.5em;
width: 48%
}
Hello Hello
is simply dummy text of the printing and typesetting industry
Hello Hello
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type
Hello Hello
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.
Hello Hello
is simply dummy text of the printing and typesetting industry
Hello Hello
is simply dummy text of the printing and typesetting industry
Here you can see the results:
enter link description here
I dont care if the boxes have a different height but the bottom space between them have to be the same. any thoughts ? many thanks !
http://fiddle.jshell.net/qyk6t/2/
One of the ways to solve this issue is using a mutiple column layout. This way you can split your content in more than one column keeping a different height for each one of your boxes.
.column {
display : inline-block;
margin: 0.7em;
vertical-align: top;
width: 40%;
}
.box {
border: 1px solid red;
background: #eee;
display : inline-block;
margin: 0.7em;
vertical-align: top;
width: 100%;
}
As you can see in the JSFiddle.
There are some cool examples and guides of how use multiple columns:
http://css.dzone.com/articles/implementing-card-ui-pattern
http://portfolio.planetjon.ca/2012/12/31/how-to-make-a-flowing-css-gallery-layout/
Hope that helps you.
i have a long message inside the div box, and i am looking for a way to show the that text message within the div with scroll bar (vertical) and i have two links to it as you can see:
1)disclaimer
2)Behavior
the above links are hyperlink so when i click those links i display the below divs based on the selection. so is that possible to show the div underneath the hyperlink with nice model div or something?
i am not a CSS guy so if possible make the div box look awesome :)
<span ><a href="#" >Disclaimer-1</a></span> <span class="slide1">
| Behavior</span>
<div id="one" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<div id="second" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
If you want a scroll bar, set a height and then make the overflow value auto or scroll.
div#one,
div#two
{
height: 120px;
overflow: auto;
}
As for your latest edit, you're looking at JavaScript to implement something like that.
Hi for make scroll bar in left and format the page please find basic css you can use.
<style type="text/css">
#one{
overflow-y: scroll;
padding: 15px;
height: 150px;
line-height: 25px;
margin: 20px 0px 20px 0px;
}
#second{
overflow-y: scroll;
padding: 15px;
height: 150px;
line-height: 25px;
}
span a{
padding-left:15px;
color:blue;
text-decoration: none;
}
span a:hover{
padding-left:15px;
color:blue;
text-decoration: none;
}
</style>
Please specify the point when i click on the div i just need the div to be underneath the links.
thanks..
At the moment I have a container div
#container {
margin: 0 auto;
margin-top: 10px;
width:800px;
background-color:#eaeced;
}
within that div I'd like to add a content box which I've done like this
#contentbox {
background-color: #fff;
width: 400px;
margin: 5px;
}
As soon as I write some text into the #contentbox div.. this div covers the whole of the #container div... I have tried using padding but this increases the original size of the container..
I've just tried to add margin: 5px; but this will create the space only on the sides.. not on the top or the bottom.. :(
Sorry I'm quite new at this and would appreciate some help
Thank you :)
Not a lot of information, but I think what you're after is something like this:
#container {
margin: 0 auto;
margin-top: 10px;
width: 790px;
background-color:#eaeced;
padding: 5px;
}
#contentbox {
background-color: #fff;
width: 400px;
padding: 1px 0;
}
p {margin: 1em 0;}
presuming HTML like this:
<div id="container">
<div id="contentbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
first of all move the required padding onto the #container, you can adjust the width of the #container to be your required width, less the total left/right padding - this will keep the width of the box as you want.
Then you have collapsing margins going on - though margin collapsing is correct behaviour you won't see it in IE unless you add specific margins - adding a specific margin to the <p> or any other content in the box will be required to get consistent behaviour even though it's the opposite of what you probably want.. the p should have default margins and they're what's collapsing outside the the #contentbox in some browsers (e.g. FF).. once you add specific margin all browser will then exhibit collapsing margin behaviour though some collapse the background internally and some externally so it looks weird.. however
adding 1px top/bottom padding (or a border would do it too) to the the inner #contentbox will fix that and make sure the actual content margins stay inside the content box
The result is I think what you're looking for.. but if not leave a comment or update your question with some code or a JSFiddle example