I have 2 navbar which is Top Bar and Menu, The menu is responsive but Top Bar not. How I make a responsive top bar (icon and image)?
<div class="header widget-style1 clearfix">
<div class="container">
<div class="header-wrap clearfix">
<div class="row">
<div class="col-lg-4" style="float: right;">
<div id="" class="">
<a href="/" rel="home">
<img src="{{asset('images/logojipp34.jpg')}}" alt="image">
</a>
</div>
<!-- /. -->
</div>
<div class="col-lg-8">
<div class="page" style="margin-top: 50px">
<div class="row">
<div class="col-md-4 text-right">
<i class="fa fa-instagram fa-2x" style="color: #9D2629"></i>
</div>
<div class="col-md-4 text-right">
<i class="fa fa-facebook-f fa-2x" style="color: #9D2629"></i>
</div>
<div class="col-md-4 text-right">
<i class="fa fa-twitter fa-2x" style="color: #9D2629"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.header-wrap -->
</div>
how I make responsive design with that?
why dont you add something like
body {margin:0;}
.topbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="topbar">
Home
News
FAQ
</body>
</html>
Related
I'm making a design of information cards for a website but when viewing it on a mobile device, some cards look bigger than others. How could I solve it?
At the beginning of the code, there is the CSS, then the html code
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row h1 {
width: 100%;
text-align: center;
font-size: 3.75em;
margin: 0.6em 0;
font-weight: 600;
color: #c49d12;
}
.column {
padding: 1em;
}
.card {
padding: 3.1em 1.25em;
text-align: center;
background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
border-radius: 0.5em;
transition: 0.5s;
cursor: pointer;
}
.card .icon {
font-size: 2.5em;
height: 2em;
width: 2em;
margin: auto;
background-color: #c49d12;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
}
.icon:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
border: 0.12em solid #5d4b0b;
border-radius: 50%;
transition: 0.5s;
}
.card h3 {
font-size: 1.3em;
margin: 1em 0 1.4em 0;
font-weight: 600;
letter-spacing: 0.3px;
color: #cda928;
}
.card p {
line-height: 2em;
color: #625a71;
}
.card:hover {
background-position: 0;
}
.card:hover .icon:before {
height: 2.25em;
width: 2.25em;
}
#media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
#media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 2em;
}
.column {
flex: 0 0 50%;
max-width: 50%;
padding: 0 1em;
}
}
</style>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<section>
<div class="row">
<h1>Características</h1>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Capacidad</h3>
<p>
De 500 hasta 1,000 personas.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-couch"></i>
</div>
<h3>Mobiliario</h3>
<p>
Mobiliario incluido.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h3>Bebidas</h3>
<p>
Refrescos y café
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill-wave-alt"></i>
</div>
<h3>Apartado</h3>
<p>
Apartado con $15,000.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Mantelería</h3>
<p>
Mantelería, cubertería y vajilla.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Alcohol</h3>
<p>
Descorche libre.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill"></i>
</div>
<h3>Liquidación</h3>
<p>
Liquidar 20 días antes del evento
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Iluminación</h3>
<p>
Videos musicales,iluminación y robótica.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
<h3>Personal</h3>
<p>
Mesero, personal y maestro de ceremonias.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-comments-dollar"></i>
</div>
<h3>Mensualidades.</h3>
<p>
Manejamos los mejores precios a mensualidades.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fab fa-black-tie"></i>
</div>
<h3>Entretenimiento</h3>
<p>
DJ y batucada.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-fan"></i>
</div>
<h3>Florería</h3>
<p>
Centro de flores
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-clock"></i>
</div>
<h3>Servicio.</h3>
<p>
Servicio hasta por 5hrs.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-cloud-meatball"></i>
</div>
<h3>Menú</h3>
<p>
Menú a 3 tiempos
</p>
</div>
</div>
</div>
</section>
I tried to edit certain values of the media query but I don't see any significant change.
Card 'Entretenimiento' has the widest title (h3) making its card the widest in the bunch. Actually its .columns container is stretched wider than the other ones. As does card 'Mensualidades.'.
I added the following code to your CSS:
.column {
flex: 1; /* allow to fill parent width */
min-width: min(15.25rem, 100%); /* at least 15.25rem, 100% when less space available*/
}
.card { height: 100% } /* Stretch to fill parent height */
Changed h3 temporary to width: max-content to find widest h3 with DevTools.
Minimum card width = 15.25rem = (~172px of widest h3) plus (2 x 1.25em card padding) plus (2 x 1rem column padding) = (172px + 40px + 32px) / 16 = 15.25rem.
You don't change the h3 { font-size: 1.3em } anywhere for either mobile/desktop, which means that the above 15.25rem is the minimum required space for a card to keep all cards equally sized on all devices.
Depending on the number of cards in a single row you want on a device, you will have to fiddle with the h3 font size per device type and modify the above 15.25rem to your requirements.
snippet
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row h1 {
width: 100%; width: 100%;
text-align: center;
font-size: 3.75em;
margin: 0.6em 0;
font-weight: 600;
color: #c49d12;
}
/* ADDED */
.column {
flex: 1; /* allow to fill parent width */
min-width: min(15.25rem, 100%); /* at least 17rem, 100% when less space available*/
}
.card { height: 100% } /* Stretch to fill parent height */
/**/
.column {
padding: 1em;
}
.card {
padding: 3.1em 1.25em;
text-align: center;
background: linear-gradient(0deg, #c49d12 10px, transparent 10px);
background-repeat: no-repeat;
background-position: 0 0.62em;
box-shadow: 0 0 2.5em rgba(139, 118, 32, 0.15);
border-radius: 0.5em;
transition: 0.5s;
cursor: pointer;
}
.card .icon {
font-size: 2.5em;
height: 2em;
width: 2em;
margin: auto;
background-color: #c49d12;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
}
.icon:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
border: 0.12em solid #5d4b0b;
border-radius: 50%;
transition: 0.5s;
}
.card h3 {
font-size: 1.3em;
margin: 1em 0 1.4em 0;
font-weight: 600;
letter-spacing: 0.3px;
color: #cda928;
}
.card p {
line-height: 2em;
color: #625a71;
}
.card:hover {
background-position: 0;
}
.card:hover .icon:before {
height: 2.25em;
width: 2.25em;
}
#media screen and (min-width: 768px) {
section {
padding: 1em 7em;
}
}
#media screen and (min-width: 992px) {
section {
padding: 1em;
}
.card {
padding: 5em 2em;
}
.column {
flex: 1 1 50%;
max-width: 50%;
padding: 0 1em;
}
}
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<section>
<div class="row">
<h1>Características</h1>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Capacidad</h3>
<p>
De 500 hasta 1,000 personas.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-couch"></i>
</div>
<h3>Mobiliario</h3>
<p>
Mobiliario incluido.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h3>Bebidas</h3>
<p>
Refrescos y café
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill-wave-alt"></i>
</div>
<h3>Apartado</h3>
<p>
Apartado con $15,000.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Mantelería</h3>
<p>
Mantelería, cubertería y vajilla.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-wine-bottle"></i>
</div>
<h3>Alcohol</h3>
<p>
Descorche libre.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-money-bill"></i>
</div>
<h3>Liquidación</h3>
<p>
Liquidar 20 días antes del evento
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Iluminación</h3>
<p>
Videos musicales,iluminación y robótica.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
<h3>Personal</h3>
<p>
Mesero, personal y maestro de ceremonias.
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-comments-dollar"></i>
</div>
<h3>Mensualidades.</h3>
<p>
Manejamos los mejores precios a mensualidades.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fab fa-black-tie"></i>
</div>
<h3>Entretenimiento</h3>
<p>
DJ y batucada.
</p>
</div>
</div>
<!-- Column Three -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-fan"></i>
</div>
<h3>Florería</h3>
<p>
Centro de flores
</p>
</div>
</div>
</div>
<div class="row">
<!-- Column One -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-user-clock"></i>
</div>
<h3>Servicio.</h3>
<p>
Servicio hasta por 5hrs.
</p>
</div>
</div>
<!-- Column Two -->
<div class="column">
<div class="card">
<div class="icon">
<i class="fas fa-cloud-meatball"></i>
</div>
<h3>Menú</h3>
<p>
Menú a 3 tiempos
</p>
</div>
</div>
</div>
</section>
In such scenarios, you have have also define a min-height, max-height or min-width, max-width depending upon the dimension that you're trying to control. Because the content is dynamic & the same goes for any images you might have in the content. Try it via using above styles, you'll get what you need.
I made 3 columns with the bootstrap framework. In the second column there is a div with some text. I would like to move that div to the top left corner of the document (not on the top left corner of the parent).
I cannot just add a div above the columns or add jquery or javascript because I am using other software. It is very stricted and I can only add custom CSS to it.
An example. The purple div should be on the space of the left arrow:
I tried position absolute but with no success.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4"><h3>Title 1 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavender;"><h3>Title 3 - col-sm-4</h3></div>
</div>
</div>
</body>
</html>
.section-topleft{
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
I also do not want position: fixed. I am really curious if this is even possible. If it's not possible it's also fine.
In the real example it does not work yet
Here you can see the css of the div with class "test". The div that should be placed on the top left corner
So here is the code of the HTML from the 3rd row (relevant html):
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
<!-- Nav (Logged in) -->
<div class="main-logo">
<a href="https://google.com">
<img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/df60389c3caec18e6d856beca7c8_logo_black.png">
</a>
</div>
<div class="navi-left">
<ul>
<li class="active">
<a href="/affiliate">
<span id="affiliate-nav-homepage"><span class="default">Home Page</span></span>
</a>
</li>
<li>
<a href="/affiliate/content">
<span id="affiliate-nav-marketing-materials"><span class="default">Marketing Materials</span></span>
</a>
</li>
<li>
<a href="/affiliate/analytics">
<span id="affiliate-nav-analytics"><span class="default">Analytics</span></span>
</a>
</li>
<li>
<a href="/affiliate/invite">
<span id="affiliate-nav-invite-others"><span class="default">Invite Others</span></span>
</a>
</li>
<li>
<a href="/affiliate/children">
<span id="affiliate-nav-your-network"><span class="default">Your Network</span></span>
</a>
</li>
<li>
<a href="/affiliate/subids">
<span id="affiliate-nav-sub-ids"><span class="default">SubIDs/Channels</span></span>
</a>
</li>
<li>
<a href="/affiliate/landing_pages">
<span id="affiliate-nav-landing-pages"><span class="default">Landing Pages</span></span>
</a>
</li>
<li>
<a href="/affiliate/commission_details">
<span id="affiliate-nav-commission-details"><span class="default">Commissions</span></span>
</a>
</li>
</ul>
<ul class="navi-mobile-lower">
<li>
<i>
<hr>
</i>
</li>
<li>
Create Password
</li>
<li>
Update Account Email
</li>
<li>
Update Paypal Email
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="main-content">
<!-- header -->
<div class="custom-header">
<div class="default-title" id="default-title">
<figure><img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/374c2ace96edb5866ba9e7aa079bbc202232c4e8_Brand%20advocates%20banner%20%283%29.png" data-image="foo"></figure>
</div>
</div>
<div>
<div class="v2-alerts">
</div>
<div class="row">
<div class="col-md-3" style="
position: static;
">
<div class="left-panel">
<div>
<div class="test">
<h1>test</h1>
</div>
<p>We are excited to have you as part of the studio team!</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="right-panel">
<div id="sharing-div">
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="affiliate-link-title"><span class="default">Your Referral Link</span></span>
</div>
<div class="aff-link">
<span><i>
http://studio.com?afmc=1b
</i></span>
</div>
<div class="row">
<div class="col-md-12">
<div>
<div class="pull-right">
<a class="copy-link" data-clipboard-text="http://studio.com?afc=1b">copy link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="primary-social-links-title"><span class="default">your primary social links</span></span>
<div class="pull-right">
view all links
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="links">
<div class="share-btn">
<a data-share-type="email" data-link-id="9937727" href="/share/email">
<div>
<img src="/assets/primary-email-c415b75ea87907f28155ecb8b66b5fc42686c773f6315e8a9151d8b61dbe385c.png">
</div>
Email
</a>
</div>
<div class="share-btn">
<a href="/share/facebook" target="_blank" data-share-type="facebook" data-link-id="9937727">
<div>
<img src="/assets/primary-facebook-70e1f3176145c920e2423ffe0c06a15eece6e56cd51172582ea4d5571e0b0ab3.png">
</div>
Facebook
</a>
</div>
<div class="share-btn">
<a data-share-type="twitter" data-link-id="9937727" target="_blank" href="/share/tweet">
<div>
<img src="/assets/primary-twitter-2130572d07fd2cd1604a59dd16498c4e267ddf5c8ed1a82fcc826f7c6511dee0.png">
</div>
Twitter
</a>
</div>
<div id="whatsapp_share" class="share-btn">
<a data-share-type="whatsapp" data-link-id="9937727" target="_blank" href="/share/whatsapp">
<div>
<img src="/assets/primary-whatsapp-283a25d6a61b76686118d7f2f5866a0ba21c520ff4404a3b248523b7b7d396bd.png">
</div>
Whatsapp
</a>
</div>
<div id="text_share" class="share-btn">
<a data-share-type="text" data-link-id="9937727" target="_blank" href="/share/text">
<div>
<img src="/assets/primary-sms-2ee17bddcfbb89a98c68fdcf8282df2e5920c135ebe62595e77dc0cfc6a0622c.png">
</div>
Text
</a>
</div>
<div id="linked_in_share" class="share-btn">
<a data-share-type="linkedin" data-link-id="9937727" target="_blank" href="/share/linkedin">
<div>
<img src="/assets/primary-linkedin-5bc3ba7bbfda5051d5d0d82ebc9b397ac17778b21fa7936ba7b0db3bbbc22d92.png">
</div>
LinkedIn
</a>
</div>
<div class="share-btn">
<a ic-action="slideToggle" ic-target="#instagram-sharing-instructions" data-share-type="instagram" data-link-id="9937727" ic-trigger-on="default">
<div>
<img src="/assets/primary-instagram-826dae8b5dbccbce3a5a2e4ed0936c96fb6a24e3eb32006f3e5ebf4c51e9dc32.png">
</div>
Instagram
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="instagram-sharing-instructions" style="display: none;">
<div class="col-md-12">
<div class="fs18">
<span id="affiliate-instagram-sharing-instructions"><span class="default">Instagram Sharing Instructions</span></span>
</div>
</div>
<div class="col-md-12">
<ol>
<li>
<span class="instagram-badge">1</span>
<a class="copy-link" data-clipboard-text="http://studio.com?afmc=1b">copy link</a>
</li>
<li>
<span class="instagram-badge">2</span>
<a id="instagram-launch" class="" href="https://instagram.com/_n/mainfeed/" target="_blank"><span></span><b>Click here to launch Instagram</b></a>
<script>
$(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("#instagram-launch").attr('href', "instagram://");
} else if(navigator.userAgent.match(/android/i)) {
$("#instagram-launch").attr('href', "intent://instagram.com/_n/mainfeed/#Intent;package=com.instagram.android;scheme=https;end")
} else {
$("#instagram-launch").attr('href', "https://instagram.com/_n/mainfeed/");
$("#instagram-launch").attr('target', "_blank")
}
})
</script>
</li>
<li><span class="instagram-badge">3</span>Paste the link into your Profile, Story or Reels</li>
</ol>
</div>
</div>
</div>
<!--<div class="divider"></div>-->
<div>
<div class="title">
<span id="your-progress-title"><span class="default">Your Progress</span></span>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>2</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-visitors-title"><span class="default">Friends have visited us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-sign-up-title"><span class="default">Friends have signed up with us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-purchase-title"><span class="default">Purchases made by friends</span></span>
</span>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="title">
<span id="affiliate-payments-title"><span class="default">Your Payments</span></span>
</div>
<div class="dash-instructions">
<p>You will receive a 30% commission for each referral. For monthly and annual subscriptions, you will receive recurring commissions as long as the member is subscribed. </p>
</div>
<div class="table-scrollable-wrapper">
<table class="table">
<thead>
<tr>
<th>
<span id="affiliate-payments-compensation"><span class="default">Compensation</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-due"><span class="default">Due</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-upcoming"><span class="default">Upcoming</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-paid"><span class="default">Paid</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-muted text-center">
<span style="opacity: 0.5;"> nothing to show yet </span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the css(most of the important css is from bootstrap itself):
body {
background: #ffffff url(https://forge.swap-studio.com/assets/bg-polygon-dd7097463c1102fbf7fe55f6e00595256861740bba73750be91902f955f41f1e.png) no-repeat bottom center; /* fallback for old browsers */
background-size: cover;
background-attachment: fixed;
}
.grad-text {
background: -webkit-linear-gradient(0deg, #555555 0, #555555 70%);
}
a{
color: #002929;
}
/*.aff-link {*/
/*border: 1px solid #002929;*/
/*}*/
/*.aff-link-2 {*/
/*border: 1px solid #cdcdcd;*/
/*}*/
.aff-link-2 .copy-link {
background-color: #cdcdcd;
border: 1px solid #cdcdcd;
}
.aff-link-2 .btn-alt {
color: #cdcdcd !important;
}
.copy-link {
background-color: #002929;
border: 1px solid #002929;
}
.copy-link-wide {
background-color: #002929;
border: 1px solid #002929;
}
.aff-progress b {
color: #002929;
}
.change-url {
color: #002929;
}
.change-url-field .btn {
background-color: #002929;
}
.change-url-field .btn-alt {
/*background-color: #002929;*/
}
.aff-invite input {
border: 1px solid #002929;
}
.dot {
border: (10 / 5) solid #002929;
}
#affiliate-invite-who {
color: #002929;
font-size: 1.2em;
}
.dash-primary-color {
color: #002929 !important;
}
.button-primary {
background-color: #002929;
border: 1px solid #002929;
}
.email-input {
border: 1px solid #002929;
}
.button-primary-fullwidth {
background-color: #002929;
border: 1px solid #002929;
/*border-bottom: 3px solid #cdcdcd >;*/
}
.button-primary-flat-fullwidth {
color: #002929;
border: 1px solid #002929;
}
.comp-stats-figure {
color: #002929;
}
.top-to-bottom {
/*border-width: 6px;*/
/*border-style: solid;*/
/*border-color: #002929;*/
/*-webkit-border-image:*/
/*-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)) 1 100%;*/
/*-webkit-border-image:*/
/*-webkit-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-moz-border-image:*/
/*-moz-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-o-border-image:*/
/*-o-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*border-image:*/
/*linear-gradient(to bottom, #ffffff, #ffffff) 1 100%;*/
/*border-right: 0px;*/
/*border-top: 0px;*/
/*border-bottom: 0px;*/
}
/* Logged in page */
.test{
position: absolute;
background-color:purple;
top: 0;
left: 0;
width:100%;
}
It depends a bit on exactly what you want for other items, but concentrating on the purple-background element it is currently placed relative to the second child of the row element as that is given position: relative by the bootstrap CSS.
This snippet sets that second child to have position: static so the purple element is not positioned relative to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.section-topleft {
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
.container-fluid .row :nth-child(2) {
position: static;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4">
<h3>Title 1 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavender;">
<h3>Title 3 - col-sm-4</h3>
</div>
</div>
</div>
</body>
</html>
The navigation bar is at a certain distance away from the top, after scrolling past the navigation-bar, it sticks to the top but unfortunately it's width expands beyond the container(it's defined in). The navigation-bar should retain it's original width, so how do I resolve it? Here's my github link too :- https://github.com/Archiie/MyPortfolio
.affix {
top: 0px;
margin: 0px 20px;
}
.affix + .container {
padding: 5px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<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 data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<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>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Check Now its working, when it is sticky then it's position fixed so you have to give it width or set left and right position
.affix {
top: 0px;
margin: 0px 20px;
width:1100px;
}
#media (max-width: 1199px)
{
.affix {
width: 900px;
}
}
#media (max-width: 991px)
{
.affix {
width: 680px;
}
}
#media (max-width: 768px)
{
.affix {
left:15px;
right:15px;
width:auto;
}
}
.affix + .container {
padding: 0px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<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 data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<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>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Here is my codepen: https://codepen.io/LastSoldi3r/pen/OmjGgR
HTML:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
I understand that you can change the css within bootstrap itself to change these effects. However, I am learning and seeing as I am new I just used the link provided on the bootstrap website instead of sifting through the css. If you look at my pen you will see that hovering over any text well darken it and underline some parts.
I have tried overriding the code in various ways.
My most recently tried, and most commonly found solution:
a.hover {text-decoration: none !important;}
This has not worked for me and I haven't been able to find any other working solution.
add this simple code to your css file :
html a:hover {
text-decoration: none !important;
}
here is how your page will shown :
html a:hover {
text-decoration: none !important;
}
body {
background-color: #011f4b !important;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #b3cde0;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #005b96;
color: white;
}
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
}
#aboutMe {
font-size: 20px;
}
.code {
position: relative;
top: 0;
left: 0;
}
.nametag {
position: absolute;
top: 35px;
left: 60px;
}
.skills {
text-align: center;
font-size: 1.7em;
width: 110%;
}
.background {
background-color: #03396c !important;
}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://use.fontawesome.com/1ade2ea03e.js"></script>
</head>
<body>
<ul>
<li><a class="active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
<li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
<li><i class="fa fa-folder-open" aria-hidden="true"></i> Portfolio</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> Contact</li>
</ul>
<div class="container-fluid" style="margin-left: 10%; padding: 1px ;">
<a name="home">
<div class="row">
<div class="col-md-12">
<img width="100%" height="100%" class="code" src="http://cdn2.cloudpro.co.uk/sites/cloudprod7/files/java_0.jpg">
<img class="nametag" src="http://i.imgur.com/12ZcxYW.png">
</div>
</div>
</div>
<div class="container-fluid text" style="margin-left: 10%; padding: 1px 16px;">
<!--About Me-->
<a name="about">
<h2 align="center">About</h2><br>
<div class="row">
<div class="col-md-6">
<p id="aboutMe">I earned my Associates of Science for Information Technology in 2015. I am now working on my certification in Front End Web Development with the end goal of being a certified Full Stack Web Developer. I am achieving this goal with the help of freeCodeCamp().</p>
<div class="col-md-12">
<h2 align="center">Skills</h2><br>
</div>
<div class="row">
<div class="col-md-3 skills">
<i class="fa fa-coffee"></i>
<p>JAVA</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-html5"></i>
<p>HTML5</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-css3"></i>
<p>CSS3</p>
</div>
<div class="col-md-3 skills">
<i class="fa fa-code"></i>
<p>JAVASCRIPT</p>
</div>
</div>
</div>
<div class="col-md-6">
<img width="50%" height="50%" src="https://scontent.fhsv1-1.fna.fbcdn.net/v/t1.0-9/15219976_10153891163957294_6687591802937802260_n.jpg?oh=dccd86082954a5d9d1764fbd53ad70dc&oe=5982B68A">
</div>
</div>
<!--Portfolio-->
<br><br>
<a name="portfolio">
<div class="well background">
<h2 align="center">Portfolio</h2><br>
</div>
</div>
</body>
</html>
You were super close!
li a:hover:not(.active) {
background-color: #6497b1;
color: white;
text-decoration: none;
}
Here is a forked example of what you are looking for:
https://codepen.io/anon/pen/NjaobY
I just added text-decoration: none to your existing CSS. https://codepen.io/anon/pen/Lyzqxp
Replace a.hover with a:hover and it should work.
.hover means "class named hover"
:hover means "when the element is hovered"
If you're using Chrome, the Developper Tools (right click -> inspect element) -or similar firebug features- will allow you to see what css is being rendered on any element.
you should override bootstrap style by "!important" please use this:
https://codepen.io/houtan/pen/mmBvop
My cat image on my website is very far below all the other images when viewed on Internet Explorer (v11). It looks perfect when viewed in Chrome. For the development of this website, I used predefined bootstrap css classes, and a few of my own. Unfortunately, I have no idea why this image is so far below the rest in IE. Here is my own css style sheet:
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.text-vertical-center {
display: table-cell;
text-align: center;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 3.3em;
font-weight: 500;
vertical-align: middle;
padding-top: 2%;
}
/* Custom Button Styles */
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255,255,255);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
color: #333;
background-color: rgba(255,255,255,0.8);
}
/* Custom Horizontal Rule */
hr.small {
max-width: 100px;
}
/* Side Menu */
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
right: 0;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
/* Header */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(http://www.jpdirollphotography.com/Galleries/Pittsburgh/Skyline/i-t2BmHTp/1/XL/Black%20and%20Gold%20Fog%20Pittsburgh%20Clemente%20Bridge-XL.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
color: #404040 ;
}
/* About */
.bg-primary{
background-color: #FF9900;
}
.callout{
vertical-align: middle;
}
.about {
padding: 50px 0;
}
.fa-linkedin{
color: #404040 ;
}
.fa-github{
color: #404040 ;
}
.fa-facebook{
color: #404040 ;
}
/* Services */
.fa-gear{
color: #404040 ;
}
.fa-compass{
color: #404040 ;
}
.fa-flask{
color: #404040 ;
}
.fa-key{
color: #404040 ;
}
.fa-cloud{
color: #404040 ;
}
.fa-shield{
color: #404040 ;
}
.services {
padding: 50px 0;
}
.service-item {
margin-bottom: 30px;
}
/* Callout */
.callout {
display: table;
width: 100%;
height: 400px;
vertical-align: middle;
background: url(http://img03.deviantart.net/d652/i/2013/002/5/3/turtle_by_sweetlittlesmiles-d5q7bm5.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
color: white;
background-color: #404040;
padding-top: 7%;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 30px;
}
.img-portfolio {
margin: 0 auto;
}
.img-portfolio:hover {
opacity: 0.8;
}
/* Call to Action */
.call-to-action {
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
/* Map */
/* Footer */
footer {
padding: 100px 0;
}
Here is my html:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<!--- Why are you looking down here? -->
<title>
Christopher Diehl Portfolio
</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- FAvicon code -->
<link rel="icon"
type="favicon/png"
href="http://example.com/myicon.png">
</head>
<body>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
<i class="fa fa-bars">
</i>
</a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
<i class="fa fa-times">
</i>
</a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >
Home
</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >
Languages
</a>
</li>
<li>
<a href="#interests" onclick = $("#menu-close").click(); >
Interests
</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >
About
</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >
Contact
</a>
</li>
</ul>
</nav>
<!-- Header -->
<header id="top" class="header">
<div class="text-vertical-center">
<h1>
Christopher Diehl
</h1>
<h3>
Software Developer & Student
</h3>
</div>
</header>
<!-- About -->
<section class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>
Bill Gates
</h2>
<p class="lead">
Software is a great combination between artistry and engineering.
</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>
Favorite Languages
</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-key fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
Java
</strong>
</h4>
<p>
Experience using Java for:
<br>
Encryption, Servlet Creation, Data Manipulation, Database Management.
</p>
<a href="#" class="btn btn-light">
Learn More
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-cloud fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
HTML
</strong>
</h4>
<p>
Knowledge of Website Development..
</p>
<a href="#" class="btn btn-light">
Learn More
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-gear fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
Assembly
</strong>
</h4>
<p>
Programmed Simon Says game, calculator, and more in Mips
<br>
Mips CPU design in Logisim
</p>
<a href="#" class="btn btn-light">
Learn more
</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x">
</i>
<i class="fa fa-shield fa-stack-1x text-primary">
</i>
</span>
<h4>
<strong>
Willigness To Learn
</strong>
</h4>
<p>
Always excited to learn and am currently delving into C and Python
</p>
<a href="#" class="btn btn-light">
Learn More
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center" >
<h1 class= "orange-text" >
Studying Comp Sci at Rutgers
<br>
Employer: Dulles Technology Partners ©
</h1>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2 id="interests" >
Interests
</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item" style ="vertical-align: middle">
<img class="img-portfolio img-responsive img-rounded" id="car-picture" src="http://orig12.deviantart.net/e419/f/2009/101/9/6/honda_s2000_wallpaper_by_speedx07.jpg" >
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<img class="img-portfolio img-responsive img-rounded picture" src="http://www.blogcdn.com/massively.joystiq.com/media/2012/02/blizz-1330538518.jpg">
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<img class="img-portfolio img-responsive img-rounded picture" src="https://sitespex.com/wp-content/uploads/2015/05/ubuntu.jpeg">
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<img class="img-portfolio img-responsive img-rounded picture" src="http://people.ucsc.edu/~jlolonis/snow_cat.jpg">
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>
About
</h1>
<h4 id ="about">
Christopher is currently studying Computer Science at Rutgers- New Brunswick with the intent of fulfilling a concentration in Computer Security.
<br>
He is currently employed by Dulles Technology Corporation as a Software Developer in New Jersey.
<br>
For more information on his skills and samples of his work follow the links below.
</h4>
</div>
</div>
</div>
</aside>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4>
<strong>
Christopher Diehl
</strong>
</h4>
<p id = "contact">
Flemington
<br>
New Jersey
</p>
<ul class="list-unstyled">
<li>
<i class="fa fa-phone fa-fw">
</i>
(570) 421-2638
</li>
<li>
<i class="fa fa-envelope-o fa-fw">
</i>
<a href="diehl.chris#rocketmail.com">
diehl.chris#rocketmail.com
</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="https://www.linkedin.com/profile/view?id=338507614&trk=nav_responsive_tab_profile">
<i class="fa fa-linkedin fa-fw fa-3x">
</i>
</a>
</li>
<li>
<a href="https://github.com/ChristopherDiehl">
<i class="fa fa-github fa-fw fa-3x">
</i>
</a>
</li>
<li>
<a href="https://www.facebook.com/chris.diehl.35">
<i class="fa fa-facebook fa-fw fa-3x">
</i>
</a>
</li>
</ul>
<hr class="small">
<p class="text-muted">
Copyright © Christopher S. Diehl 2015
</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js">
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js">
</script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
}
);
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
}
);
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}
, 1000);
return false;
}
}
}
);
}
);
</script>
<!-- Makes Interest pictures same hight-->
<script>
$(window).load(function() {
var pictureHeight = $("#car-picture").height();
$(".picture").css('height', pictureHeight+ "px");
//$("#menu-bar").css("padding-top", BannerpadSpace);
}
)
$(window).resize(function(){
pictureHeight = $("#car-picture").height();
$(".picture").css('height', pictureHeight+ "px");
}
)
</script>
</body>
</html>
Thank You
You include images that are way much larger then the size you display them in. The browser has to scale them down, IE seems to have some problems with rounding the height of the image. When you look into the IE dev tools you can see that the first image is actually 343.11px in height. So the third image "edges" against those 0.11px and goes into the next column, which leads to the cat image be in the third row.
Prepare all the images in the same size you intent to show them.
Also check the W3C validator. You have a few errors in your markup.