I've set up my code using flex so that it works responsively (it's looking how I'd like on devices sub 960 in width so any changes to desktop happen within the css query at the bottom of my CSS file). potentially a very simple question but on views wider than 960 the 8 tiles aren't a consistent width (one .row containing 4 .tiles) - I tried adding a width of 25% which I thought would make them always evenly span the width of the page but that didn't work. Within that the .content (expanding content) seems to extend further that the row to the right which I cant understand?
any ideas would be really appreciated!
working fiddle: https://jsfiddle.net/simoncunningham/zsLxuo26/7/
any advice would appreciated!
<div class="box">
<div class="tile" onclick="openTab('b1');">
<img class="icon-spacing" src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b1" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Banking</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b2');">
<img class="icon-spacing" src="./Icons/RegTech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b2" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>RegTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b3');">
<img class="icon-spacing" src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b3" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>InsurTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b4');">
<img class="icon-spacing" src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b4" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Lending</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="tile" onclick="openTab('b5');">
<img class="icon-spacing" src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b5" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Accounting</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b6');">
<img class="icon-spacing" src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b6" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Payments</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b7');">
<img class="icon-spacing" src="./Icons/Quote.svg" />
<p>Quote</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b7" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Quote</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b8');">
<img class="icon-spacing" src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b8" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>WealthTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
background-color: black;
border: 1px solid grey;
height: 150px;
text-align: center;
font-size: 16px;
color: white;
cursor: pointer;
}
.active-tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
text-align: center;
border: 1px solid #000;
background-color: green;
height: 125px;
cursor: pointer;
}
.content {
order: 1;
flex: 1 0 100%;
/* For visual only */
padding: 20px;
color: white;
text-align: center;
border: 1px solid #000;
background-color: #228b22;
}
.description {
text-align: left;
}
.icon-spacing {
margin-top: 24px;
}
/* Clear floats after the tiles */
.box:after {
content: '';
display: table;
clear: both;
}
.closebtn {
float: right;
color: white;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
.arrow-up {
width: 25px;
height: 25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*
"Desktop" and above
*/
#media (max-width: 961px) {
.box {
flex-direction: column;
}
.content {
order: 0;
}
}
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('content');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.tile');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-tile');
tab.children[2].classList.remove('arrow-up');
});
// Set the background of the clicked tab
this.classList.add('active-tile');
tab.children[2].classList.add('arrow-up');
});
});
}
Your problem (when you try width: 25% on tiles) is that 100% is calculated without taking into account the border and the padding.
.tile has a border of 1px, so 25% * 4 + 8 * 1px is more than 100%.
.content has a border of 1px, and a padding of 20px, so 100% + 2 * 1px + 2 * 20px is more than 100%.
To solve the issue you can just change the way your box is calculated by including the border and the padding when you assign the width:
.tile, .content {
box-sizing: border-box;
}
.tile {
width: 25%;
}
You can learn more about box-sizing and its values on the MDN documentation page.
Try add the following to the ".tile" class: flex-basis: 20%;
I am building like a tribute page now. I have been setting the html, body and height=100%, but when i inspect it, only the HTML and body tags height fill the whole page of the browser, whereas the div element doesn't. I think this makes my timeline-content overflow. Can I know how do i fix it?
Also, the page is not being responsive, can I know how can I fix this as well? I'm a beginner for HTML and css, so might need some guidance...thanks in advance.
/* universal setting */
*{
padding: 0;
margin: 0;
}
/* introduction */
.introduction{
background: #f9f9f9;
padding-bottom: 10px;
}
.Elon-Musk-photo img{
width: 110px;
height: 110px;
border-radius: 100%;
float: left;
margin: 0 20px 20px 20px;
}
.Name{
text-align: center;
margin-bottom: 10px;
}
.introduction-description p{
font-size: 16px;
}
.des2 h2{
width: 100%;
text-align: center;
font-size: 30px;
font-family: "Coda Caption", serif;
background: #dda0dd;
}
/* timeline */
.timeline .timeline-word{
font-size: 80px;
font-family: "Brush Script MT", serif;
position: relative;
left: 310px;
width: 1000px;
/*margin-right: -330px;*/
margin-top: 40px;
}
.timeline .timeline-content{
position: relative;
left: 170px;
top: 40px;
font-family: Dosis, sans-serif;
width: 800px;
}
.event-date-first-child,
.event-date{
width: 120px;
float: left;
padding: 8px 12px 8px 8px;
text-align: center;
clear: left;
border-top: 1px solid #ccc;
font-weight: bold;
}
.event-des-first,
.event-des{
width: 625px;
float: left;
background: #f9f9f9;
padding: 8px 12px 8px 8px;
border-top: 3px solid #ccc;
border-left: 1px solid #ccc;
border-right: 2px solid #ccc;
line-height: 26px;
}
/* About */
.about{
/*display: inline-block;*/
position: absolute;
right: 150px;
text-align: center;
font-family: Dosis, sans-serif;
}
.about th img{
display: block;
width: 270px;
height: 210px;
margin: 10px auto;
border-radius: 15px;
}
.about #about-word{
font-size: 35px;
font-family: "Montserrat", sans-serif;
}
.about th{
font-weight: bold;
font-size: 15px;
}
.about td{
padding: 10px;
background: #f9f9f9;
border-bottom: 1px solid #ccc;
font-size: 14px;
width: 190px;
}
/* Footer */
html,
body,
.container{
min-height: 100%;
}
.content{
padding-bottom: 50px;
}
.footer{
margin-top: -50px;
/*position: absolute;*/
height: 50px;
clear: both;
text-align: center;
background: #dda0dd;
font-size: 18px;
padding-top: 18px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Elon Musk</title>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Coda+Caption:wght#800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
<link href="helloworld.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header class="header">
<nav>
<ul>
<li>
Introduction
</li>
<li>
Timeline
</li>
<li>
About
</li>
</ul>
</nav>
</header>
<div class="introduction" id="introduction">
<hr>
<br>
<div class="Elon-Musk-photo">
<img src="https://www.biography.com/.image/t_share/MTY2MzU3Nzk2OTM2MjMwNTkx/elon_musk_royal_society.jpg" alt="Elon Musk photo">
</div>
<div class="Name">
<h1>Elon Musk</h1>
</div>
<div class="introduction-description">
<p>
Elon Musk is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s when he sold his start-up company, Zip2, to a division of Compaq Computers.
Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio with the purchase of SolarCity in 2016 and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration.
In January 2021, Musk reportedly surpassed Jeff Bezos as the wealthiest man in the world.
</p>
</div>
</div>
<div class="des2">
<h2>The world's smartest and richest man.</h2>
</div>
<div class="timeline" id="timeline">
<div class="timeline-word">
<h1>Timeline</h1>
</div>
<div class="timeline-content">
<div class="year">
<div class="event-date-first-child">
<p>28 June 1971</p>
</div>
<div class="event-des-first child>">
<p>Musk was born on June 28, 1971, in Pretoria, South Africa. He is the son of Maye Musk, a model and dietitian from Regina, Saskatchewan, Canada, and Errol Musk, a South African electromechanical engineer, pilot and sailor.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>1980</p>
</div>
<div class="event-des">
<p>His parents were divorced in 1980.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>1981</p>
</div>
<div class="event-des">
<p>At the age of 10, he developed an interest in computing with the Commodore VIC-20 and taught himself computer programming. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>1983</p>
</div>
<div class="event-des">
<p>By the age of 12, Musk sold the code of a BASIC-based video game he created called Blastar, to a magazine called PC and Office Technology, for approximately $500.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>June 1989</p>
</div>
<div class="event-des">
<p>At the age of 17, in June 1989, Elon Musk moved to Canada to attend Queen's University, avoiding mandatory service in the South African military. His plan was to go United States where he thought great things are possible, more than any other country. And it would be easy to get to the United States from Canada.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>1992</p>
</div>
<div class="event-des">
<p>He left Queen's University in 1992 to study business and physics at the University of Pennsylvania, and graduated with an undergraduate degree in economics and stayed for a second bachelor's degree in physics.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>1995</p>
</div>
<div class="event-des">
<p>In 1995, Musk and his brother, Kimbal, started Zip2, a web software company which developed and marketed an Internet city guide for the newspaper publishing industry. The company raised money from a small group of angel investors.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>February 1999</p>
</div>
<div class="event-des">
<p>Compaq acquired Zip2 for US$307 million in cash and US$34 million in stock options in February 1999. Musk received US$22 million for his 7 percent share from the sale.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>March 1999</p>
</div>
<div class="event-des">
<p>In March 1999, Musk co-founded X.com, an online financial services and e-mail payment company, with US$10 million from the sale of Zip2.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2000</p>
</div>
<div class="event-des">
<p>X.com merged with Confinity, which had a money-transfer service called PayPal and Musk became the CEO and company's largest shareholder by owning 11.7% of shares. The merged company focused on the PayPal service and was later renamed PayPal. PayPal's early growth was driven mainly by a viral marketing campaign where new customers were recruited when they received money through the service.
Musk met his first wife, Canadian author Justine Wilson, while both were students at Ontario's Queen's University. They married in 2000. Their first son, Nevada Alexander Musk, died of sudden infant death syndrome (SIDS) at the age of 10 weeks.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>October 2000</p>
</div>
<div class="event-des">
<p>Musk was ousted in October 2000 from his role as CEO of PayPal (although he remained on the board) due to disagreements with other company leadership, notably over his desire to move PayPal's Unix-based infrastructure to Microsoft Windows. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2001</p>
</div>
<div class="event-des">
<p>In 2001, Musk conceptualized Mars Oasis, a project to land a miniature experimental greenhouse on Mars, containing food crops growing on Martian regolith, in an attempt to regain public interest in space exploration. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>October 2001</p>
</div>
<div class="event-des">
<p>In October 2001, Musk travelled to Moscow with Jim Cantrell (an aerospace supplies fixer), and Adeo Ressi (his best friend from college), to buy refurbished Dnepr Intercontinental ballistic missiles (ICBMs) that could send the envisioned payloads into space. The group met with companies such as NPO Lavochkin and Kosmotras; however, according to Cantrell, Musk was seen as a novice and was consequently spat on by one of the Russian chief designers, and the group returned to the United States empty-handed.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>February 2002</p>
</div>
<div class="event-des">
<p>In February 2002, the group returned to Russia to look for three ICBMs, bringing along Mike Griffin. Griffin had worked for the CIA's venture capital arm, In-Q-Tel, as well as NASA's Jet Propulsion Laboratory, and was just leaving Orbital Sciences, a maker of satellites and spacecraft. The group met again with Kosmotras, and were offered one rocket for US$8 million; however, this was seen by Musk as too expensive; Musk consequently stormed out of the meeting. On the flight back from Moscow, Musk realized that he could start a company that could build the affordable rockets he needed.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>May 2002</p>
</div>
<div class="event-des">
<p>Musk founded Space Exploration Technologies, or SpaceX, in May 2002 with US$100 million of his early fortune. Musk became the chief executive officer (CEO) and chief technology officer (CTO). SpaceX develops and manufactures space launch vehicles with a focus on advancing the state of rocket technology. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>October 2002</p>
</div>
<div class="event-des">
<p>In October 2002, PayPal was acquired by eBay for US$1.5 billion in stock, of which Musk received US$165 million. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>July 2003</p>
</div>
<div class="event-des">
<p>Tesla, Inc. (originally Tesla Motors) was incorporated in July 2003 by Martin Eberhard and Marc Tarpenning, who financed the company until the Series A round of funding.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2004</p>
</div>
<div class="event-des">
<p>Musk and his wife had 2 sons, twins, through in vitro fertilization. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>February 2004</p>
</div>
<div class="event-des">
<p>Musk led the Series A round of investment for Tesla in February 2004, joined Tesla's board of directors as its chairman. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2006</p>
</div>
<div class="event-des">
<p>Musk and his wife had other 3 sons, triplets, through in vitro fertilization.
Musk provided the initial concept and financial capital for SolarCity, which was then co-founded in 2006 by his cousins Lyndon and Peter Rive.
From 2006, SpaceX got various contracts from NASA to transport cargo and astronauts to the International Space Station.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2007</p>
</div>
<div class="event-des">
<p>Following the financial crisis in 2008 and after a series of escalating conflicts in 2007, Eberhard was ousted from the firm. Musk assumed leadership of the company as CEO and product architect.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2008</p>
</div>
<div class="event-des">
<p>Musk and his wife Justine were separated. They share custody of their five sons.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2010</p>
</div>
<div class="event-des">
<p>In 2008, Musk began dating English actress Talulah Riley, and in 2010, the couple married. In January 2012, Musk announced that he had ended his four-year relationship with Riley, tweeting to Riley, "It was an amazing four years. I will love you forever. You will make someone very happy one day." In July 2013, Musk and Riley remarried. In December 2014, Musk filed for a second divorce from Riley; however, the action was withdrawn. The media announced in March 2016 that divorce proceedings were again under way, this time with Riley filing for divorce from Musk. The divorce was finalized in late 2016.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2010</p>
</div>
<div class="event-des">
<p>In 2010, the Musk Foundation collaborated with SolarCity to donate a 25-kW solar power system to the South Bay Community Alliance's hurricane response center in Coden, Alabama.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2011</p>
</div>
<div class="event-des">
<p>In a 2011 interview, he said he hopes to send humans to Mars' surface within 10–20 years. </p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>July 2011</p>
</div>
<div class="event-des">
<p> In July 2011, the Musk Foundation donated US$250,000 towards a solar power project in Sōma, Japan, a city that had been recently devastated by a tsunami.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2012</p>
</div>
<div class="event-des">
<p>The underlying motivation for funding both SolarCity and Tesla was to help combat global warming. In 2012, Musk announced that SolarCity and Tesla are collaborating to use electric vehicle batteries to smooth the impact of rooftop solar on the power grid, with the program going live in 2013.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>25 May 2012</p>
</div>
<div class="event-des">
<p>On May 25, 2012, the SpaceX's vehicle, Dragon docked with the International Space Station (ISS), making history as the first commercial company to launch and berth a vehicle to the International Space Station.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2013</p>
</div>
<div class="event-des">
<p>By 2013, SolarCity was the second largest provider of solar power systems in the United States.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>May 2013</p>
</div>
<div class="event-des">
<p>Musk had been a supporter of the U.S. political action committee (PAC) FWD.us, which was started by fellow high-profile entrepreneur Mark Zuckerberg and advocates for immigration reform. However, in May 2013, Musk publicly withdrew his support in protest of advertisements the PAC was running that supported causes like the Keystone Pipeline. Musk and other members, including David O. Sacks, pulled out, criticizing the strategy as "cynical." Musk further stated, "we shouldn't give in to the politics. If we give in to that, we'll get the political system we deserve."</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>12 August 2013</p>
</div>
<div class="event-des">
<p>On August 12, 2013, Musk unveiled a concept for a high-speed transportation system incorporating reduced-pressure tubes in which pressurized capsules ride on an air cushion driven by linear induction motors and air compressors. The mechanism for releasing the concept was an alpha-design document that, in addition to scoping out the technology, outlined a notional route where such a transport system might be built: between the Greater Los Angeles Area and the San Francisco Bay Area.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>2014</p>
</div>
<div class="event-des">
<p>In 2014, Musk announced that Tesla would allow its technology patents to be used by anyone in good faith in a bid to entice automobile manufacturers to speed up development of electric cars.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>17 June 2014</p>
</div>
<div class="event-des">
<p>On June 17, 2014, Musk committed to building a SolarCity advanced production facility in Buffalo, New York, that would triple the size of the largest solar plant in the United States. Musk stated the plant will be "one of the single largest solar panel production plants in the world," and it will be followed by one or more even bigger facilities in subsequent years. The Tesla Gigafactory 2 is a photovoltaic (PV) cell factory, leased by Tesla subsidiary SolarCity in Buffalo, New York. Construction on the factory started in 2014 and was completed in 2017.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>January 2015</p>
</div>
<div class="event-des">
<p>In January 2015, Musk made a guest appearance playing himself on The Simpsons in an episode titled "The Musk Who Fell to Earth"; the episode poked fun at many of Musk's ideas.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>January 2015</p>
</div>
<div class="event-des">
<p>Musk donated US$10 million to the Future of Life Institute in January 2015, to run a global research program aimed at keeping artificial intelligence beneficial to humanity.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>June 2015</p>
</div>
<div class="event-des">
<p>In June 2015, Musk announced a design competition for students and others to build Hyperloop pods to operate on a SpaceX-sponsored mile-long track in a 2015–2017 Hyperloop pod competition. The track was used in January 2017, and Musk also started building a tunnel.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>November 2015</p>
</div>
<div class="event-des">
<p>In November 2015, Musk appeared in an episode of The Big Bang Theory, playing himself, volunteering at a soup kitchen with Wolowitz.</p>
</div>
</div>
<div class="year">
<div class="event-date">
<p>December 2015</p>
</div>
<div class="event-des">
<p>In December 2015, Musk announced the creation of OpenAI, a not-for-profit artificial intelligence (AI) research company. OpenAI aims to develop artificial general intelligence in a way that is safe and beneficial to humanity.</p>
</div>
</div>
</div>
</div>
</div>
<div class="about" id="about">
<table>
<tbody>
<tr>
<th colspan="2" id="about-word">About
<img src="https://static.theceomagazine.net/wp-content/uploads/2018/10/15093202/elon-musk-1100x733.jpg" alt="Elon Musk photo"></th>
</tr>
<tr>
<th>
Born
</th>
<td>
Elon Reeve Musk
June 28, 1971 (age 49)
Pretoria, South Africa
</td>
</tr>
<tr>
<th>
Occupation
</th>
<td>
Entrepreneur, Industrial designer, Engineer
</td>
</tr>
<tr>
<th>
Spouse(s)
</th>
<td>
<p>Justine Wilson (m. 2000; div. 2008)</p>
<p>Talulah Riley (m. 2010; div. 2012) (m. 2013; div. 2016)</p>
</td>
</tr>
<tr>
<th>
Children
</th>
<td>
7
</td>
</tr>
<tr>
<th>
Parents
</th>
<td>
<p>Errol Musk (father)</p>
<p>Maye Musk (mother)</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer class="footer">
<p>© Copyright Created by Durian</p>
</footer>
</body>
</html>
If you want an element to be in the size of a complete page, the use:
.container
{
/*
Set the height property to 100vh
vh means with respect to the view port's height.
so, if you set height to 100vh, then the element
will be 100% size of the view port
*/
height: 100vh;
}
I've just registered here and I am looking for a little help.
I'm working on my tribute page for free code camp and the bullet points I have are not remaining central when resizing the fluid container.
Does anyone have any ideas?
Here is a link to my code pen so you can take a look code pen
body {
margin: 60px 60px 60px 60px;
font-size: 100%;
}
h1 {
font-family: lobster, Monospace;
text-align: center;
font-size: 5em; /* 80px/16=5em */
text-decoration: underline;
margin-bottom: 60px;
border-style: ;
}
blockquote {
font-size: 20px;
font-family: 'Puritan', cursive;
color: black;
}
.img-r {
/* other definitions */
width:100%;
}
.padding {
padding-top: 20px;
}
li {
font-family: Monospace;
text-align: center;
font-size: 2em; /* 80px/16=5em */
text-decoration: ;
margin-bottom: 60px;
border-style: ;
}
#media (max-width: 700px){
.jumbotron p {
font-size: 5px;
}
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<h1>
Dame Stephanie "Steve" Shirley
</h1>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9 col-md-6">
<h2 style="color: #645340; text-decoration: underline;" class="text-center">About
Dame Stephanie "Steve" Shirley </h2>
<ul class="text-center">
<li class="text-center"><em>Dame Stephanie "Steve" Shirley was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em>
</li>
<li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em>
</li>
<li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em>
</li>
<li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em>
</li>
<li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em>
</li>
<li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em>
</li>
<li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em>
</li>
</div>
<div class="col-xs-3 col-md-6">
<div class="thumbnail">
<img class="img-responsive img-r center-block" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg">
<div>
<p class="text-center padding">
Dame Stephanie "Steve" Shirley
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Much appreciated,
R
The list is not aligned with the title because the list has a left-padding, as it should, so that the bullets are visible and there's spacing between them and the text. You could either remove the 40 pixels of left padding on the ul.text-center element or add 40 pixels of left-padding to the title.
I am trying to make this page responsive. As you can see when I resize the browser the text is scrunched rather than moving to the bottom of the image. Any help would be greatly appreciated!
Here is my HTML:
<div id="content-wrapper">
<div class="container">
<div class="content">
<div class="line">
<h2 class="text-center exec-header">Executive
Directors</h2>
</div>
<article class="ninecol">
<div class="content-item first cf" id="maja">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/majapic.jpg"
width="250px">
</figure>
<h3 class="name">Maja Miletich</h3>
<h5 class="job-title">CEO</h5>
<div class="description">
<p>Maja Miletich is the CEO of Zip Zap Zop Kids,
LLC. Maja has worked with children on many levels.
Having a brother with Autism has given Maja an
understanding of how powerful communication is for
ALL children. Maja has worked for years as a
teacher where she practices emergent
curriculum.</p>
<p>Maja has studied theater and improv at A.C.T. in
San Francisco as well as graduated from The Second
City Training Center in Hollywood where she studied
improv and sketch comedy.</p>
<p>Maja has her Bachelors Degree in Early Childhood
Education. Maja's focus is on inclusive classrooms
where curriculum is designed to allow children and
young adults to feel comfortable expressing
themselves in whichever way they feel most
comfortable</p>
<p>Maja believes when we can share with one another
what has been taught then, and only then, are we
actually learning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="april">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/april2.jpg"
width="250px">
</figure>
<h3 class="name">April Miletich</h3>
<h5 class="job-title">CFO</h5>
<div class="description">
<p>April Rasmussen, PhD has been a credentialed
English teacher since 2008 and has taught
everything from advanced placement English language
and composition to literature through film, and
English as a second language support classes. Her
passion is for the art of story and also
storytelling as a tool for student growth. She
holds advanced degrees in education, mythology and
depth-psychology.</p>
</div>
</div>
</article>
</div>
<div class="line">
<h3 class="text-center exec-header">Board of Directors</h3>
</div>
<div class="content-item first cf" id="ari">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/ari.jpg" width=
"250px">
</figure>
<h3 class="name">Ari Schenider</h3>
<h5 class="job-title">President</h5>
<div class="description">
<p>Ari Schneider is a graduate of The Second City
Conservatory and has a (BA) Hons from The Guildford School
of Acting in England. He has been a cast member of the
all-ages improv review The Really Awesome Improv Show
(Voted Best Kid’s Comedy Show) at The Second City in
Hollywood for the past 3 years. He also is affiliated with
the mentorship program, YSF (The Young Screenwriters
Foundation) at New Rhodes as well as teaching afer-school
improv with Zip Zap Zop Kids, LLC.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/debra.jpg" width=
"250px">
</figure>
<h3 class="name">Debra Gliozzi</h3>
<h5 class="job-title">Treasurer</h5>
<div class="description">
<p>Debra Kratochvil Gliozzi is a first generation American
and first in her family to attend college. Her career spans
35 years and two distinct industries. Debra is currently an
administrator and educator in Danville, California. She
brought her MBA and business experience to San Ramon Valley
High School and integrated Business Computers (an ROP
course), Personal Finance and Introduction to Business and
Entrepreneurship into the curriculum. Debra says that her
goal is to equip students with skills that prepare them for
the real world. It is the most important thing I can
do.</p>
<p>This is her second career after transitioning from the
Telecommunications Industry where she held management
positions at Calix Inc., SBC Communications, Pacific Bell,
MCI and Sprint. Her vast experiences included Forecasting,
Accounting, Business Analysis, Market Financials,
Competitive Assessment, Product Development, Product
Marketing, Procurement, Quality Management and Sales
Operations & Planning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/melina.jpg"
width="250px">
</figure>
<h3 class="name">Melina Johnson</h3>
<h5 class="job-title">Secretary</h5>
<div class="description">
<p>Melina Johnson is a self-employed entrepreneur who
created her own home organizing business. Melina is the
mother of two children, her son having Autism. She has
spent countless hours dedicated to researching and
providing her son with the best therapies and services to
help him with his growth and development. Every therapist
and teacher, over the years, has told Melina that her
natural sense of humor has been the best therapy she could
provide to her son - Humor and laughter open up doors to
cognitive and social development. And it’s fun!</p>
<p>Melina’s education has been in the health sciences,
having a degree in Dental Hygiene. After years of hygiene
practice, she decided to create a job for herself that
would utilize her natural organizational skills, and allow
her creativity and fun. Melina continues to grow her home
organizing business and raise her children with a strong
sense of responsibility, and a positive outlook on
life.</p>
</div>
</div>
</div>
</div>
and CSS:
.line {
overflow: hidden;
text-align: center;
}
.exec-header{
margin-top: 15px;
display: inline-block;
padding: 0 15px;
position: relative;
font-family: Roboto Condensed;
font-weight: bold;
font-size: 30px;
}
.content .ninecol {
padding-right: 4.6875%;
padding-left: 4.6875%;
}
.exec-header:before{
right: 100%;
}
.exec-header:before, .exec-header:after {
background: #333333;
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 96%;
}
.content {
overflow: hidden;
margin: 0 auto;
max-width: 1200px;
}
.content-item.first {
padding-top: 0;
background: 0;
overflow:hidden;
}
.content-item {
margin-left: -2.18978%;
margin-right: -2.18978%;
padding: 30px 2.18978%;
}
#maja{
margin-top: 10px;
}
#ari{
margin-top: 10px;
}
.exec-header:after {
left: 100%;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.content-item figure {
}
figure img {
padding-bottom: 14px;
}
.bio-pics {
display: block;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
-moz-user-drag: -moz-none;
-webkit-user-drag: none;
user-drag: none;
}
h3.name {
margin-bottom: .75em;
line-height: 1.2em;
font-family: Roboto Condensed;
font-weight: bold;
}
.content-item figure {
float: left;
margin-right: 5.83942%;
margin-bottom: 0;
}
.content-item .description, .content-item .details {
overflow: hidden;
}
.content-item .description {
min-height: 0;
}
h5.job-title{
font-family: Roboto Condensed;
font-weight: bold;
margin-top: -16px;
}
try by adding float:left ; in description class in css file
it should work also add an display inline-block to div with id=maja
I have a four column footer that works fine until the browser window is shrunk.
The 2nd column(Div ID fourth) then would start push text under one of the other boxes:
It's easier to see on the website: Teetimelawn.com
I tried a few solutions but they usually end up pushing the div for fourth under near the other 3 inline div columns.
Here's the CSS info:
.footer {
background-color: #336600;
clear: both;
float: none;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
height: 350px;
color: #F7F7F7;
min-width: 1400px;
width: 100%;
max-height: 350px;
text-align: center;
display: inline-block;
}
#third {
width: 180px;
float: left;
text-align: left;
margin-left: 10px;
display: inline-block;
margin-right: 5px;
}
#first {
width: 300px;
float: right;
overflow: visible;
margin-right: 10px;
}
#second {
float: right;
margin-right: 10px;
margin-left: 10px;
}
#fourth {
height: 100%;
clear: none;
padding-left: 10px;
padding-right: 10px;
}
Here's the HTML
<div class="footer">
<div id=third>
<h1>Site Map
</h1>
<p1>
<a href="/index.html">Home page
</a> <br>
<a href="/estimate.htm">Estimate Form
</a> <br> <p1>
<a href="/lawncare.html">Lawn Care Process
</a> <br>
<p1>
<a href="/trees.html">Tree And Shrub Control
</a> <br>
<p1><a href="/pestcontrol.html">Pest Control Services
</a> <br>
<p1>Lawn Sprinkler ervice <br>
<p1><a href="/paybal.php">Secure Online Bill Pay
</a> <br>
<p1>
<a href="/careers.html">Careers And Team
</a>
<p1>
<br>
<p1>
<a href="/testimony.html">Customer Testimony And Lawn Gallery
</a>
<br>
</div>
<div id=first><div itemscope itemtype="http://www.schema.org/LocalBusiness">
<h1 itemprop="name">Tee Time Lawn Care</h1>
<br>1566 Frontage Rd
O'Fallon, IL 62269</p1></a>
<br>
<p1 itemprop="telephone">(618) 632-8873<br>(636) 272-8873</p1>
<br>
<br>
<p2 itemprop="description"> A local lawn and landscaping company with an emphasis on safe, organic lawn care. Lawn care companies like us will treat your lawn and yard like a golf course so give us a call if you need the best lawn in your neighborhood. </p2></div>
</div>
<div id=second>
<h1>Lawn care company service in Missouri, Illinois (MO, IL)<br>
St. Louis suburbs including:</h1>
Fairview Heights lawn care, Fairview Heights landscaping<br>
St. Louis lawn care, St. Louis landscaping<br>
Edwardsville lawn care, Edwardsville landscaping<br>
Granite city lawn care, Granite city landscaping<br>
Saint Charles lawn care, Saint Charles landscaping<br>
Belleville lawn care, Belleville landscaping<br>
Collinsville lawn care, Collinsville landscaping<br> O'Fallon lawn care, O'Fallon landscaping<br>
And nearby towns and cities for your yard service needs.<br><br>
</div><div id=fourth>
<h1> Our lawn care and landscaping services include:</h1>
<p2>Organic and granular fertilization, aeration and seeding, pest control, tree and shrub maintenance service, soil conditioning, heat guard, summer recovery, root rejuvenation, winterizing, blanket barrier, mole removal, yard cleaning, lawn and yard mowing, commercial landscaping, weed removal, weed prevention, vole removal, and more!
<br> Please contact us for additional services.</p2>
</div>
<!-- end .footer -->
</div>
Google+
</body>
</html>
Try change the padding in #fourth div id into margin like this:
margin-right: 20px;
margin-left: 10px;
UPDATE : I create This Fiddle for example of my latest comment.