How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
<!DOCTYPE html>
<html>
<head>
<title>This is London</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Getting around</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- End of nav -->
<div id="header">
<div id="header-text">
<h2>
Visiting London has never been easier with these ideas.
</h2>
<p>The capital of the United Kingdom is a thriving multicultural metropolis. The contrast between the spectacular historic sights and the lively cultural scene makes a visit to London an interesting and exciting adventure. </p>
</div> <!-- End of header-text -->
</div> <!-- End of header -->
<div id="middle">
<div id="mid-text">
<h1>- Getting around in London -</h1>
<h5>One of the world's most visited cities, London has something for everyone: from history and culture to fine food and good times.</h5>
<p>Immersed in history, London's rich seams of eye-opening antiquity are everywhere. The city's buildings are striking milestones in a unique and beguiling biography, and a great many of them – the Tower of London, Westminster Abbey, Big Ben – are instantly recognisable landmarks. There’s more than enough innovation (the Shard, the Tate Modern extension, the Sky Garden) to put a crackle in the air, but it never drowns out London’s seasoned, centuries-old narrative. Architectural grandeur rises up all around you in the West End, ancient remains dot the City and charming pubs punctuate the historic quarters, leafy suburbs and river banks. Take your pick.
Art & Culture
A tireless innovator of art and culture, London is a city of ideas and the imagination. Londoners have always been fiercely independent thinkers (and critics), but until not so long ago people were suspicious of anything they considered avant-garde. That’s in the past now, and the city’s creative milieu is streaked with left-field attitude, whether it's theatrical innovation, contemporary art, pioneering music, writing, poetry, architecture or design. Food is another creative arena that has become a tireless obsession in certain circles.
Diversity
This city is deeply multicultural, with one in three Londoners foreign-born, representing 270 nationalities and 300 tongues. The UK may have voted for Brexit (although the majority of Londoners didn't), but for now London remains one of the world's most cosmopolitan cities, and diversity infuses daily life, food, music and fashion. It even penetrates intrinsically British institutions; the British Museum and Victoria & Albert Museum have collections as varied as they are magnificent, while the flavours at centuries-old Borough Market run the full global gourmet spectrum.
A Tale of Two Cities
London is as much about wide-open vistas and leafy landscape escapes as it is high-density, sight-packed urban exploration. Central London is where the major museums, galleries and most iconic sights congregate, but visit Hampstead Heath or the Queen Elizabeth Olympic Park to flee the crowds and frolic in wide open green expanses. You can also venture further out to Kew Gardens, Richmond or Hampton Court Palace for beautiful panoramas of riverside London followed by a pint in a quiet waterside pub.</p>
<div id="img-mid">
<a href="https://goo.gl/maps/PSDhvQ25fRZBqWHC8" target="_blank">
<img src="images/Feature-images.jpg" alt="Map">
</a>
</div><!-- End of img-mid -->
</div> <!-- End of mid-text -->
</div> <!-- End of middle -->
<div id="footer">
<div class="credits">
<div class="credits_left">
<h6> Designed by Alba Heidari</h6>
</div>
<div class="credits_right"><img src="https://www.arct.cam.ac.uk/images/instagram-icon/image" class="social_icon">
</div>
</div> <!-- End of footer -->
</body>
</html>
Add this to your css file:
#img-mid{
height: 300px;
width: 300px;
}
#img-mid img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
Related
hi so iv been writing html for a website and was wondering if there is anyway someone could help me im trying to get my 2 sections " early history" and " european adoption" side by side above " modern cards " any recommendations? i dont know how to position them like this any help would be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<style>
section {
margin: 10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
Add a class to the first two sections and assign these rules to it:
.myClass {
display: inline-block;
width: 50%;
}
This will put them next to each other. Of course, if there are other factors that influence their width, you have to take that into account (and, for example, reduce the width accordingly)
You're looking for something along this lines, I think:
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<style>
#parent {
float: left;
}
#parent section {
width: 45%;
float: left;
margin:10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section id="parent">
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
play money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
I've wrapped your sections in another section (parent) and just adapted the CSS code a little bit.
I've put width:45% so you can keep your margin:10px. Otherwise I would probably have set width:50%
Try using display:flex; on parent div
main {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</main>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
You could also try the css grid. It's very powerful in terms of building complex grid layout.
Documentation
.parentDiv {
display: grid;
}
.firstChild {
grid-column: 1;
background-color: yellow;
}
.secondChild {
grid-column: 2;
background-color: lime;
}
<div class="parentDiv">
<div class="firstChild">
Column 1
</div>
<div class="secondChild">
Column 2
</div>
</div>
I deleted footer code from the HTML file. However, when I run the HTML file, I still see the footer being displayed in the browser.
Could this be because I did not clear the web browser cache?
Please find below the HTML file and screenshot of web browser:
HTML file
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charles Darwin - biography</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="Darwin.css"/>
</head>
<body>
<header>
<h1>Charles Darwin</h1>
<h3>(biography)</h3>
</header>
<section class="container">
<section class="jumbotron">
<div class="row">
<figure class="col-sm-5 сol-sm-7">
<img class="img-responsive center-block" src="image/Charles-Darwin.jpg" alt="CharlesDarwin" />
<figcaption>Biologist, Scientist (1809–1882)</figcaption>
<p class="desc">
<span class="dec3"> QUICK FACTS </span> <br><br>
<span class="dec"> FULL NAME </span> <br>
<span class="dec2">Charles Robert Darwin </span> <br>
<span class="dec"> BIRTH DATE </span> <br>
<span class="dec2">February 12, 1809 </span> <br>
<span class="dec"> DEATH DATE </span> <br>
<span class="dec2">April 19, 1882 </span> <br>
<span class="dec"> PLACE OF BIRTH </span> <br>
<span class="dec2">Shrewsbury, England </span> <br>
<span class="dec"> PLACE OF DEATH </span> <br>
<span class="dec2">Downe, England </span> <br>
<span class="dec"> EDUCATION </span> <br>
<span class="dec2">University of Edinburgh, Cambridge </span> </p>
</figure>
<figure>
<p><b>Synopsis</b></p>
<p>Naturalist Charles Darwin was born in Shrewsbury, England, on February 12, 1809. In 1831, he embarked on a five-year survey voyage around the world on the HMS Beagle. His studies of specimens around the globe led him to formulate his theory of evolution and his views on the process of natural selection. In 1859, he published On the Origin of Species. He died on April 19, 1882, in London.</p>
<blockquote class="blockquote-reverse"><i>“A man who dares to waste one hour of time has not discovered the value of life.”
<br>-Charles Darwin</i></blockquote>
<p><b>Early Life</b></p>
<p>Naturalist Charles Robert Darwin was born on February 12, 1809, in the tiny merchant town of Shrewsbury, England. He was the second youngest of six children. Darwin came from a long line of scientists. His father, Dr. R.W. Darwin, was as a medical doctor, and his grandfather, Dr. Erasmus Darwin, was a renowned botanist. Darwin’s mother, Susanna, died when he was only 8 years old. Darwin was a child of wealth and privilege who loved to explore nature.In October 1825, at age 16, Darwin enrolled at Edinburgh University along with his brother Erasmus. Two years later, Charles Darwin became a student at Christ's College in Cambridge. His father hoped he would follow in his footsteps and become a medical doctor, but the sight of blood made Darwin queasy. His father suggested he study to become a parson instead, but Darwin was far more inclined to study natural history.</p> <br>
<p><b>Voyage on the HMS Beagle</b></p>
<p>While Darwin was at Christ's College, botany professor John Stevens Henslow became his mentor. After Darwin graduated Christ's College with a bachelor of arts degree in 1831, Henslow recommended him for a naturalist’s position aboard the HMS Beagle. The ship, commanded by Captain Robert FitzRoy, was to take a five-year survey trip around the world. The voyage would prove the opportunity of a lifetime for the budding young naturalist.
<br>
On December 27, 1831, the HMS Beagle launched its voyage around the world with Darwin in tow. Over the course of the trip, Darwin collected a variety of natural specimens, including birds, plants and fossils. Through hands-on research and experimentation, he had the unique opportunity to closely observe principles of botany, geology and zoology. The Pacific Islands and Galapagos Archipelago were of particular interest to Darwin, as was South America.
<br>
Upon his return to England in 1836, Darwin began to write up his findings in the Journal of Researches, published as part of Captain FitzRoy's larger narrative and later edited into the Zoology of the Voyage of the Beagle. The trip had a monumental affect on Darwin’s view of natural history. He began to develop a revolutionary theory about the origin of living beings that was contrary to the popular view of other naturalists at the time.</p>
<p><b>Theory of Evolution</b></p>
<p>Darwin's exposure to specimens all over the globe raised important questions. Other naturalists believed that all species either came into being at the start of the world, or were created over the course of natural history. In either case, the species were believed to remain much the same throughout time. Darwin, however, noticed similarities among species all over the globe, along with variations based on specific locations, leading him to believe that they had gradually evolved from common ancestors. He came to believe that species survived through a process called "natural selection," where species that successfully adapted to meet the changing requirements of their natural habitat thrived, while those that failed to evolve and reproduce died off.</p>
<br>
<p>In 1858, after years of further scientific investigation, Darwin publically introduced his revolutionary theory of evolution in a letter read at a meeting of the Linnean Society. On November 24, 1859, he published a detailed explanation of his theory in his best-known work, <i> On the Origin of Species by Means of Natural Selection.</i></p>
<p><b>Death and Legacy</b></p>
<p>Following a lifetime of devout research, Charles Darwin died at his family home, Down House, in London, on April 19, 1882, and was buried at Westminster Abbey. During the next century, DNA studies revealed evidence of his theory of evolution, although controversy surrounding its conflict with Creationism—the religious view that all of nature was born of God—still abounds today.</p>
</figure>
<div class="row">
<figure class="col-sm-3 col-sm-6 col-sm-3 ">
</figure>
<figure class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="100%" src="https://www.youtube.com/embed/A0VnuhHq5m0" frameborder="0" allowfullscreen></iframe>
</div>
</figure>
</div>
</section>
</section>
</body>
</html>
Screenshot of the HTML file as rendered in the web browser
how can I make a paragraph format look like this
using this code?
Thank you! :)
<div class="col-sm-6 col-md-7 col-lg-7 sec-about-text">
<p> Healthy Endings came to life with the best intentions to create all natural snacks, organic when possible, raw and vegan with absolutely no preservatives. We love to snack periodically through out the day and we're always working on creating the most delicious and nutritious snacks to satisfy those cravings. "What fun is snacking if the snacks donít taste orgasmically good!"</p>
<p> Cherie Spencer, the founder and creator
of Healthy Endings snacks received her
certification as a Health Educator from
the world renowned Hippocrates Health
Institute in West Palm Beach, Florida and holds a Bachelors in Healthcare Administration from Florida Atlantic University. She also received a culinary certification from Atlantic County VoTech and holds a SafeServ Food Manager Certification/License. She is a holistic chef specializing in raw, living foods and loves to prepare and share healthy food with family and friends.</p>
</div>
Here is a jsfiddle showing the basic process: https://jsfiddle.net/jq16sfjg/
.floated {
margin: 10px;
float: right;
}
I will leave it up to you to style the font, whitespace, and colors.
Basically, you just need to float the text that breaks the paragraph to the right.
I'm working with several rows that contain two columns. One column containing text and the other containing an image. Each row alternates where the copy and image are displayed.
The 1st row has the image on the left, copy on right.
The 2nd row has the image on the right, copy on left.
The 3rd row has the image on the left, copy on right... and so on...
[website: http://www.raa.com/dev/who-we-are.shtml#team]
I'm new to Bootstrap and am trying to figure out how (on Mobile devices) to get the image to appear below the copy on **ALL ROWS.** Currently when viewing the site, the image and copy alternate in position for each row. I tried the push/pull commands with no success.
Help!!
******HTML Code******
<!-- start Ronald Simmons area -->
<section id="ronaldSimmons">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="images/team-pics/simmons.png">
</div>
<div class="col-md-7">
<font size="+3" color="#396598">MANAGEMENT</font>
<p></p>
<h2>
<div class="top-buffer-md">Ronald E. Simmons</div>
</h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member
families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012
Ron was elected to serve in Texas State House of Representatives. He is a national speaker on
leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron
serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is
also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He
is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</div>
</div>
</div>
</section>
<!-- end Ronald Simmons area -->
Where you need to put text box on right side then you can follow this HTML structure
<section id="ronaldSimmons">
<div class="container">
<div class="row">
<div class="col-md-7 pull-right">
<font size="+3" color="#396598">MANAGEMENT</font>
<p></p>
<h2>
<div class="top-buffer-md">Ronald E. Simmons</div>
</h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</p>
</div>
<div class="col-md-5">
<img src="images/team-pics/simmons.png">
</div>
</div>
</div>
and simply add css rules on small screen
#media only screen and (max-width: 767px){
.pull-right{
float: none !important;
}
}
Because TB always force element on right with pull-right class and in your case you don't need to right align text box on small screen.
Doesn't seem effective, but would work:
<section id="ronaldSimmons">
<div class="container">
<div class="row">
<div class="col-md-7 visible-xs-*-*">
<font size="+3" color="#396598">MANAGEMENT</font><p></p>
<h2><div class="top-buffer-md">Ronald E. Simmons</div></h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</div>
<div class="col-md-5">
<img src="images/team-pics/simmons.png" >
</div>
<div class="col-md-7">
<font size="+3" color="#396598">MANAGEMENT</font><p></p>
<h2><div class="top-buffer-md">Ronald E. Simmons</div></h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</div>
</div>
</div>
</section>
I have two aside tags. One aside tag needs to be floated to the right, the other needs to be floated the left. They're both on the correct sides but the section won't let the asides go next to it, they are still below it.
Here's the html:
http://pastebin.com/BHtdYZfD
Here's the css:
http://pastebin.com/jhfLNNfS
Maybe, I left something out in the code. Any help would be greatly appreciated!
Here you go: just change the HTML-code a little bit like this:
<header>
<img src="town_hall_logo.gif" alt="Town Hall logo" height="80">
<hgroup>
<h1>San Joaquin Valley Town Hall</h1>
<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
</hgroup>
</header>
<aside class="aside2">
<h1>Event change for November 16</h1>
<p>SJV Town Hall is pleased to announce the addition of award-winning author Andrew Ross Sorkin.
The appearance of previously scheduled speaker, Greg Mortenson, has been postponed.</p>
</aside>
<aside>
<h1 id="speakers">2011-2012 Speakers</h1>
<h2>October 19, 2011<br>Jeffrey Toobin</h2>
<img src="toobin75.jpg" alt="Jeffrey Toobin photo">
<h2>November 16, 2011<br>Andrew Ross Sorkin</h2>
<img src="sorkin75.jpg" alt="Andrew Ross Sorkin photo">
<h2>January 18, 2012<br>Amy Chua</h2>
<img src="chua75.jpg" alt="Amy Chua photo">
<h2>February 15, 2012<br>Scott Sampson</h2>
<img src="sampson75.jpg" alt="Scott Sampson">
</aside>
<section>
<h1>Our Mission</h1>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<blockquote>“Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.”</blockquote>
<h1>Speaker of the Month</h1>
<article>
<h1>Fossil Threads in the Web of Life</h1>
<img src="sampson_dinosaur.jpg" alt="Scott Sampson with Dinosaur">
<h2>February 15, 2012<br>Scott Sampson</h2>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
<p>Read more. <b>Or meet us there!</b></p>
</article>
<h1>Our Ticket Packages</h1>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section><footer>
<p>© 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
and then remove those CSS rules in section:
clear: left;
clear: both;