I am trying to get the background of my block section to encapsulate the image, or be responsive to what is put inside. Honestly, I don't even know what I am trying to ask, I just want the white space to respond to the image size, so I can have a background color/image behind a set block section for my About me. I have tried messing with padding/margin but I cannot seem to get it done correctly. In case the image doesn't load, I have my .html and .css code below
Code
Product
html {
position: relative;
min-height: 100%;
}
body {
background-color: lightskyblue;
}
hr {
border: 0;
clear: both;
display: block;
width: 100%;
background-color: #212529;
height: 1px;
}
.block {
background-color: #fff;
padding: 30px;
margin-bottom: 30px;
}
.photo {
float: left;
height: 320px;
width: 320px;
margin: 0 20px 10px 0;
}
html {
position: relative;
min-height: 100%;
}
main {
margin: 80px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Jake's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="index.html" id="logo">
<h1>Jacob Beeson</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<section class="row">
<div class="col-md-12">
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
</article>
</div>
</section>
</main>
</body>
<footer>
</footer>
</html>
You'll need <div style="clear:both"></div> after <p>I am a ...</p>
Your article block should look like this:
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
<div style="clear:both"></div>
</article>
Also see this fiddle: https://jsfiddle.net/j8Lacshf/
Related
I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
I made this overflow hanger so that it would show some of the skills that I have. The only problem now is that the next property is showing up on it. I am looking for a way for the information to always be under the overflow I created.
body{
background-color: #FFF ;
font-family: 'Montserrat', sans-serif;
}
#contact-button{
border-radius: .1rem;
color: #FF5733 ;
border: solid .1rem;
background: #f8f9fa;
padding: .2rem;
margin-top: .5vh;
}
#contact-button:hover{
color: #FFF;
background-color: #FF5733;
border: solid .1rem #FF5733;
cursor: pointer;
}
.masthead {
height: 70vh;
min-height: 500px;
background-color: #FFF;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#about{
background-color: #FF5733;
color: #FFF;
}
#overflow-container {
width: auto;
height: 5rem;
background-color: #FF5733;
overflow: visible;
align-items: center;
}
#skills{
background-color: #FFF;
border: solid .01rem #dedede;
margin-left: auto 4rem;
margin-right: 4rem;
border-radius: 2rem;
}
ul{
list-style-type: none;
padding: 0 !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;1,300&display=swap" rel="stylesheet">
<link rel='icon' href='./img/cartoonme.png' type='image/x-icon' sizes="16x16" />
<title>Rafael Arias</title>
</head>
<body>
<nav id="nav" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="./img/logo.svg" width="150" height="30" alt="RA"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume">Resume</a>
</li>
<li class="nav-item">
<button id="contact-button" class="nav-link" href="#contact">Contact Me</Button>
</li>
</ul>
</div>
</nav>
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<img src="./img/cartoonme.png" width="300" height="300" alt="./img/ndisplay">
<br>
<h2>Welcome to my website!</h2>
</div>
</div>
</div>
</header>
<section id="about" class="py-5">
<div class="container py-5">
<h2 class="text-center">About Me</h2>
<p class="text-center">
Hello, my name is Rafael Arias. I am extremely passionate about my career path in Front-End Development. I am naturally curious, and always seek to challenge and grow my professional character.
I love to learn coding languages. I never hesitate to dig into unfamiliar territory; I identify any task that may be difficult as a challenge. I dedicate myself to advancing my professional well being and insuring functional results.
</p>
<p class="text-center">
Below you can see the set of skills that I believe will apply to my position as a front end engineer!
</p>
</div>
</section>
<section id="overflow-container">
<div id="skills" class="container py-5" >
<h2 class="text-center">Skills</h2>
<p class="text-center">Through many years of employment in different industries I have aquired many skills apart from the development skills I have aquired.</p>
<br>
<div class="container text-center">
<div class="row">
<div class="col-sm text-center">
<strong>Languages I Know</strong>
<ul class="text-center">
<li>React.js</li>
<li>CSS3</li>
<li>HTML5</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</div>
<div class="col-sm" class="align-items-center">
<strong>Framework/Libraries I Know</strong>
<div class="align-items-center">
<ul class="text-center">
<li>Bootstrap</li>
<li>Redux</li>
<li>Bulma</li>
<li>Jquery</li>
<li>Styled Components</li>
</ul>
</div>
</div>
<div class="col-sm">
<strong>Tools I use for design and development</strong>
<ul class="text-center">
<li>VS Code</li>
<li>Figma</li>
<li>Atom</li>
<li>Github</li>
<li>Hyper</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container py-5">
<h2>
hello
</h2>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I am understand that it is because I placed the overflow to go there but I am wondering what the solution would be for thi situation. Would it be some sort of css that I forgot to input or would it happen to be with HTML.
Thank you for the help!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>James McGill</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">J.M</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Hello there!</h1>
<h3>My name is James McGill and I'm a front-end web developer.</h3>
</div>
</section>
<div class="wrapper">
<h1>My skills</h1>
<br><br>
<h2>HTML</h2>
<div>90%</div>
<h2>CSS</h2>
<div>70%</div>
<h2>Javascript</h2>
<div>60%</div>
<h2>jQuery</h2>
<div>55%</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
}
body {
background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
background-size: cover; /*This makes the image cover the whole page space*/
background-position: center;
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.intro {
height: 100%;
width: 100%;
}
nav .navbar-nav li a {
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.navbar-brand {
color: white !important;
}
.content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}
Hey guys,
if you view my site on your browser you will see that as you scroll down the 'h1' which says "My skills" is located just before the start of the next page.
https://codepen.io/JamesMcGill/pen/KGNEWd On codepen it's even worse.
I am having a difficult time trying to figure out why this is happening.
Well, technically it is not on the same page. However, it does appear within the same background image as the contents on the main welcoming page.
Please, give me some suggestions on how I might be able to address this issue.
Thank you..
You applied the background-image to the body element, which will cause it to fill the screen. If you want it to only cover the first section, you should apply the background-image rule to that specific section.
It is doubling up at the bottom because background-repeat: repeat is the default and you have not declared an alternative. If you want if to fill the screen, you can add background-size: cover, or simply add background-repeat: no-repeat to prevent the doubling.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
I have been learning HTML/CSS/Bootstrap for around a week now and I'm just start a portfolio website as a sort of a test as to what I am able to do so far. Currently, I am having a problem creating the "about me" page responsive due to an image I have on that page.
Link to website is here http://moeminmamdouh.000webhostapp.com/aboutme.html
The desired outcome is to basically have everything centered, however, this is what shows up https://ibb.co/idEPVT
HERE IS THE CODEPEN LINK: https://codepen.io/muchkler/project/editor/AznjbN#
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Moemin Mamdouh</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Portfolio <span class="sr-only">(current)</span></li>
<li class="active">About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="images/rightprof.png" class="rightprof">
<div class="row">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing without a brand, and a brand requires a stable and responsive website. I will be providing designs in both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
<img src="images/behance.png" height="30px" width="30px" class="behance">
</div>
</div>
</body>
</html>
and this is the CSS code:
body{
background: url(images/tom-sini-710353-unsplash.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
.row{
color: white;
padding-top: 350px;
padding-left: 250px;
width: 900px;
}
.rightprof{
float: right;
padding-top: 250px;
padding-right: 250px;
}
.navbar-default{
background-color: #D91E18 !important;
border-style: none !important;
}
.navbar-brand{
color: white !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #CF000F !important;
}
#media only screen and (max-width: 992px){
.leftside{
padding: 300px;
}
}
#media only screen and (max-width: 992px){
.row{
text-align: center;
padding-right: 110px;
}
.rightprof{
}
}
#media only screen and (max-width: 1042px){
.row{
text-align: center;
}
#media only screen and (max-width: 768px){
.row{
font-size: 10px;
width: auto;
margin-right: 200px;
}
}
any help would be appreciated, thanks!
I suggest removing your about.css file. Learn the grid. Your code was missing '.container' around your '.row', and you were missing the column definition (.col-sm-8, .col-sm-4). Avoid adding CSS widths and floats to your images and content as it will blow up the responsive grid. Instead, add '.img-responsive' class to your images.
<!doctype html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body style="padding-top:70px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Moemin Mamdouh</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="portfolio.html">Portfolio
<span class="sr-only">(current)</span>
</a>
</li>
<li class="active">
About Me
</li>
<li>
Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing
without a brand, and a brand requires a stable and responsive website. I will be providing designs in
both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding
the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<a href="https://www.facebook.com/moemin.mamdouh.3">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
</a>
<a href="https://www.behance.net/Muchkler">
<img src="images/behance.png" height="30px" width="30px" class="behance"> </a>
</div>
</div>
<div class="col-sm-4">
<img src="images/rightprof.png" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I am trying to put my "Sanchez Designs......Ms Sanchez....and "Web Developer, Artist and Higher Education" buttons midway into the page, right about at the peak of the mountain. I have researched and tried but am unable to move it. I thought padding-top would do the trick but nope. Any suggestions?
Also, I'm learning web development so please be gentle. Thanks!
body {
background-image: url('images/background3.jpeg');
width: 100%;
height: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: 'Lato', sans-serif;
color: white;
}
#media only screen and (max-width: 767px) {
body {
background-image: url('images/background3.jpeg');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
</style>
<title>Sanchez</title>
</head>
<body>
<!--NAVBAR-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">Andrea Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_artist.html">Artist</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Sanchez_bootstrap_highered.html">Higher Education</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="content">
<h1> Sanchez Designs</h1>
<h5> Ms. Sanchez is an aspiring Web Developer</h5>
<hr>
<ul class="list-inline intro-social-buttons">
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_about.html" class="btn btn-dark btn-lg">
<span class="network-name">Web Developer</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_artist.html" class="btn btn-dark btn-lg">
<span class="network-name">Artist</span></a>
</li>
<li class="list-inline-item">
<a href="Sanchez_Bootstrap_highered.html" class="btn btn-dark btn-lg">
<span class="network-name">Higher Education</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
IF you want padding top try
padding-top : 20px!important
if you want div test in center why you try padding top or bottom . you can use a extra div and give style display: flex; align-items: center;
.banner {
height: 80vh;
align-items: center;
vertical-align: middle;
display: flex;
}
like : https://www.w3schools.com/code/tryit.asp?filename=FNBF6UP5MV4S
There are a lot of way to add padding or margin here.
You can add padding-top to your .col-lg-12 if your content and navbar have 2 different container by simply add another class and add padding to it.
HTML
<div class="col-lg-12 text-center padding-content">
<div id="content">
...
CSS
.padding-content {
padding-top: 30px;
}
Demo: https://www.bootply.com/jpU6nmgw8z
Or you can add margin to your navbar
CSS
.navbar {
margin-bottom: 30px;
}
Demo: https://www.bootply.com/k6vGFbX5XC
Did you try adding margin-top to say, the "content" div?
#content {
margin-top: 5%;
}
Codepen link: https://codepen.io/anon/pen/zpRQVL