Hey everyone,
How do I make this section responsive at 768px
.AppleContent {
background-color: #9ACD32;
text-align: center;
padding: 50px 200px;
color: white;
}
<section class="section-1">
<div class="AppleContent">
<i class="fas fa-apple-alt fa-3x"></i>
<h3 class="font-weight">Completely synergize resource taxing relationships</h3>
<p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
</div>
</section>
You have given absolute values for padding padding: 50px 200px;... which is why when you go to smaller sizes, the content looks off;
To get the exact look that you're looking for, Try giving it relative values (instead of absolute values). A percentage like padding: 5% 10%; or like l have done below (relative to view height and view width)...
Below is the code sample
.AppleContent {
background-color: #9ACD32;
text-align: center;
padding: 10vh 20vw;
color: white;
}
<section class="section-1">
<div class="AppleContent">
<i class="fas fa-apple-alt fa-3x"></i>
<h3 class="font-weight">Completely synergize resource taxing relationships</h3>
<p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
</div>
</section>
Related
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
My web page won't scroll on mobile devices. It works if you resize the window on desktop, but if you view the page on an actual mobile device then there is no ability to scroll. This is causing only half of the page's content to be visible.
I've tried setting the body height to 100%.
* {margin: 0; padding: 0, box-sizing: border-box;}
.news-module {
width: 100%;
float: left;
height: auto;
}
.news-sub-module {
width: 70vw;
height: auto;
margin: 2vw 5vw 3vw 5vw;
padding: 4vw;
float: left;
color: black;
cursor: pointer;
}
.news-sub-module:nth-child(even) {
float: right;
}
.header-style-one {
width: 100%;
}
.news-more {
float: left;
margin: 1vw 0 0 0;
}
<div class="news-module">
<div class="news-sub-module">
<div class="news-date">
06.12.2019 </div>
<div class="header-style-one">
Meet Italy’s Most Passionate Tomato Farmer
</div>
<div class="news-description">
August in Italy: businesses are closed, cities have emptied out, towns are deserted—everyone is at the beach. Everyone, that is, except for tomato farmers in the Campania region, Italy’s tomato capital. Here, in late summer, trucks loaded with the vibrant, just-harvested fruits crowd tiny, one-lane streets...
</div>
<div class="news-more">
→ Read More
</div>
</div>
<div class="news-sub-module">
<div class="news-date">
06.11.2019</div>
<div class="header-style-one">
Q+A with Winemaker Steve Matthiasson
</div>
<div class="news-description">
Steve Matthiasson was perhaps the most in-demand viticulturist in Napa when he and his wife, Jill, decided to start their own wine label. We caught up with Steve in the middle of this year’s grape harvest to talk about one of his favorite subjects: gathering friends to eat, drink and be merry...
</div>
<div class="news-more">
→ Read More
</div>
</div>
<div class="news-sub-module">
<div class="news-date">
05.15.2019 </div>
<div class="header-style-one">
Spring’s Most Sensitive, and Bountiful, Vegetable
</div>
<div class="news-description">
“People say gambling came to New Jersey with the casinos,” laughs Tom Sheppard of Sheppard Farms in Cumberland County, New Jersey. “But gambling came with the first farmers. Out there in the field, mother nature can do all kinds of things to you.”...
</div>
<div class="news-more">
→ Read More
</div>
</div>
<div class="news-sub-module">
<div class="news-date">
05.10.2019 </div>
<div class="header-style-one">
Can an American Parmesan Dethrone the King of Cheeses?
</div>
<div class="news-description">
Parmesan cheese is at the heart of Italian cuisine, and the greatest of all of Parmesans is Parmigiano Reggiano. So when you’re looking for a cheese to grate over a saucy tangle of pasta, there is no substitute. The Schuman family believes they can change all that...
</div>
<div class="news-more">
→ Read More
</div>
</div>
</div>
I want the ability to scroll on mobile instead of having the content getting cut off.
Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.
Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?
Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP
And releveant code:
HTML
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="firstpic.png">
</div>
CSS:
.second-content .first-pic {
width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*
}
EDIT: updated codepen link just showing relevant code
As per your codepen you wanted image after text then need to add
float:left in this class second-header-p text-left.
.second-header-p.text-left{
float:left;
}
I add some section for your code. float:left and float:right help to do your task well.
<body>
<div class="second-content">
<div class="sec">
<h2 class="second-header"> Bond Back Guarantee</h2>
</div>
<div class="sec">
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back ha
s never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning.
If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</div>
</body>
css
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
margin-top: 100px;
margin-left: 150px;
}
.second-content .second-header-p {
width: 50%;
font-size: 120%;
margin-left: 150px;
line-height: 40px;
margin-top: 25px;
float:left;
}
.second-content .first-pic {
width: 30%;
border: solid black;
float:right;
}
.sec{
width:100%
}
Give pull-left class to your second-header-p.
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
padding: 20px;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
}
.second-content .second-header-p {
width: 65%;
font-size: 120%;
line-height: 40px;
}
.second-content .first-pic {
width: 30%;
border: solid black;
}
<head>
<title> End of Lease Cleaning in Sydney</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p pull-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</body>
If you using bootstrap then use this code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<section class="second-content">
<div class="col-md-8">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
</div>
<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>
</section>
</body>
</html>
I'm working on a website based on W3 Schools' Bootstrap Company Theme, which I've shared at https://github.com/khpeek/peek-solutions. (A previous version is online at www.peek.solutions). Here is the code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Peek Solutions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-image: url("img/Patagonia_Sirona_crop2_width_1200.jpg");
background-repeat: no-repeat;
/*background-color: #85c1e9;*/
color: #fff;
padding: 70px 25px;
font-family: Montserrat, sans-serif;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #85c1e9;
font-size: 50px;
}
.logo {
color: #85c1e9;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #85c1e9;
}
.carousel-indicators li {
border-color: #85c1e9;
}
.carousel-indicators li.active {
background-color: #85c1e9;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #85c1e9;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #85c1e9;
background-color: #fff !important;
color: #85c1e9;
}
.panel-heading {
color: #fff !important;
background-color: #85c1e9 !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #85c1e9;
color: #fff;
}
.navbar {
margin-bottom: 0;
/*background-color: #818181;*/
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #85c1e9 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #85c1e9;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
#media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
#accordion {text-align: left};
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- <nav class="navbar navbar-default navbar-fixed-top"> -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Peek Solutions</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome to Peek Solutions</h1>
<p>Pipeline integrity solutions for the energy industry.</p>
<!-- <form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<button type="button" class="btn btn-danger">Subscribe</button>
</form> -->
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About us</h2><br>
<h4>Peek Solutions, an independent consulting company founded by Ralf Peek, provides pipeline integrity solutions and assurance support for the energy industry, including the application of structural reliability methods to assess and ensure integrity.</h4><br>
<!-- <p>Peek Consulting is a consulting company founded by Ralf Peek.</p> -->
<br>
<!-- <button class="btn btn-default btn-lg">Get in Touch</button> -->
Get in touch
</div>
<div class="col-sm-4">
<p><center><strong>This website is currently under construction.</strong></center></p>
<!-- <span class="glyphicon glyphicon-signal logo"> This website is under construction</span> -->
<img src="img/under_construction.jpg"></img>
</div>
</div>
</div>
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center bg-grey">
<h2>SERVICES</h2>
<h4>Our services include:</h4>
<br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Pipeline Integrity Assessment and Design</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Our services include the design and assessment of subea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design/assessment.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Structural Reliability Assessment (SRA)</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties, including:
<ul>
<li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor.</li>
<li>SRA for pipelines subject to lateral buckling under thermal expansion.</li>
<li>Operating pipelines subject to extreme conditions (for example, turbidity current loading).</li>
<li>Probabilistic response-based seismic loading assessment criteria.</li>
<li>Nuclear containment structure reliability assessment.</li>
<li>Peek Solutions can also coordinate and deliver Quantitative Risk Assessment (QRA), where necessary arranging for inputs on hydrocarbon release modeling from others. (QRA includes assessment of the consequences of failure as well as the probability of occurrence, and typically involves integration of muti-disciplinary inputs, as well as inputs based on local knowledge into a model.)</li>
</ul>
<p>Reasons to perform a Structural Reliability Analysis (SRA) or Quantitative Risk Asessment (QRA) could include:</p>
<ul>
<li>Extreme loadings are encountered such as ice, or geohazard loadings for which there are no established design methods and criteria.</li>
<li>Operating conditions (e.g. wet, sour service) can strongly affect the deformation capacity of the pipe.</li>
<li>Consequences of failure could be exceptionally severe.</li>
<li>New technology or a new concept is being used for which there is limited experience, and ingredient uncertainties affecting the performance are different from those for standard technology.</li>
<li>Where new, more reliable technology, inspection or assessment methods are used whereby uncertainties are reduced, and an adjustment in the required safety margins could be justified.</li>
<li>Value of information analysis under uncertainty in essence consists of performing SRA or QRA with and without the information so that the value of the information can be assessed. Such “information” might consist for instance of a (full scale) testing program, or other investigation to reduce uncertainties.</li>
<li>The loading for a pipeline is somewhere in between load- and displacement-controlled, so that existing criteria for either of these cases is not directly applicable, and a case-specific calibration of the required safety margins is needed.</li>
</ul>
<p>SRA and/or QRA ties together a number of aspects of design, specifications, fabrication and installation methods, monitoring, inspection and maintenance, and contingency response procedures, as all have a bearing on reliability. To include all these aspects properly typically requires a muti-disciplinary team, with expertise that typically cannot be found within a single company. Peek Solutions will assemble and engage such a team (e.g. by subcontracts), drawing from a network of specialists, as well as drawing from customer’s expertise, practices and procedures.</p>
<p>In SRA’s statistical data are used to quantify uncertainties. However in most cases there are important uncertainties for which statistical data are not available. Indeed these dominate more often than not. Ignoring such uncertainties, or making the SRA conditional upon certain assumptions about such uncertainties can be dangerous. Therefore Peek Solutions will assess all uncertainties, rather than only the ones for which statistical data are available, and quantify them by informed engineering judgment supported, engaging external experts as appropriate.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Pipeline Design or Operational Integrity Review, Assurance and/or Specification</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Despite the guidance available from design codes, the design process relies significantly on engineering judgment to define suitable analysis methods, and the associated assumptions, and approximations. Such judgments should be based on a knowledge of the conditions for which the safety margins in the design code have been calibrated, and how there may or may not differ from the conditions for the design under consideration. Safe and economical design requires not only state-of-the-art or beyond analysis methods, but also to understand differences between model and real behavior, their impact, and safety margins needed to cover the associated uncertainties. Peek Solutions can help to assure that such issues have been adequately addressed for pipeline designs where special challenges are involved.</p>
<p>Design reviews can sometimes raise issues at a time when this can have a deleterious effect on project schedules. A better alternative can be to develop a robust design approach from the onset. This can be done by engaging design review at the early stages, or even by developing a Design Specification prior to FEED (Front End Engineering Design) or detailed design.</p>
<p>The Design Specification includes design code interpretation (if applicable), analysis methods, and assumptions and approximations to be made, together with a pertinent example to illustrate these. Further it can include any testing programs, e.g. in the form of additional welding procedure qualification requirements to assure girth weld integrity understrain based design conditions, or special in-situ tests to reduce uncertainty associated with pipe-soil interaction. Where necessary the safety margins in the Design Specification are calibrated based on structural reliability assessment to ensure that a specified target reliability level is achieved.</p>
<p>In addition to design, Peek Solutions supports installation (where this can affect performance), and specification and interpretation of as-built and/or as-laid surveys.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Concept Definition and Assessment</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>In some cases it may be expedient to perform quick evaluations of a number of concepts in order to focus on the most promising ones, or check the feasibility of an innovative one which could deliver considerable life-cycle savings, but for which there is limited or no experience. Peek Solutions can help in this process to conceive, identify, and/or assess innovative concepts. For instance Ralf Peek invented an effective method to reliably trigger lateral buckles in order to safely accommodate thermal expansion called the “Zero-Radius-Bend (ZRB)” method. (See [ref] and/or search “ZRB pipeline” on the web for more information.) This method has been successfully adopted for a number of of high-temperature subsea pipelines for Sarawak Shell and others. According to a review of methods to trigger buckles for controlled thermal expansionby the Safebuck JIP [url], this ZRB is the only one with 100% success in triggering the buckles as intended.</p>
<p>To make innovation feasible, it needs to be assessed at an early stage. Peek Solutions can help by developing and assessing a feasibility-basis design at a level of detail that is sufficient to expose any devil that may be hiding in the details.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Research and Development</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>Peek Solutions’ ambition is to contribute to improved understanding and modeling for pipeline integrity assurance, not only by its own R&D efforts, but also by being at the interface between academic research and applications to the industry, in order to make better use of academic research, but also to influence academic research programs towards matters relevant to pipeline integrity.</p>
<p>Structural Reliability Assessment (SRA) provides an excellent framework to capture and quantify improved knowledge from R&D programs in terms of reduced uncertainty. The economic benefit this generates can then be assessed by a Value of Information Analysis (VIA). Conversely, SRA and VIA can also point to areas where R&D is most fruitful.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Specialized Software Development</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>Ralf Peek has experience with code development and application for Finite Element Analysis, having developed the NPEX code while at the University of Michigan. Using NPEX as a starting point, Peek Solutions can efficiently develop codes for specific applications, such as lateral buckling analysis, buried pipeline subject to ice loading or offset at a fault (with the soil modeled by springs), or calculation of pipe deformation capacity without local buckling.</p>
<p>Experience also includes the development of a material subroutine, VUMAT, for ABAQUS/Explicit to model undrained or drained saturated soil behavior during ice gouging over a buried pipeline.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Leersum, The Netherlands</p>
<p><span class="glyphicon glyphicon-phone"></span> +31 624272619</p>
<p><span class="glyphicon glyphicon-envelope"></span> <a href=mailto:ralf#peek.solutions>ralf#peek.solutions</a></p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<!-- <script src="http://maps.googleapis.com/maps/api/js"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI"></script>
<script>
var myCenter = new google.maps.LatLng(52.010938, 5.437853);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<!-- <p>Bootstrap Theme Made By www.w3schools.com</p> -->
</footer>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
</body>
</html>
One thing I'm struggling a bit with is how to make the background image fit in the Jumbotron without gray space below:
I don't see any settings in the CSS which control the height of the Jumbotron so that I could make it equal to the image's height. How could I achieve this?
The simplest and most scalable/responsive solution would be to scale your background image with CSS to fit the header, rather than basing your content off the image's dimensions.
This can be done with one property added to the .jumbotron class: background-size: cover;.
This will cover the header with your image while maintaining its aspect ratio. Ideally, you should also pair the header with a higher resolution image that scales down to fit the header, rather than having the background image scale up (potentially making it blurry).
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