i create a letter template with every page header/footer
but when content is too long it not breaking page before footer section how i can do it ?
in my now the content overriding to the footer section in printing media
please any suggestion or help how i can repeat a header and footer every page then print the
.mmm div that contains content section without override
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width:50%
}
.my-header {
top: 0;
right: -150;
position: fixed;
width:100%;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.
Consider this: You made all the required mock ups for commissioned layout, got all the approvals, built a tested code base or had them built, you decided on a content management system, got a license for it or adapted open source software for your client's needs. Then the question arises: where's the content? Not there yet? That's not so bad, there's dummy copy to the rescue. But worse, what if the fish doesn't fit in the can, the foot's to big for the boot? Or to small? To short sentences, to many headings, images too large for the proposed design, or too small, or they fit in but it looks iffy for reasons the folks in the meeting can't quite tell right now, but they're unhappy, somehow. A client that's unhappy for a reason is a problem, a client that's unhappy though he or her can't quite put a finger on it is worse.
But. A big but: Lorem Ipsum is not t the root of the problem, it just shows what's going wrong. Chances are there wasn't collaboration, communication, and checkpoints, there wasn't a process agreed upon or specified with the granularity required. It's content strategy gone awry right from the start. Forswearing the use of Lorem Ipsum wouldn't have helped, won't help now. It's like saying you're a bad designer, use less bold text, don't use italics in every other paragraph. True enough, but that's not all that it takes to get things back on track.
So Lorem Ipsum is bad (not necessarily)
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:
I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.
Or else, an alternative route: set checkpoints, networks, processes, junctions between content and layout. Depending on the state of affairs it may be fine to concentrate either on design or content, reversing gears when needed.
Or maybe not. How about this: build in appropriate intersections and checkpoints between design and content. Accept that it’s sometimes okay to focus just on the content or just on the design.
Luke Wroblewski, currently a Product Director at Google, holds that fake data can break down in real life:
Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.
This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.
Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.
Kyle Fiedler from the Design Informer feels that distracting copy is your fault:
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.
Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.
Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.
Summing up, really:
Lorem Ipsum is a tool that can be useful, used intentionally it may help solve some problems. If you go about content strategy the wrong way, fix that problem.</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
html code
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">content </span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
CSS Code
#media print{
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width:50%
}
.my-header {
top: 0;
right: -150;
position: fixed;
width:100%;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
}
add a width of 100% to the footer section and give it a non-transparent background.See in the snippet, works then fine.
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width: 100%;
background-color: white;
text-align: center;
margin: 0;
}
.my-header {
top: 0;
right: 0;
position: fixed;
width:100%;
background-color: white;
text-align: center;
margin: 0;
z-index: 2;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.
Consider this: You made all the required mock ups for commissioned layout, got all the approvals, built a tested code base or had them built, you decided on a content management system, got a license for it or adapted open source software for your client's needs. Then the question arises: where's the content? Not there yet? That's not so bad, there's dummy copy to the rescue. But worse, what if the fish doesn't fit in the can, the foot's to big for the boot? Or to small? To short sentences, to many headings, images too large for the proposed design, or too small, or they fit in but it looks iffy for reasons the folks in the meeting can't quite tell right now, but they're unhappy, somehow. A client that's unhappy for a reason is a problem, a client that's unhappy though he or her can't quite put a finger on it is worse.
But. A big but: Lorem Ipsum is not t the root of the problem, it just shows what's going wrong. Chances are there wasn't collaboration, communication, and checkpoints, there wasn't a process agreed upon or specified with the granularity required. It's content strategy gone awry right from the start. Forswearing the use of Lorem Ipsum wouldn't have helped, won't help now. It's like saying you're a bad designer, use less bold text, don't use italics in every other paragraph. True enough, but that's not all that it takes to get things back on track.
So Lorem Ipsum is bad (not necessarily)
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:
I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.
Or else, an alternative route: set checkpoints, networks, processes, junctions between content and layout. Depending on the state of affairs it may be fine to concentrate either on design or content, reversing gears when needed.
Or maybe not. How about this: build in appropriate intersections and checkpoints between design and content. Accept that it’s sometimes okay to focus just on the content or just on the design.
Luke Wroblewski, currently a Product Director at Google, holds that fake data can break down in real life:
Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.
This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.
Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.
Kyle Fiedler from the Design Informer feels that distracting copy is your fault:
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.
Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.
Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.
Summing up, really:
Lorem Ipsum is a tool that can be useful, used intentionally it may help solve some problems. If you go about content strategy the wrong way, fix that problem.</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
I used to have my website with Boostrap 3.3.4, and since I moved to Bootstrap 4 everything is broken.
Essentially the structure of my website was very simple, a container that contained some jumbotrons and some panels
<body>
<section class="container">
<div class="jumbotron vertical-center">
<div><img src="img/hello.jpg" style="width: 35%" class="img-responsive" title="Hello" alt="World"></div>
<h2>my website!!</h2>
<div class="panel panel-default">
<div class="panel-body">
<h4> stackoverflow </h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h4><span class="glyphicon glyphicon-education" aria-hidden="true"></span><strong> This is reall cool! </h4>
</div>
</div>
and so on.
CSS would be simply
.container {
max-width: 600px;
background:white;
padding: 30px 30px;
text-align: center;
background: transparent;
}
.jumbotron {
background: white;
}
Here I would have a suite of centered, responsive nice blocks (with roundede edges) that would NOT take the full width of the screen.
I have no idea how to adapt that with Bootstrap 4.
Whenever you switch from one major version to another, with any software, you should expect breaking changes.
In the case of Bootstrap, it's more than breaking-changes. It's almost a completely new library (in fact, it is completely rewritten, for the most part!). In terms of development, think of it as a different library vaguely resembling the old one.
The best advice I could give you is to revert to v3. If you want to take advantage of the fully developed product, use latest v3 available. There are very few real life cases where upgrading switching a functional website from Bootstrap v3 to Bootstrap v4 makes sense in terms of development time and/or investment.
If you are really determined to do this (maybe for educational purposes or whatnot), consider rebuilding it from scratch, using v4. If you do need to convert old templates (HTML markup) run them through the Bootstrap v3 to v4 markup converter.
But keep in mind that even with this tool or similar, considering all changes in terms of architecture, layout, JavaScript plugins, form elements, switch from glyphicons to font awesome, switch from LESS to SASS, renamed variables, changed responsive breakpoints and any custom CSS you (or any v3 theme/plugin/add-on) might currently use for overriding defaults, you still have a lot of chances of messing it up and you're better off (and with a superior end product) if you rebuild from scratch, IMHO.
Moving from v3 to v4 makes a lot more sense in terms of: "I used to develop websites using v3 and now I use v4 in new projects", rather than "I upgraded a website from v3 to v4".
v3 is not obsolete and will not be for a good number of years.
In fact, it is a much more more suitable option for a production environment than v4 at the moment. In this regard, a quick look at bootstrap-4 questions, will confirm it's not (yet) production ready. Basic functionality is still broken or at least under-developed on widely used devices.
In the particular case of your markup, this should do:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
<div class="jumbotron vertical-center">
<div class="d-flex justify-content-around align-items-center">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" style="width: 35%" class="img-fluid" title="Hello" alt="World">
</div>
<h2>my website!!</h2>
<div class="card">
<div class="card-body">
<h4> stack<b>overflow</b> </h4>
</div>
</div>
<div class="card">
<div class="card-body">
<h4><i class="fa fa-university"></i><strong> This is reall cool! </strong></h4>
</div>
</div>
</div>
</section>
Note I replaced glyphicon with fa as Bootstrap v4 uses font awesome icons and I also centered the logo as a reminder v4 makes use of flexbox to center and evenly distribute, should you ever need it (i.e.: place <h2> inside .d-flex to align and distribute in line with logo)
On my Wordpress page, I have the following code:
<div class="row">
<div class="col-md-6">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " /></a>
</div>
<div class="col-md-6">
<h1 class="text-center">Vision</h1>
<span style="font-size: 12.0pt;">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</span>
<h1 class="text-center">Mission</h1>
<span style="font-size: 12.0pt;">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</span>
<ul>
<li><span style="font-size: 12.0pt;">Building, managing and supporting cross-sector coalitions</span></li>
<li><span style="font-size: 12.0pt;">Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</span></li>
<li><span style="font-size: 12.0pt;">Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</span></li>
<li><span style="font-size: 12.0pt;">Advocating and shaping policy to support improvements of systems</span></li>
</ul>
</div>
</div><!--end div class="row"-->
You can see how it looks here.
As you can see, the text stays floating to the right 50% inside the wordpress page template area. I would like the text to start taking up 100% of the available area once it hits a new line that is underneath the first picture column to the left.
For an example of how I want it to look, check out our old Squarespace site and zoom in if you have a high aspect ratio.
I know similar questions have been asked before but I have not been able to find an answer while using the Bootstrap framework.
Bootstrap is not terribly different than designing in tables. I mean, they even call them rows and columns. It's 1990's web design using CSS. (I'm only half kidding).
If you want that image to do what you're asking, you should combine your bootstrap columns (just use one col-md-12) and use CSS to float the image left.
Your other option is to decide what text you want always to the side of the image, and what you want under it, and to move that text to a new row with a new col-md-12.
See this answer, it is about Bootstrap - Wrapping Columns Around Larger Column
This is not a 'bootstrap' specific issue. All bootstrap does is use some class names with a long stylesheet.
Unrelated - I would remove those inline styles also.
Thanks to the tips of both #BenFried and #Rkhayat , I was able to come up with some code that is functioning.
<div class="row">
<div class="col-md-12">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
</a>
<h1 class="text-center">Vision</h1>
<p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>
<h1 class="text-center">Mission</h1>
<p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>
<ul>
<li>Building, managing and supporting cross-sector coalitions</li>
<li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
<li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
<li>Advocating and shaping policy to support improvements of systems</li>
</ul>
</div> <!-- end <div class="col-md-12"> -->
</div> <!-- end <div class="row"> -->
Apologies if this is a really simple thing, I can't seem to get it. Think I need to use clear but it's not working right (or I'm not using it correctly).
Am doing a pretty simple page, floating one image logo left and text on right. Then using a line break to break up image / text (you can see example here: http://transitions-london.co.uk/index.php/testimonials
It looks fine on firefox, but move to safari or chrome and the formatting is shunting some images/text to the right. Also when you scale up or down (cmd +-) the formatting changes.
I think I need to use <div style="clear: both;"> after every <hr /> but when I do nothing happens and the Joomla editor removes the code after saving.
Each testimonials (chunk of logo then text) is currently coded like so:
<div style="float: left;"><img src="images/otherlogos/nationalgrid92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>"Transitions opens up an avenue for us to recruit a diverse graduate workforce. There's an option for recruiting to more experienced roles too. There's a real demand in the UK for highly skilled candidates in cables and tunnels and this presents a real alternative to find international people without the complexities around international recruitment. Some of these people may have experience in their home country that we just don't have here. If the requirements change quickly we can now respond quickly."</p>
<h5 style="text-align: right;">Sharon Goymer, Graduate Resourcing Manager, Development Programmes, National Grid</h5>
<hr />
<div style="float: left;"><img src="images/otherlogos/crossrail92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>“We gained a first-class civil engineer employee as a result of Transitions. The internship and recruitment service and candidate was above our expectations.. The refugee community offers a good untapped market.“</p>
<p> </p>
<p> </p>
<h5 style="text-align: right;">Dawn Barker, Crossrail Head of HR, Crossrail</h5>
<hr />
Would really appreciate the help. I know it's probably very simple.
Cheers, N
Your template already has a class clr you can use. Try adding it to your <hr> element like so:
<hr class="clr">
If that continues to be stripped out by the Joomla WYSIWYG Editor, then add this to one of your Joomla CSS files
hr {clear: both}