I am trying to build a simple webpage using Bootstrap and D3, but I do not know how to get rid of all the whitespace at the bottom. I would like to get rid of it.
I have tried setting the min-height of the body and html to 100%, but it hasn't done anything. My code is here: https://github.com/eelegiap/thesis-code/tree/main/search
body {
padding-left: 3vh;
padding-top: 3vh;
padding-bottom: 20px;
}
#searchCol {
padding-left: 6vh
}
form {
width: 25%
}
#results {
padding-right: 10vh;
}
#resultsContainer {
max-height: 30%;
overflow-y: auto
}
.result {
padding-left: 4vh;
}
.poemResult {
cursor: pointer;
border-radius: 10px;
padding-left: 10px;
padding-top: 5px;
}
#poemContainer {
max-height: 30%;
overflow-y: auto;
}
#poemMeta {
padding-top: 10vh;
padding-left: 15vh;
padding-bottom: 5vh
}
#poemTxt {
padding-left: 15vh;
padding-bottom: 10vh;
}
.input-group {
max-width: 75%;
padding-bottom: 5vh
}
/* Tooltip text */
.titleTooltip .tooltiptext {
visibility: hidden;
position: absolute;
text-align: left;
width: fit-content;
height: fit-content;
padding: 2px;
padding-right: 15px;
font: 12px sans-serif;
background: #e5ffff;
border: 1px solid gray;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.titleTooltip:hover .tooltiptext {
visibility: visible;
}
.token mark {
display: contents;
}
input,
.dropdown-toggle {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchBar {
min-height: 50px
}
#search {
background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />
<body>
<div class="container">
<br>
<div class="row">
<h2>Contemporary Russian Internet Poetry</h2>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row" id="poemContainer">
<div id="poemMeta"></div>
<div id="poemTxt"></div>
</div>
</div>
<div class="col-sm-6" id="searchCol">
<div class="row">
<div class="input-group">
<div class="form-outline flex-fill searchBar">
<input type="search" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Search by keyword(s)</label>
</div>
<button type="button" id='search' class="btn searchBar">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row" id="resultsContainer">
<div id="results"></div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->
<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>
You are using padding-bottom: 20px; in your body. It created the bottom padding or some spaces in the down side of your websites.
You have to remove it.
To be honest, idk why this works, but I changed the max-height variables to pixel heights instead, and this fixed the trailing whitespace problem.
I am making an news blog. I have created my main article cards. The cards have an image to the left of the card, and with the card having the main content like the title, brief description, author and date.
Everything works when the browser is maximized (I'm on a 13 inch laptop). As I start resizing my browser and making it smaller, everything starts to kind of break. The image does not take up the full width, and has a lot of white space to the right of it.
I tried giving the image width of 100%, but it does not seem to fix the problem. I am not sure what is wrong and why this is happening. This is only happening to these article cards. Everything else on the homepage works correctly even on smaller sized screens.
If you have some time, can you explain what is happening, and how to solve this problem? Please and thank you.
Screenshots:
Large+ Screens
As I start resizing the browser window and making it smaller it does this:
And finally the phone sized screens:
HTML
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
For give the messy CSS I could definitely clean it up a little bit.
Here, the image will resized to 100% width at 640px media width. I think it is better when you could change the image size to something bigger (as per 100% width point) to get maximum picture clarity.
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title {
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a {
color: black;
font-weight: 600;
}
.card-article .card-description {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
.article-tag.games {
position: absolute;
left: 10px;
top: 10px;
background: red;
padding: 2px 5px;
color: white;
border-radius: 4px;
}
.col-auto img {
max-width:200px;
}
#media (max-width: 640px) {
.col-auto {
width:100%;
max-width:100% !important;
}
.col-auto img {
width:100%;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/640x640"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
What's happening is your image is exactly 200x200px, so it can't stretch when your page changes shape. You could find a different image (I don't recommend this - just putting it out there), or you could try adding a media query for another stylesheet on variable width devices, then resetting the height/width on those.
Use col-md-4 to image wrap div instead col-auto (see fidlle:https://jsfiddle.net/yemd0qnt/3/)
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-md-4">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can 100% image width with use Media Queries for mobile.
#media (max-width: 575px) {
.img-fluid{width:100%;}
}
Hello I am trying to develop an alternating two column grid layout with bootstrap, where there would be one image on the lefthand size of the screen, then reverse down the web page until the end user reaches the footer.
I would thought to achieve this using the div row col order and going by using the floats, it has worked for the first row but when it came to developing the secondary row it did not help. I do not know if it is the floats that throwing it out of whack of I literally have to much going on in my code in general. Can someone review for me please? The blank divs are the image's as well.
/* CSS Document */
/* FONT FAMILY */
body{
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Montserrat', Gotham, Helvetica Neue, Helvetica, Arial, "sans-serif";
font-weight: 200;
letter-spacing: 0.65px;
line-height: 25px;
text-align: center;
color: white;
}
.lead {
text-transform: uppercase;
}
h2 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 1.275px;
font-size: 30px;
color: #cf6766;
}
h3 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 0.1em;
font-size: 21px;
color: #cf6766;
}
/**************** NAVIGATION STYLING ****************/
.navbar,.navbar-default {
background-color: #30415d;
padding: 20px;
color: white;
margin: 0 auto;
}
.navbar.navbar-default li a {
color: white;
text-align: center;
margin: 0 auto;
}
.navbar.navbar-default li a:hover{
background-color: white;
color: #031424;
font-weight: bold;
}
.navbar.navbar-default li {
font-weight: 300;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
}
.navbar-brand img {
width: 85%;
}
.navbar-brand a {
padding: 20px;
margin-top: -40px;
}
a.navbar-brand {
margin-top: -20px;
padding-right: 20px;
padding-left: 20px;
width: 85%;
}
.navbar-default {
border: none;
}
/*img.wrap {
float:right;
}*/
/**************HOME PAGE **********/
/* blockquote {
background-color: #8eaebd;
color: white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 36px;
margin-bottom: 50px;
font-style: italic;
font-weight: 400;
} */
.quote {
font-size: 16px;
text-align: right;
font-weight: 300;
letter-spacing: 2px;
}
.jumbotron {
background:linear-gradient(#cf6766, transparent 100%),
url(../img/DSC00154.jpg) no-repeat center;
background-size: cover;
height: 768px;
margin-top: 0px;
padding-top: 0px;
display: table;
width: 100%;
}
.jumbotron h1 {
color: white;
text-align: center;
}
#jumbotron-inner {
display: table-cell;
vertical-align: middle;
}
#jumbotron-inner p {
text-align: center;
}
.senior {
background-color: #30415d;
width: 50%;
height: 500px;
color:white;
padding: 50px;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: left;
}
.get-involved {
background-color: #8eaebd;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: right;
}
.get-inolved-img {
background-image: url(../img/grandmother-child.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 500px;
float: left;
}
.newMentor{
background: url(../img/grandparents.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width:1000px 100%;
height:500px;
float: right;
}
.dontations {
background-color: #30415d;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
}
.btn-lg {
background-color: #cf6766;
}
.btn-lg {
color: white;
font-weight:200;
}
.btn-lg a:hover {
color: #8eaebd;
}
/**************about PAGE **********/
#williams {
width: 40%;
height: 50%;
margin-right: 25px;
margin-bottom: 5px;
}
#goals {
background-color: pink;
padding: 20px;
}
#youth {
background-image: url(../img/youth-2.jpg);
background-repeat:no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 1000px;
}
#mentor {
background-image: url(../img/youth-1.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
#mentor h1 {
color: rgba(0, 44, 44, 1);
}
#textarea {
display: block;
}
textarea {
display: block;
}
#community {
background-image: url(../img/youth-3.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
/***************************** FOOTER *****************************/
.copy {
color: #cf6766;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Mentoring - 50- Home </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#defaultNavbar1"><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="https://www.newmentoring.com"><img src="img/logo.png" class="img-responsive"></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav pull-right">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li> About</li>
<li>Saving the Youth</li>
<li> Mentoring Tips</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onClick="location.href='community.html'">Community <span class="caret"></span></a>
<!-- DropDown Menu Here -->
<ul class="dropdown-menu" role="menu">
<li> Stories of Wisdom</li>
<li> Guest Book</li>
<li>Donate</li>
</ul><!--community dropdown menu-->
</li><!-- end of comunnity dropdown li & ul -->
<li> Contact</li>
</ul> <!-- end of navbar left -->
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav> <!-- END OF FULL NAVIGATION BAR -->
<div class="jumbotron">
<div class="container" id="jumbotron-inner">
<h1>New Mentoring.com</h1>
<p class="lead">Where our youth gain wisdom and leadership.</p>
<p><a class="btn btn-primary btn-lg" href="#newSenior" role="button">Learn more</a></p>
</div><!-- end of container & jumbtron inner -->
</div><!--jumbotron-->
<!-- BLOCKQUOTE-->
<blockquote>
<p>"Let your age make the difference in your community."</p>
<span class="pull-right quote">- Delece Williams</span>
</blockquote>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 senior">
<h2>What is a New Mentoring?</h2>
<p>The Middle Aged Generation that's considered to be between 30 to 80 whose living healthier, while inspiring youth to engage in healthier life-style choices and those helping to bridge the gap between the traditional values of seniors and the technical appetites of today's youth with wisdom keys. </p>
</div>
<div class="col-sm-6 newMentor">
</div><!-- img div-->
</div><!--row-->
<div class="row">
<div class="col-sm-6 get-involved">
<h2>How to Get Involved?</h2>
<p>We would love for you to get involved and its simple. Just be willing to share your time and /or stories, experience, wisdom and expertise to a young person to help them make better and healthier lifestyle choices for the success of a better path throughout life. You can do that by joining our online conversations or hosting a community forum near you.</p>
</div>
<div class="col-sm-6 get-inolved-img">
</div><!-- background img-->
</div><!--row-->
<!--col-md-12->
</div>
<hr>
<div class="row">
<div class="text-justify col-sm-6">
<h3>Stories of Wisdom</h3>
Share words of wisdom on how you break barriers to get young people to listen. Connect with our online family and help us to inspire others here. </div>
<div class="text-justify col-sm-6">
<h3>Guest Book</h3>
Thank you for visiting I Am The New 50 Campaign. Stop by and sign our guest book and be a part of our community. Tell us how we’ve inspired you to help youth here. </div>
</div><!-- end of row div-->
<div class="col-md-6 dontations">
<h2>Dontations for Kidz Korna</h2>
<p>Women &s; Men T-Shirts are Available for Campaign Fundraising Initiatives</p>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
<p>Price:$20.00 <br>
<br>
<a class="btn btn-lg" href="https://kidzkorna.com/" role="button">Click here to order now</a> </p>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p class="copy">Copyright © 2017 · All Rights Reserved · <a href="http://newmentoring.com/" >New Mentoring</a> · Chicago, IL.</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I think you're describing a layout where it's like a checkerboard style. If so you can use offsets on every second div and clear the divs.
http://www.bootply.com/IMtdYhv7bs
HTML:
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
CSS:
.col-md-6 {background-color:red; height:100px; clear:both;}
I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}
This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.
Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.
I am working on a page in Drupal 7 in which I have a number of boxes with text and a photo inside of them. I have the entire box div linking to its content page, but I can't seem to get rid of the underline.
I have tried applying text-decoration: none; to every class inside of and outside of the box and the text inside the box is still underlined.
Even when I use developer tools/'inspect element' tool in Google it shows that the computed style for the box and the text within is text-decoration: none;
I have been trying to figure this out off and on for about a day now and I have not been able to find any solutions via Google.
Any ideas?
Thanks in advance.
Edit: I am working to post my code. I am trying to find a good solution for posting because it is a page within Drupal that is rendering through Views. Also, I have a job interview in an hour that I'm getting ready for. I probably should have waited until after the interview to post this issue.. oh well.
Edit x2: My HTML is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
<title>Portfolio Page | mywebsite.com</title>
<style type="text/css" media="all">#import url("http://url.com/modules/system/system.base.css?m178g6");
#import url("http://url.com/modules/system/system.menus.css?m178g6");
#import url("http://url.com/modules/system/system.messages.css?m178g6");
#import url("http://url.com/modules/system/system.theme.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/misc/ui/jquery.ui.core.css?m178g6");
#import url("http://url.com/misc/ui/jquery.ui.theme.css?m178g6");
#import url("http://url.com/modules/overlay/overlay-parent.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/modules/comment/comment.css?m178g6");
#import url("http://url.com/modules/field/theme/field.css?m178g6");
#import url("http://url.com/modules/node/node.css?m178g6");
#import url("http://url.com/modules/search/search.css?m178g6");
#import url("http://url.com/modules/user/user.css?m178g6");
#import url("http://url.com/sites/all/modules/views/css/views.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/sites/all/modules/ctools/css/ctools.css?m178g6");
#import url("http://url.com/sites/all/modules/lightbox2/css/lightbox.css?m178g6");
#import url("http://url.com/sites/all/modules/views_slideshow/views_slideshow.css?m178g6");
#import url("http://url.com/modules/shortcut/shortcut.css?m178g6");
#import url("http://url.com/modules/toolbar/toolbar.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/sites/all/themes/personal/css/style.css?m178g6");</style>
<style type="text/css" media="print">#import url("http://url.com/sites/all/themes/personal/css/print.css?m178g6");</style>
<style type="text/css" media="mobile">#import url("http://url.com/sites/all/themes/personal/css/mobile.css?m178g6");</style>
<script type="text/javascript" src="http://url.com/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://url.com/misc/drupal.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views/js/views-contextual.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.ba-bbq.js?v=1.2.1"></script>
<script type="text/javascript" src="http://url.com/modules/overlay/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.cookie.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/lightbox2/js/lightbox.js?1332273397"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views_slideshow/js/views_slideshow.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/modules/toolbar/toolbar.js?m178g6"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"personal","theme_token":"0CkOwyp1neNP-2IbE8LYCgYGBJ9sz39ORy5DodizAGg","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"sites\/all\/modules\/views\/js\/views-contextual.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"misc\/jquery.cookie.js":1,"sites\/all\/modules\/lightbox2\/js\/lightbox.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"modules\/toolbar\/toolbar.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/lightbox2\/css\/lightbox.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/personal\/css\/style.css":1,"sites\/all\/themes\/personal\/css\/print.css":1,"sites\/all\/themes\/personal\/css\/mobile.css":1}},"lightbox2":{"rtl":0,"file_path":"\/(\\w\\w\/)public:\/","default_image":"\/sites\/all\/modules\/lightbox2\/images\/brokenimage.jpg","border_size":10,"font_color":"000","box_color":"fff","top_position":"","overlay_opacity":"0.8","overlay_color":"000","disable_close_click":true,"resize_sequence":0,"resize_speed":400,"fade_in_speed":400,"slide_down_speed":600,"use_alt_layout":false,"disable_resize":false,"disable_zoom":false,"force_show_nav":false,"show_caption":true,"loop_items":false,"node_link_text":"View Image Details","node_link_target":false,"image_count":"Image !current of !total","video_count":"Video !current of !total","page_count":"Page !current of !total","lite_press_x_close":"press \u003Ca href=\u0022#\u0022 onclick=\u0022hideLightbox(); return FALSE;\u0022\u003E\u003Ckbd\u003Ex\u003C\/kbd\u003E\u003C\/a\u003E to close","download_link_text":"Download Original","enable_login":false,"enable_contact":false,"keys_close":"c x 27","keys_previous":"p 37","keys_next":"n 39","keys_zoom":"z","keys_play_pause":"32","display_image_size":"","image_node_sizes":"()","trigger_lightbox_classes":"","trigger_lightbox_group_classes":"","trigger_slideshow_classes":"","trigger_lightframe_classes":"","trigger_lightframe_group_classes":"","custom_class_handler":0,"custom_trigger_classes":"","disable_for_gallery_lists":true,"disable_for_acidfree_gallery_lists":true,"enable_acidfree_videos":true,"slideshow_interval":5000,"slideshow_automatic_start":true,"slideshow_automatic_exit":true,"show_play_pause":true,"pause_on_next_click":false,"pause_on_previous_click":true,"loop_slides":false,"iframe_width":600,"iframe_height":400,"iframe_border":1,"enable_video":false},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
</head>
<body class="html not-front logged-in no-sidebars page-portfolio toolbar toolbar-drawer lightbox-processed" style="padding-top: 65px; ">
<div id="skip-link">
Skip to main content
</div>
<div id="overlay-disable-message" class="clearfix"><h3 class="element-invisible">Options for the administrative overlay</h3>If you have problems accessing administrative pages on this site, disable the overlay on your profile page. Dismiss this message.</div><div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
<div class="toolbar-menu clearfix">
<ul id="toolbar-home"><li class="home first last"><span class="home-link">Home</span></li>
</ul> <ul id="toolbar-user"><li class="account first">Hello <strong>user</strong></li>
<li class="logout last">Log out</li>
</ul> <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-11 path-admin-dashboard first"><span class="icon"></span>Dashboard <span class="element-invisible">(View and customize your dashboard.)</span></li>
<li class="menu-9 path-admin-content"><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></li>
<li class="menu-21 path-admin-structure"><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></li>
<li class="menu-7 path-admin-appearance"><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></li>
<li class="menu-18 path-admin-people"><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></li>
<li class="menu-16 path-admin-modules"><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></li>
<li class="menu-8 path-admin-config"><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></li>
<li class="menu-19 path-admin-reports"><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></li>
<li class="menu-12 path-admin-help last"><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></li>
</ul> Hide shortcuts </div>
<div class="toolbar-drawer clearfix">
<div class="toolbar-shortcuts"><ul class="menu"><li class="first leaf">Add content</li>
<li class="leaf">Find content</li>
<li class="leaf">Performance</li>
<li class="last leaf">Maintenance mode</li>
</ul></div>Edit shortcuts </div>
</div>
<!-- If front page, present front page content -->
<div id="a">
<!-- Begin other page specific content -->
<div id="smallhead">
</div>
</div><!-- End div a-->
<!-- Begin menu -->
<div id="b">
<div id="menu">
<div class="item">Home</div>
<div class="item">About Me</div>
<div class="item">Portfolio</div>
<div class="item">Photos</div>
<div class="item">Projects</div>
<div class="item">Blog</div>
</div>
</div>
<div id="c">
<div id="middle">
<!-- Begin other page specific content -->
<div id="contentwrapper">
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<div class="view view-portfolio-page view-id-portfolio_page view-display-id-page view-dom-id-a0c892fe2818834f0a7750c98e7e6688">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div> <div><a href="/node/10">
<div class="smallbox">
<div class="nounderline">
<strong>Postcards</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Postcards<br>
Adobe Illustrator
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-2 views-row-even">
<div> <div><a href="/node/9">
<div class="smallbox">
<div class="nounderline">
<strong>Design</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Desiugn<br>
Adobe Illustrator
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-3 views-row-odd">
<div> <div><a href="/node/8">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt="screenshot"><br>
Awareness Campaign<br>
HTML, CSS
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-4 views-row-even views-row-last">
<div> <div><a href="/node/7">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Details Website<br>
HTML 5, CSS 3
</div>
</div></a></div> </div> </div>
</div>
</div> </div>
</div>
</div>
</div>
<!-- End other page specific content -->
</div><!--end middle-->
</div>
<div id="d">
<div id="footer">
;Contact Form
<br>
Copyright ©2012 My Name
</div>
</div>
<div id="lightbox2-overlay" style="display: none; "></div> <div id="lightbox" style="display: none;" class="lightbox2-orig-layout"> <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><div id="modalContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="frameContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="imageContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><img id="lightboxImage" alt=""><div id="hoverNav"><a id="prevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="nextLink" title="Next" href="#" style="padding-top: 10px; "></a></div></div><div id="loading"></div></div> <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "> <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; "></a></div><a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div> </div> </div></body></html>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
body{
background: black;
font-size: 14px;
margin: 0;
}
a:visited{
color: blue;
}
h2{
font-size: 135%;
margin: .2em 0;
}
#a{
width: 100%;
background: rgb(140,79,84);
}
#bighead{
height: 31em;
width: 69em;
margin: 0 auto;
padding-top: 2em;
background: url(../img/headerpic.jpg);
text-align: center;
border: 0 solid black;
border-width: 0 4px;
}
#header a{
font-size: 35px;
text-decoration: none;
color: black;
}
#slogan{
font-size: 18px;
padding: .5em;
}
#smallhead{
height: 14em;
width: 69em;
margin: 0 auto;
background: url(../img/smallheader.jpg);
text-align: center;
border: 0 solid black;
border-width: 0 4px;
}
#b{
width: 100%;
background: rgb(50,51,46);
}
#menu{
width: 69em;
height: 2.5em;
border: 0 solid black;
border-width: 0 4px;
background: black;
text-align: center;
margin: 0 auto;
}
.item{
font-size: 17.5px;
height: 1.1em;
width: 9.2em;
float: left;
padding: .3em 0;
border-top: .2em solid rgb(31,38,28);
border-bottom: .2em solid rgb(31,38,28);
}
#menu a:link, a:visited{
text-decoration: none;
color: #CCC;
}
#menu a:hover{
color: white;
background: white;
text-decoration: underline;
}
#c{
width: 100%;
background: rgb(139,124,108);
}
#middle{
min-height: 22.5em;
width: 67.6em;
margin: 0 auto;
border: 0 solid black;
border-width: 0 4px;
background: rgb(98,103,109);
padding: .75em;
text-decoration: none;
}
.title{
font-size: 2em;
height: .5em;
width: 24em;
padding-left: 1em;
padding-bottom: .25em;
color: white;
}
.box{
float: left;
height: 17em;
width: 17em;
padding: 1em;
padding-top: .5em;
margin: 1.5em;
background: rgb(49,49,51);
color: white;
}
#contentwrapper{
}
#d{
width: 100%;
background: black;
}
#footer{
height: 2.5em;
width: 69em;
margin: 0 auto;
background: black;
text-align: center;
color: white;
}
.smallbox{
float: left;
height: 15em;
width: 17em;
padding: 1em;
padding-top: .5em;
margin: 1.5em;
background: rgb(49,49,51);
color: white;
text-align: center;
text-decoration: none;
}
.smallbox img{
padding: .2em 0;
}
.nounderline{
text-decoration: none;
}
Since this was the first google result and didn't solve my issue: Check the anchor states, as it might need to be set in one of the others. (https://www.w3schools.com/css/css_pseudo_classes.asp)
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}
To apply just to this view add:
.view-portfolio-page .views-row a { text-decoration: none; }
To apply to all views add:
.views-row a { text-decoration: none; }
http://jsfiddle.net/D8kRE/
You were applying text-decoration: none to a div which has no effect. You can only apply that to an anchor tag which in your case is located at .views-row a. You can get more specific and apply this to only the portfolio page view by using the code I've put above.
If you are refering to the underline on the text, remember to set the text-decoration property to none on the ELEMENT. E.g.
<html>
<head></head>
<body>
<div>
Google
</div>
</body>
Edit: Note, it is bad to use styling in-line with elements, I used it, just to demonstrate a solution.
Instead of font-decoration: none; try the css text-decoration: none;
As this hasn't actually got a definitive answer yet and it's fairly high up on Google searches. I thought I would chip in with my answer.
I just had a similar problem where I couldn't pinpoint why I wasn't able to get rid of the underline and found out that it was because I didn't specify the hover state.
So try out
#header a:hover {
text-decoration: none;
}
And that should work. I know this was posted ages ago, but I have seen that you haven't accepted an answer and didn't post whether you sorted it or not. So hopefully my input will help someone along the way and hopefully you can see this and finally accept an answer or make your own.
I know this is old, but this came upon my search as well. So I thought I'd share.
I had a similar problem. I created a regular nav and setting the text-decoration to none worked fine.
Then I had to amend my css to create a hamburger menu effect for smaller viewports. And although I used the exact same css, the underline appeared and nothing I did would make it go away. I know it has something to do with the toggle:checked & ~.mainNav feature under which my nav needed to be placed, but I couldn't figure out why and how to get around it.
In any case, the one thing that DID work was going into my reset, and adding a default: a {text-decoration: none}
Don't know why it worked, but it did. Hope this helps someone.
I ran into this problem and found it was "box-shadow." See if you are lucky enough with these styles:
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
This doesn't appear to be a text-decoration: issue. It actually appears to be an issue with border-bottom:
Please check the instance of border-bottom in:
.item{
font-size: 17.5px;
height: 1.1em;
width: 9.2em;
float: left;
padding: .3em 0;
border-top: .2em solid rgb(31,38,28);
border-bottom: .2em solid rgb(31,38,28);
}
try to add !important
text-decoration: none !important;
text-decoration works on anchor, it's correct name would be: anchor-decoration-for-text.