I wish to have the span tag float left and have the <section> floated left beside it also. But the <section> sits below the span.
I would imagine it has something to do with setting the widths of the elements but I want it to be responsive and flex.
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="highlight-sub"><em>Start using your card today</em></h3>
</div>
<div class="col-md-8">
<div class="col-md-4">
<span class="step">1</span>
<section>
<h4 class="highlight-prim">Complete Form</h4>
<p class="highlight-sub">Simply fill in our online form and your account will created.</p>
</section>
</div>
<div class="col-md-4">
<span class="step">2</span>
<section>
<h4 class="highlight-prim">Receive by Post</h4>
<p class="highlight-sub">You will be sent your new card in post.</p>
</section>
</div>
<div class="col-md-4">
<span class="step">3</span>
<section>
<h4 class="highlight-prim">Start Enjoying</h4>
<p class="highlight-sub">Present your new card to any of our partners for al the benifits.</p>
</section>
</div>
</div>
</div>
</div>
#mid-content span.step {
border: 2px solid #A99269;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #A99269;
display: inline-block;
font-weight: 300;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
font-size: 32px;
float: left
}
#mid-content section {
display: inline-block;
float:left
}
Float to the left only the .step element, and give to the section a left margin equal to the total width of the .step (with total i mean including borders..)
demo at http://jsfiddle.net/sqD6Q/
(with arbitrary margin since i do not know your currest styles to calculate the margin..)
Yes, probably the content of the section is almost 100% of the row, and it goes to the second row. You can place the span inside the section
Related
JSX:
<div className="card">
<div className="inner">
<div className="card-content">
<div className="title">
<Link to={`/product/${_id}`}>{name}</Link>
</div>
<div className="img">
<img src={image} alt="" />
</div>
</div>
<div className="card-price">
<div className="price">{displayPrice(price)}</div>
<div className="cart float-right">
<ShoppingCart size={28} className="shopping-icon" />
</div>
</div>
<Rating rating={rating} numReviews={numReviews} />
<hr className="descriptionBreak" data-content="About" />
<div className="card-footer">
<p className="description">{shortDescription}</p>
<div className="label-container">
{labels?.map((label, index) => (
<div key={index} className="label">
{label}
</div>
))}
</div>
</div>
</div>
</div>
Relevant CSS:
.label-container {
display:flex;
justify-content: space-evenly;
}
.label {
padding: 0.4em 1.3em;
border-radius: 15px;
background-color: #FFEAF6;
color:#C62A82;
font-family: monospace;
font-size: 1.2em;
text-transform: capitalize;
}
.inner {
padding: 20px;
}
As you can see from the image above, the cards line up, but I would like the labels to be placed equally from the bottom for each card, and at the moment the descriptions finish at different points causing the whitespace to be under the labels, instead of on top. If I use absolute positioning, then there is a problem with overlapping text at certain points, is there another way to do this?
Use display:flex and set the direction to flex-direction:column to set the direction as a column, then use space-between on the justify-content for your card div. This will push the lower elements in the column to the bottom.
I have two rows, the top contains text, and the one underneath contains a set of cards. Is it possible to have the cards scroll under the text so that they are no longer visible?
<div id="main-container" class="container">
<div id="title-row-small" class="row">
<div class="container center">
<div class="show-on-small-only hide-on-med-and-up">
<p id="title-text">Scott and Viki</p>
<p id="date-text">23/06/18</p>
</div>
</div>
</div>
<div id="card-row" class="row">
<div class="col s12 m6 l4">
<a href="#" onclick="$('#agenda-modal').modal('open');">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span id="card-title" class="card-title">Agenda</span>
</div>
</div>
</a>
</div>
</div>
</div>
The small amount of CSS I've added allows the cards to scroll underneath but they are no longer positioned under the text y position, the text is no longer centered and scaling correctly and I have no idea how to make the cards disappear behind the text instead.
#card-row {
top: 0;
position: relative;
}
#title-text {
margin-top: 5px;
margin-bottom: 0px;
font-size: 80px;
font-family: "Calling Angels Personal Use";
text-shadow: 4px 4px 12px #fff;
}
#date-text {
margin-top: 0px;
margin-bottom: 0px;
font-size: 45px;
font-family: "Strawberry Whipped Cream";
text-shadow: 2px 2px 2px #fff;
}
I would appreciate any help. I'm sure this is basic but I'm just learning at the moment and googling didn't help me much as you can see.
Thanks
I'm trying to stack text in a Bootstrap column but can't quite figure out how I would go about doing it.
Here's a crude mockup of what I'm trying to achieve:
The first word "THE" should take up 2 lines, while the 3 "SOMETHINGS" are 1 line each. Also is there a way to stretch the "SOMETHINGS" out to equal length if they were different words?
<div class="row">
<div class="col-lg-6">
<img class="img-responsive" src="img/logo.png"</img>
</div>
<div class="col-lg-6">
THE SOMETHING SOMETHING SOMETHING
</div>
</div>
Below is a start if you must use Bootstrap columns. If you adjust column sizing or font or text used, then adjust the font-sizes, line-heights and letter-spacing values.
Font-size mostly helped fill the view vertically, line-height assisted with vertical alignment, and letter-spacing helped the horizontal spacing for text (with 'SOMETHING' being the baseline length for this col size). I tweaked the numbers so it looked nice within the jsFiddle output, but on your site you should adjust the values as needed and wrap it accordingly so you don't get any unexpected output (stacking columns when view becomes smaller).
If you need it to be more flexible, you can create a function to calculate the measurements depending on each word length/col size. Your font family and words chosen will not be what I chose, so your mileage may vary.
If anyone else has a better solution without the use of external existing libraries, then please share! I'd like to know.
Output from my browser:
See jsFiddle
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.col-xs-4,
.col-xs-8 {
margin: 0;
padding: 0;
}
.content-text {
width: 100%;
}
#content-text-THE {
float: right;
font-size: 10.0vh;
line-height: 0.75em;
}
#content-text-top {
float: left;
font-size: 5vh;
line-height: 0.7em;
letter-spacing: 1.04em;
}
#content-text-mid {
float: left;
clear: left;
font-size: 5vh;
line-height: 0.8em;
letter-spacing: 0.08em;
}
#content-text-bot {
font-size: 5vh;
line-height: 0.8em;
letter-spacing: 0em;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<span id="content-text-THE">THE</span>
</div>
<div class="col-xs-8">
<div class="content-text">
<span id="content-text-top">COOL</span>
</div>
<div class="content-text">
<span id="content-text-mid">ESPRESSO</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-8">
<div class="content-text">
<span id="content-text-bot">SOMETHING</span>
</div>
</div>
</div>
</div>
This is what I'm trying to do, in between the two pink lines is my max width.
This is what I'm getting:
I'm getting close:
This is my HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
<div class="row">
<div class="col-md-2">
<img src="img/FB_LINK.png" alt="Follow us on Facebook"></div>
<div class="col-md-2">
<img src="img/TWITTER_LINK.png" alt="Follow us on Twitter"></div>
<div class="col-md-2">
<img src="img/LINKEDIN_LINK.png" alt="Link In with Us"></div>
</div>
<div class="row">
<div class="col-sm-6"><h7>© 2016 COPYRIGHT LINE</h7></div>
</div>
</div>
</div>
</footer>
This is my CSS for this section:
footer {
height: 60px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
footer.a{
display:inline-block;
margin:0 auto 0 auto;
}
h7{
color:#FFF;
font-size:24px;
font-family: 'Contrail One', cursive;
text-align:center;
}
I can't seem to figure this out, I've drawn it out on a couple sheets of paper, but I can seem to style like like I'd like. Can anyone point out where I'm going wrong?
After trying your the posted code I found that you are using wrong quote pair.
Also the css you gave isn't designed to achieve the goal.
I made a working fiddle here. Check it out
HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 parent">
<p>GET SOCIAL WITH US!</p>
<div class="icon">
<img src="https://myapnea.org/assets/myapnea/icons/facebook_icon-7eedcb8837293505e1d3b1494ff19c9c3842340d1dfcd193e098e2b44f34456b.png" alt="Follow us on Facebook">
<img src="http://frcgamesense.com/dnn/portals/0/Home/Twitter_icon.png" alt="Follow us on Twitter">
<img src="https://store-images.s-microsoft.com/image/apps.36749.9007199266245564.6701eae8-16d2-4ba0-bdaa-8d9d9f9a1e70.03e5f6a9-3866-4ad9-9f2b-6b57ff90419e?w=100&h=100&q=60" alt="Link In with Us"></div>
</div>
<div class="col-md-6">
<p class="copyright">© 2016 COPYRIGHT LINE</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
padding: 5px;
height: 100px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
.copyright {
padding-top: 40px;
}
footer p {
color: #fff;
}
footer a img {
display: inline-block;
width:50px;
}
.parent .icon {
margin: auto 7px;
}
It looks like your second col-sm-6 is nested too deep. It should be at the same level of the other one, not within it. Your divs are all sitting on half the grid (6 wide) and then the three social logos are taking half of that, and the copyright bit is taking the other half. You need the col-sm-6 divs to be siblings.
Furthermore, I don't think col-sm-6 looks like it'll work, looking at what you're trying to achieve. You might want to make the first group col-sm-3 or so and add an offset class to the copyright part. :-)
There are at least 3 errors in your HTML markup:
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
The ending quote should be double ("), not single (')
Since you place it in a column, the class name of this tag should be container-fluid, not container
</div>
<div class="row">
<div class="col-sm-6">
Missing close tag, the div .row is not neccessary.
</div>
</div>
</div>
<div class="col-sm-6">
Please see the fixed code here
In my html I get 'response' from controller. Number of lines in the response varies (max is 3).
What is the best way to 'reserve' 3 lines on my html page so the next div with 'SOMETHING' paragraph is not scrolled down by 'response' ?
<div class="row">
<p ng-bind-html="response"></p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
Using CSS, fix the height occupied by your 3 rows and use overflow to scroll within that fixed height div.
CSS Overflow might help you.
.row-fixed-height {
height: 150px;
overflow: scroll;
}
and in HTML:
<div class="row-fixed-height">
<p ng-bind-html="response"></p></div>
Since the height of the lines varies based on font and font size, I would use line breaks to "reserve" the three lines. If you were to use for instance a fixed height on the div or p, it might jump around on a different browser that uses a different font.
Live Demo:
#response {
background: red;
}
<div class="row">
<p id="response" ng-bind-html="response">
<br />
<br />
<br />
</p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
JSFiddle Version: https://jsfiddle.net/rspyho74/
As oori pointed you, this is is about CSS, not Angular. The easiest way to fix the height to 3 lines is using the em unit:
.row{
margin: 10px;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
}
p{
float: left;
margin: 0 5px;
padding: 5px;
border: 1px solid #000;
height: 3em;
}
<div class="row">
<p ng-bind-html="response"></p>
<p ng-bind-html="response">Line 1</p>
<p ng-bind-html="response">Line 1<br>Line 2</p>
<p ng-bind-html="response">Line 1<br>Line 2<br>Line 3</p>
<div style='clear: both;'></div>
</div>
<div class="row">
<p>SOMETHING</p>
<div style='clear: both;'></div>
</div>
As you can see, the paragraph keeps its height no matter how many lines there are. If you remove the height property you can see the difference.