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">.
Related
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
I'm building a web page and working in the layout for small screens (max-width: 600px). When the screen gets narrow, the page gets a bit of horizontal scroll, as you can see in the code snippet, but it is unexpected for me. I am not finding anything wider than the viewport's width in my code. Why is there that scroll?
/* CSS from index_default.css */
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Open Sans', sans-serif;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
header h1{
font-family: 'Doppio One', cursive;
color: rgb(214, 245, 210);
}
nav a{
color: rgb(230, 245, 229);
}
#menu{
width: 30px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
display: block;
margin-right: auto;
margin-left: auto;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
color: rgb(214, 245, 210);
}
/* CSS from index_small.css */
#charset "UTF-8";
body{
width: 100vw;
text-align: center;
}
header{
padding-right: 10px;
padding-left: 10px;
}
header img:first-of-type{
width: 40px;
margin-right: 5px;
}
header ul{
display: none;
}
#menu{
margin-left: 15vh;
}
#firstsection{
background-color: rgb(220, 255, 211);
height: 40vh;
padding: 10% 20px 0;
margin-bottom: 8%;
}
#firstsection div{
margin-bottom: 30px;
}
#firstsection a{
position: relative;
top: 35px;
}
#middlesection{
margin: 0 5vw;
}
#textboxes div{
margin-bottom: 8%;
}
#lastsection img{
width: 90%;
margin-top: 8vh;
}
#lastsection div{
position: relative;
bottom: 18.5vh;
}
#lastsection div h2{
font-size: 1.2rem;
}
footer img{
width: 40px;
margin-right: 8px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="finances, managing money, spending control">
<link rel="stylesheet" type="text/css" href="index_default.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<h1>Finances</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Register</li>
<li>Login</li>
</ul>
<img src="Images/icons8-menu-50.png" id="menu">
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>
Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>the best of Finances.</h2>
Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Change to css file
body{
width: 100vw;
text-align: center;
}
to
body{
width: 100%;
text-align: center;
}
It is the width: 100vw given to body which is causing the scroll. This may be happening as you might have given left or right margin to other sections of the page or assigned widths such that it exceeds the viewport.
Now you can inspect them one by one and rectify. Alternatively, you can adopt any one of these styles for your body tag in addition to what you're using:
Get rid of width: 100vw or
Add max-width:100vw or
Add overflow-x: hidden
Adopting any one of these should fix your issue. Cheers!!
The 100vw width of the body span the whole viewport width. If a vertical scrollbar appears (which is almost always the case), this scrollbar covers / cuts off a small part of those 100vw, so the body actually has to become narrower than 100vw to be fully visible - like "100vw minus the width of the vertical scrollbar". Otherwise a * horizontal* scrollbar will appear (like in your example).
To avoid this, you can simply erase width: 100vw from body, which will set the width to the default auto and will work as expected:
/* CSS from index_default.css */
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Open Sans', sans-serif;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
header h1{
font-family: 'Doppio One', cursive;
color: rgb(214, 245, 210);
}
nav a{
color: rgb(230, 245, 229);
}
#menu{
width: 30px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
display: block;
margin-right: auto;
margin-left: auto;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
color: rgb(214, 245, 210);
}
/* CSS from index_small.css */
#charset "UTF-8";
body{
text-align: center;
}
header{
padding-right: 10px;
padding-left: 10px;
}
header img:first-of-type{
width: 40px;
margin-right: 5px;
}
header ul{
display: none;
}
#menu{
margin-left: 15vh;
}
#firstsection{
background-color: rgb(220, 255, 211);
height: 40vh;
padding: 10% 20px 0;
margin-bottom: 8%;
}
#firstsection div{
margin-bottom: 30px;
}
#firstsection a{
position: relative;
top: 35px;
}
#middlesection{
margin: 0 5vw;
}
#textboxes div{
margin-bottom: 8%;
}
#lastsection img{
width: 90%;
margin-top: 8vh;
}
#lastsection div{
position: relative;
bottom: 18.5vh;
}
#lastsection div h2{
font-size: 1.2rem;
}
footer img{
width: 40px;
margin-right: 8px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="finances, managing money, spending control">
<link rel="stylesheet" type="text/css" href="index_default.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<h1>Finances</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Register</li>
<li>Login</li>
</ul>
<img src="Images/icons8-menu-50.png" id="menu">
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>
Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>the best of Finances.</h2>
Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
I'm trying to get my Nav menu text to sit beside one another beside the logo like a real website would have.
I made a mockup of the side for reference linked below for viewing purposes.
I've been literally stressing myself out over this simply mundane task, messing with margins, padding, floating, etc and no matter what I do to any of my elements either NOTHING happens or a whole bunch of shit will start flying all over the place and I can't even understand why.
My mockup Preview
How mine looks at present
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike{
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float:left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu{
margin-top:15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.search{
float: left;
}
.SearchGlass{
margin: 30px 900px;
float: left;
}
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
padding-bottom: 42px;
float:left;
text-align: left;
}
h1{
}
/* Class For Articles*/
.article{
float: left;
width: 100%;
margin-bottom: 72px
}
.article img{
width: 400px;
height: 225px;
margin-right: 1%
}
.article h1{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer{
display: block;
width: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Display your list items inline block.
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike {
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu {
margin-top: 15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.navmenu li {
display: inline-block;
}
.search {
float: left;
}
.SearchGlass {
margin: 30px 900px;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Either you're not posting the needed code for the solution or you have some indentation erros in your html.
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike"> <--- open never closed
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</header> <--- this was after div that goes next
</div>
A simple way to do this would be to split your header into 3 columns and then place your logo, navigation and search fields into each of those sections.
I have included an example below:
.clearfix {
overflow: auto;
}
.header__section {
float: left;
width: 30%;
margin-right: 5%;
}
.header__section:last-child {
margin-right: 0;
}
<header class="header clearfix">
<section class="header__section">
Logo
</section>
<section class="header__section">
Nav
</section>
<section class="header__section">
Search
</section>
</header>
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!
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>