So I have 3 images wrapped inside a div, and I've used both float: left; and "pull-left" to try and get the images to align next to each other, but they won't for some reason. They were aligned side by side before I added a jQuery cycle plugin to make the images into individual slide shows that fade in/out images (in the #Slideshow div), after I added the script they stacked on top of each other, I have no idea how to fix this.
/*style sheet*/
#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}
/*Biggest Container and Pattern Backg*/
#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
#Header /*Retro Games Arcade Logo*/
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.Content /*Holds Arcade Photo and Text in 2 columns*/
{
width: 100%;
height: 500px;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;
}
#HeaderText /*Title*/
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}
#RegularText /*Main Text Body*/
{
font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}
.dropcap
{ float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
#Arcade /*Arcade Photo*/
{
width: 100%;
}
/*Navigational Buttons*/
.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; /*20px*/
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;
}
#RightRow
{
Position: relative;
}
.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
}
#slideshow img
{
float: left;
margin-right: 25px;
margin: 0;
position: relative;
}
#slideshow
{
margin:auto;
}
#keyframes slideshow
{
0% {background-color: white;]
50% {background-color: red;}
}
}
.col-md-12
{
position: relative;
}
.footer-basic-centered{
background-color: #683025;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
box-shadow: 0 5px 5px -5px black;
padding: 15px;
margin-top: 80px;
}
.footer-basic-centered .footer-company-motto{
color: white;
font-size: 24px;
margin: 0;
font-family:'Rokkitt', serif;
}
.footer-basic-centered .footer-company-name{
color: #8f9296;
font-size: 14px;
margin: 0;
}
.footer-basic-centered .footer-links{
list-style: none;
font-weight: bold;
color: #ffffff;
padding: 35px 0 23px;
margin: 0;
font-family: 'Didact Gothic', sans-serif;
}
.footer-basic-centered .footer-links a{
display:inline-block;
text-decoration: none;
color: inherit;
}
#media (max-width: 600px) {
.footer-basic-centered{
padding: 35px;
}
.footer-basic-centered .footer-company-motto{
font-size: 18px;
}
.footer-basic-centered .footer-company-name{
font-size: 12px;
}
.footer-basic-centered .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer-basic-centered .footer-links a{
line-height: 1.8;
}
}
/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}
/*Tablet Devices*/
#media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;
}
}
/*Mobile Devices*/
#media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
}
.post-content
{
top: 20px;
font-size: 80px;
}
.Content
{
height: 600px;
}
}
/*1200*/
#media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Styles.css" />
<!--Main Style Sheet-->
<link rel="stylesheet" href="bootstrap.min.css" />
<!--Bootstrap Style Sheet-->
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />
<!--Fonts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript"> <!--Image Fade Script-->
$(document).ready(function() {
$('.Slot').cycle({
fx: 'fade'
});
});
</script>
<title>Retro Games Arcade</title>
</head>
<body>
<div id="Backg">
<div id="PrimaryC" class="container">
<!--Primary Container-->
<div id="Header">
<!--Site Logo-->
</div>
<div class="Content">
<!--Main Content Container-->
<div class="row">
<!--Row 1-->
<div class="col-sm-6">
<!--Left Col-->
<img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
<div class="caption post-content">
<div id="Home">home</div>
<!--Home Button-->
<div id="Stock">stock</div>
<!--Stock Button-->
<div id="AboutUs">about us</div>
<!--About Us Button-->
<div id="ContactUs">contact us</div>
<!--Contact Us Button-->
</div>
</div>
<div class="col-sm-6" id="RightRow">
<!--RightCol-->
<p id="HeaderText">Welcome to the Retro Games Arcade</p>
<p id="RegularText">
<span class="dropcap">H</span>ere you can find a treasure of Retro Video Games, sell your unwanted hardware/software;
and also have our professional team repair any damaged hand-held gaming devices.
<br />
<br />We have one of the biggest collectecions of Retro Video Games in the UK, and have genres ranging from Puzzle
Games and Platformers, to Roleplaying Games and Stratgey Games.
<br />
<br />Our staff have over 100 years combined experience of playing retro video games and a professional certified
Nintendo technician, so if you want a recommendation for your
<br />sons birthday present, or you need to get your old GameCube repaired; we are your guys.</p>
</div>
</div>
<div class="col-md-6">
<div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
</div>
</div>
</div>
</div>
<div class="row">
<!--Row 3-->
<div class="col-md-12">
<img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
</div>
</div>
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-company-motto">Expand Your Retro Playground.</p>
<p class="footer-links">
Home ·
Stock ·
About Us ·
Contact Us</p>
<p class="footer-company-name">Retro Games Arcade ɠ2015</p>
</footer>
</div>
</div>
</body>
</html>
Very difficult to read through that code, so I'm not sure if I'm targeting the right area.
I'm assuming you want these images to be in-line:
<div class="col-md-6">
<div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
</div>
<div class="Slot">
<img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
<img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
</div>
</div>
</div>
Just use bootstrap:
<div class="col-md-6">
<div class="col-md-4">
*images*
</div>
<div class="col-md-4">
*images*
</div>
<div class="col-md-4">
*images*
</div>
</div>
Related
I have this website with a nav bar. at the moment the nav text (theory, More) gets bold the on hover, however i have been trying to make the text scale/grow in a smooth transition as it hovers. But the text only seems to bolden at the moment and i cannot get the text to scale up
may someone look over my code and note my mistake
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
<style>
body{
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
nav{
float: right;
margin-top: 10px;
}
/* Header */
header{
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all .1s ease-in-out
}
header ul{
margin: 0;
padding: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header .highlight, header .current a{
color: #000000;
font-weight: bold;
}
#a:hover{
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase{
min-height: 400px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
<a>'s default display is inline. transform cannot be applied unless display is reset to value which allow sizing. (or formatting context). You can reset it to inline-block.
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0d98ba;
color: #ffd700;
padding-top: 30px;
min-height: 70px;
border-bottom: #ff4500 3px solid;
}
.a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all 0.1s ease-in-out;
display:inline-block;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
display: inline-block;
}
.a:hover {
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase {
min-height: 400px;
}
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
Note: I turned the three id="a" into class="a"
I am trying to create a gallery using bootstrap, and I cant seem to keep all my images the same size both height and width wise.
How do I go about making all the images in the gallery the same size.
here is the jsfiddle- https://jsfiddle.net/j0z3sq5s/
Apologies for I am working on a localhost/localserver and the images cant be seen. however I have taken some screen shots.
enter image description here
enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="niceMJ.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jute.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="download.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="asper.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
here is the css
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
.thumbnail img{
height: 300px;
width: 100%;
object-fit : cover;
}
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
Here you have explain of object-fit :https://css-tricks.com/almanac/properties/o/object-fit/
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
I've made it so once you hover over the images on this page they become interactive and show a hyperlink. I've tried my best to make this responsive but for some reason to the left the images are sticking out and creating a gap between the white box and background image.
I would really appreciate it if someone could make an effort to help me out and educate me a little here :) Thank you!
Here's my code
/* Extra small devices (phones, up to 480px) */
#media screen and (max-width: 767px) {
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px) {
}
/* tablets/desktops and up ----------- */
#media (min-width: 992px) and (max-width: 1199px) {
}
/* large desktops and up ----------- */
#media screen and (min-width: 1200px) {
{
font-size: 2.350em;
}
}
body {
width:100%;
margin:0;
padding:0;
max-width:100%;
font-size: 2.175em;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
background: url(http://eyeofthestormproductions.com/css/background.jpg) no-repeat center center fixed;
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}
.underh {
padding-top: 1.750em;
margin-left: 1.25em;
max-width: 100%;
}
.teamimg {
}
.team {
text-align: center;
padding-top: 5px;
margin-bottom: 25px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 50px;
margin: auto;
}
.vspacer {
padding-top: 1.875em;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.container-fluid,.row{
width:100%;
margin:0;
padding:0;
max-width:100%;
}
.footertext {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 15px;
color: white;
margin-left: 30px;
opacity: 0.8;
text-align: right;
}
.lastbox {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 19px;
text-align: center;
}
.footer {
background-size: cover;
font-family: 'Oxygen', sans-serif;
margin:0;
padding:0;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
padding: 10px 0 10px 0;
}
.boxmain {
background-color: white;
width: 100%;
min-height: 12.500em;
background-size: cover;
max-width: 100%;
margin-bottom: 100px;
padding-bottom: 15px;
}
.logo {
display: block;
width: 75%;
height: 96%;
margin: auto;
max-width: 100%;
margin-bottom: -30px;
}
.navbar .nav > li > a {
color: #F2F4F4;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
font-size: 17px;
text-transform: uppercase;
padding-left: 35px;
text-decoration: none;
letter-spacing: 1px;
}
.navbar-default {
margin-top: 0px;
background: #000;
background: rgba(0,0,0,0.1);
border-color: transparent;
}
#media (min-width: 768px){
.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.himage {
position: relative;
width: 300px;
border-radius: 15px;
height: 434.5px;
margin: 10px;
float: left;
}
.htext {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
text-align: center;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 17px;
padding-left: 5px;
padding-right: 5px;
}
.hheader {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 50px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 436px;
text-align: center;
padding-top: 100px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
}
.upage {
opacity: 0.7;
}
span {
color: white;
}
.servicesimg {
padding-top: 1.250em;
padding-bottom: 2.188em;
border-radius: 0.625em;
height: auto;
max-width: 100%;
padding-left: 1.25em;
margin-right: 1.25em;
}
.servicesheading {
margin-top: 0.325em;
font-family: 'Oxygen', sans-serif;
text-align: center;
margin-bottom: 0.02933333333333em;
font-weight: 300;
font-size: 35px;
}
.underhserv {
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 95%;
padding-top: 3px;
margin-left: 1.25em;
max-width: 100%;
}
.teamimg {
padding-top: 0.450em;
padding-bottom: 1.188em;
border-radius: 0.625em;
height: auto;
max-width: 100%;
padding-left: 1.25em;
margin-right: 1.25em;
}
.connectsc {
margin-left: 1.25em;
margin-bottom: 15px;
}
.followb {
margin-left: 1.25em;
margin-bottom: -40px;
}
#likebox-wrapper * {
width: 100% !important;
margin-bottom: 5px;
}
.underhcontact {
padding-top: 1.750em;
margin-left: 1.25em;
max-width: 100%;
font-size: 30px;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
}
.pgspacer {
margin-bottom: 60px;
}
.eventpadding {
margin-top: 1.250em;
margin-bottom: 2.188em;
}
.margin1 {
margin-top: 13px;
margin-bottom: 7px;
}
.breadcrumb {
border: 0px solid rgba(245, 245, 245, 1);
background-color: white;
margin-left: 1.25em;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
}
.breadcrumb li {
font-size: 14px;
}
.breadcrumb a {
color: rgba(66, 139, 202, 1);
}
.breadcrumb a:hover {
color: rgba(42, 100, 150, 1);
}
.breadcrumb>.active {
color: rgba(153, 153, 153, 1);
}
.breadcrumb>li+li:before {
color: rgba(204, 204, 204, 1); content: "\002F\00a0";
}
.mediaheading {
margin-top: 0.325em;
font-family: 'Oxygen', sans-serif;
text-align: center;
margin-bottom: 0.7933333333333em;
font-weight: 300;
font-size: 35px;
}
.bottombox {
margin-top: 30px;
}
.caption {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-right: 1.25em;
margin-top: 1.250em;
margin-bottom: 2.188em;
margin-left: 1.25em;
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.imageh:hover + .caption::before {
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
}
.imageh {
position: absolute;
display: block;
height: 100%;
width: 100%;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.imageh:hover + .caption .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__media{
padding-top: 130px;
max-width: 100%;
}
.linkstyle {
padding-top: 20px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
}
.servicesspace {
margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eye Of The Storm Productions - Services </title>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="description" content="">
<script type="text/javascript" src='jQuery/jquery-1.9.1.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Shadows+Into+Light|Oswald:400,300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
<!-- Css -->
<link rel="stylesheet" href="http://eyeofthestormproductions.com/gettingthere/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="http://eyeofthestormproductions.com/gettingthere/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<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>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>home</li>
<li>artists</li>
<li class="upage">services</li>
<li>events</li>
</ul>
</div>
</nav>
<!-- navbar -->
<img class="logo img-fluid" alt="Eye Of The Storm" src="logo.png">
<div class="boxmain">
<div class="container-fluid">
<div class="row">
<div class="servicesspace"></div>
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="servicesheading">Producer's & DJ'S</p>
<p class="underhserv">Music is at the heart and core of each one of us, so it is obviously important to us that we represent this through our selection of label DJ’s and Producers.
Eye Of The Storm hosts 5 DJ acts, and 5 Live acts,
which between them cover a diverse range of cutting-edge EDM.
Psytrance, Progressive Trance, Techno, Minimal, Glitch Hop and
Bass are the primary styles of music we aim to deliver, however we
strive for a unique, innovative sound that connects our heritage and vision.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/livemusic.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Film and Photography</h1>
<p class="underhserv">Our fantastic media and photography crew are some of the best young event photographers in Australia.
With their dynamic and enthusiastic approach behind the lens, each photographer has developed a reputation for beautifully capturing any event in all scenarios.</p>
<br>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/photography.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">OUR MEDIA TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Stage management</h1>
<p class="underhserv">We offer a professional team of stage managers all with countless hours of on-stage experience.
Working at a wide variety of events has lead to an extensive knowledge of electronic equipment and devices, sound, lighting, communication, organization and authority.
This knowledge and experience makes the Eye Of The Storm stage management team very effective and easy to work with.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/stagemanagment.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">STAGE MANAGEMENT TEAM</a></h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Stage Design and Construction</h1>
<p class="underhserv">Our friends from Fulcrum Designs provide all of our stages, shade sails, projections and 3D mapping.
From small, cost effective staging solutions, through to full size festival fit outs.
We have a number of professional labourers and experienced fabricators who all have helped in large festivals and productions across Australia.
As well as past and current employment in roles such as lighting technician, audio technician, décor, rigging, landscaping, cabinet making, welding, fabricating and hard physical labour.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/stagedesign.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">FULCRUM DESIGNS TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Graphic Design</h1>
<p class="underhserv">Eye of the Storm Productions works in collaboration with a range of
aspiring graphic designers capable of producing stunning artworks with intricate detail. Our range of
designer allows as to complete pieces and graphics projects very quickly,
regardless of what you need or when you need it, it's not an issue.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="graphics.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">GRAPHIC DESIGN TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="footer">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div id="likebox-wrapper">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="footertext">Copyright © 2017 Eye Of The Storm Productions. All Rights Reserved.</p>
<p class="footertext">Website developed by Charlie Fisher</p>
</div>
</div>
</div>
</div>
</body>
</html>
Also I was going to post this question separately but. The hyperlink on the interactive images doesn't work once clicked. I believe that there are some layers that are not allowing it to work. Is there anyway to bring it forward? Thanks!
I'm trying to design google play like webpage design (Mobile version). I'm using CUSTOM GRID SYSTEM (12 col 0.5% margin). The problem is that body color is appearing over header section (I think so, maybe its a different problem). I want to make it look/scroll like this:
Example image of google play mobile
Here is the code:
**
You may need to zoom to 250% or landscape max width:640px to view the
design.
**
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {
background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70%;
width: 100%;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
You want something like this. In your code you are fixing bg-image of header, therefore the body will scroll over that image, so need to fix the header instead of fixing bg-image
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
padding-top:70vh;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
top:0;
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70vh;
width: 100%;
position:fixed;
top:40px;
z-index:-1;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
After playing with it a bit, I think there is a problem with the header. It works if you give it position: fixed and z-index: -1. The only remaining problem is that you have to make sure that the space remains. I recommend a <div style="height: 70%"></div>
Setting z-index to 1 for your nav should help.
I'm making a responsive website using bootstrap 3, and I've only just started using it, so I haven't really gotten the hang of it yet. I've made 2 columns inside a container. In the first column I have a nav bar/image and on the second column I have text. I'm trying to add 3 images (in divs) under the nav bar/image I have, but when I try to do this, the divs show but the right column moves to what it should display as on a mobile. I think my media queries have something to do this but I'm unsure on how to fix it. This is what I want it to look like, as well as being responsive, and this is what happened when I tried to implement the images.
/*style sheet*/
#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}
/*Biggest Container and Pattern Backg*/
#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
#Header /*Retro Games Arcade Logo*/
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.Content /*Holds Arcade Photo and Text in 2 columns*/
{
width: 100%;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;
}
#HeaderText /*Title*/
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}
#RegularText /*Main Text Body*/
{
font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}
.dropcap
{ float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
#Arcade /*Arcade Photo*/
{
width: 100%;
}
/*Navigational Buttons*/
.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; /*20px*/
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;
}
#RightRow
{
Position: relative;
}
.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
}
.img-responsive.gallery
{
float: left;
width: 158px;
height: 162px;
margin-right: 25px;
}
158, 162
.col-md-12
{
position: relative;
}
.footer-basic-centered{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
padding: 15px;
margin-top: 80px;
}
.footer-basic-centered .footer-company-motto{
color: #8d9093;
font-size: 24px;
margin: 0;
}
.footer-basic-centered .footer-company-name{
color: #8f9296;
font-size: 14px;
margin: 0;
}
.footer-basic-centered .footer-links{
list-style: none;
font-weight: bold;
color: #ffffff;
padding: 35px 0 23px;
margin: 0;
}
.footer-basic-centered .footer-links a{
display:inline-block;
text-decoration: none;
color: inherit;
}
#media (max-width: 600px) {
.footer-basic-centered{
padding: 35px;
}
.footer-basic-centered .footer-company-motto{
font-size: 18px;
}
.footer-basic-centered .footer-company-name{
font-size: 12px;
}
.footer-basic-centered .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer-basic-centered .footer-links a{
line-height: 1.8;
}
}
/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}
/*Tablet Devices*/
#media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;
}
}
/*Mobile Devices*/
#media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
}
.post-content
{
top: 20px;
font-size: 80px;
}}
/*1200*/
#media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Styles.css" />
<!--Main Style Sheet-->
<link rel="stylesheet" href="bootstrap.min.css" />
<!--Bootstrap Style Sheet-->
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
<!--Permanent Marker Font-->
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css' />
<!--Press Start 2P Font-->
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />
<title>Retro Games Arcade</title>
</head>
<body>
<div id="Backg">
<div id="PrimaryC" class="container">
<!--Primary Container-->
<div id="Header">
<!--Site Logo-->
</div>
<div class="Content">
<!--Main Content Container-->
<div class="row">
<!--Row 1-->
<div class="col-sm-6">
<!--Left Col-->
<img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
<div class="caption post-content">
<div id="Home">home</div>
<!--Home Button-->
<div id="Stock">stock</div>
<!--Stock Button-->
<div id="AboutUs">about us</div>
<!--About Us Button-->
<div id="ContactUs">contact us</div>
<!--Contact Us Button-->
</div>
<div class="centerBlock">
<div><img class="img-responsive gallery" src="Graphics/">
</div>
<div><img class="img-responsive gallery" src="Graphics/">
</div>
<div><img class="img-responsive gallery" src="Graphics/">
</div>
</div>
<div class="col-sm-6" id="RightRow">
<!--RightCol-->
<p id="HeaderText">Welcome to the Retro Games Arcade</p>
<p id="RegularText">
<span class="dropcap">H</span>ere you can find a treasure of Retro Video Games, sell your unwanted hardware/software;
and also have our professional team repair any damaged hand-held gaming devices.
<br />
<br />We have one of the biggest collectecions of Retro Video Games in the UK, and have genres ranging from Puzzle
Games and Platformers, to Roleplaying Games and Stratgey Games.
<br />
<br />Our staff have over 100 years combined experience of playing retro video games and a professional certified
Nintendo technician, so if you want a recommendation for your
<br />sons birthday present, or you need to get your old GameCube repaired; we are your guys.</p>
</div>
</div>
</div>
<div class="row">
<!--Row 2-->
<div class="col-md-12">
<img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-company-motto">Expand Your Retro Playground.</p>
<p class="footer-links">
Home ·
Stock ·
About Us ·
Contact Us</p>
<p class="footer-company-name">Retro Games Arcade ɠ2015</p>
</footer>
</div>
</div>
</body>
</html>
Any help is appreciated! If any other info is needed I'm happy to help also.
The right column is contained on the left side of the page because it's a class="col-sm-6" inside the class="col-sm-6" before it.
It looks like you have a missing </div> before <div class="col-sm-6" id="RightRow">.