Hello stackoverflow community! I am working on a major project right now and having some difficulty. I am trying to make all the content fit inside the viewport. However, for some reason it is just a tad bit larger than the screen. A little bit of the content is to the right of the screen, even though I put Can anyone help me know why?
Here is the html and css:
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
width: 100vw;
height: 100%;
margin-left: 0px;
margin-right: 0px;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
}
.topbar {
display: block;
background-color: black;
color: white;
}
/* Nav Bar */
nav {
text-align: center;
width: 100vw;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
</div>
<!-- Nav -->
<nav>
<a id="mission" class="link" href="#">Mission</a>
<a id="about" class="link" href="#">About Us</a>
<a id="donations" class="link" href="#">What We Do</a>
<a id="contact" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
When you set body as width: 100vw, the horizontal scroll is present because of the vertical scroll. Which you can solve by giving max-width: 100% to you body.
Also you've set nav with width: 100vw, wich causes the same problem. Which you can solve by setting width: 100% as you already set body with width 100vw.
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
width: 100vw;
height: 100%;
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
}
.topbar {
display: block;
background-color: black;
color: white;
}
/* Nav Bar */
nav {
text-align: center;
width: 100%;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
</div>
<!-- Nav -->
<nav>
<a id="mission" class="link" href="#">Mission</a>
<a id="about" class="link" href="#">About Us</a>
<a id="donations" class="link" href="#">What We Do</a>
<a id="contact" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
Good Job for your code, for the next your project don't forget to add normalize css to your code. I have add some style below. Never give up to learn.
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
width: 100%;
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
}
.topbar {
display: block;
background-color: black;
color: white;
padding: 0 20px;
}
/* Nav Bar */
nav {
text-align: center;
width: 100%;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<!-- it's first to normalize style before your style -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
</div>
<!-- Nav -->
<nav>
<a id="mission" class="link" href="#">Mission</a>
<a id="about" class="link" href="#">About Us</a>
<a id="donations" class="link" href="#">What We Do</a>
<a id="contact" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
Related
On the following site, I have a child div absolutely positioned at the bottom of its parent div - the hero image.
http://helpthemgrow.staging.wpengine.com/
Adding padding to the child div causes it to break out of parent div
Here is my code:
<div class="home-hero">
<div class="home-hero-img">
<div class="wrap">
<div class="home-image widget-area">
<section id="media_image-2" class="widget widget_media_image">
<div class="widget-wrap">
<img width="200" height="300" src="http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover-200x300.jpg" class="image wp-image-43 attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" srcset="http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover-200x300.jpg 200w, http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover.jpg 250w" sizes="(max-width: 200px) 100vw, 200px">
</div>
</section>
</div>
</div><!-- end wrap -->
</div><!-- end home-hero-img -->
<div class="home-hero-cta">
<div class="wrap">
<div class="three-fourths first">
<div class="home-hero-cta-text">Careers are developed one conversation at a time – over time.</div>
</div>
<div class="one-fourth">
<a class="button" href="/book/">Learn more</a>
</div>
</div><!-- end wrap -->
</div><!-- end home-hero-cta -->
</div><!-- end home-hero -->
Here is my CSS:
.home-hero {
background-image: url('/wp-content/uploads/2018/02/htg-hero-slide-one.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 100px 0 150px 0;
color: #fff;
margin: 0;
position:relative;
}
.home-hero-cta {
height: 50px;
width: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
}
.home-hero-cta .wrap {
padding: 20px 0;
}
.home-hero-cta-text {
font-size: 25px;
}
What am I doing wrong?
Remove the set height that you have for home-hero-cta and that should fix your issue.
I have a section in my site that should stretch all the way across the screen.
I want to add 4 images in this section, one beside the other, and make them responsive. I want them to fill the background and breaks between them as needed. How should I modify my code below to accomplish the effects I desire?
#games {
background-color: #000;
}
#games img {
width: 100%;
height: auto;
}
.4columns {
width: 32%;
display: inline-block;
}
<section id="games" class="section section-games">
<div class="container-fluid">
<div class="row">
<img class="4columns" src="resources/media/icons/1.png">
<img class="4columns" src="resources/media/icons/2.png">
<img class="4columns" src="resources/media/icons/3.png">
<img class="4columns" src="resources/media/icons/4.png">
</div>
</div>
</section>
I think you want something like this :
.map{
margin:0;
padding:0;
}
.map img{
float: left;
width: 25%;
}
<div class="map">
<span>
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
</span>
</div>
I've built an off-canvas navigation menu on the right-hand side of the screen. Clicking the hamburger icon slides the menu in from right-to-left. I am using overflow:hidden on the wrapping div, so no scroll bars are present. However, when click-dragging the main body from right-to-left, it pulls the overflowing content into view. When switching the navigation to use a left positioning, this behavior does not occur... strange... Any ideas?
codepen: http://codepen.io/seejaeger/pen/eNJOeb
HTML
<div class="container">
<div class="translate">
<div class="main">
<div class="nav-wrap_small">
<img src="https://cdn4.iconfinder.com/data/icons/flat-black/128/menu.png" class="offcanvas-toggle">
</div><!-- nav-wrap_small -->
<div class="nav-wrap">
<nav class="nav-left">
<img src="" alt="" width="80%">
</nav><!-- nav-left -->
<nav class="nav-center">
products
investment funds
commentary
literature
resources
about
</nav><!-- nav-center -->
<nav class="nav-right">
contact
accounts
<br>
<input type="text" class="nav-right-searchInput">
</nav><!-- nav-right -->
</div><!-- nav-wrap -->
<!-- main content goes here -->
</div><!-- main -->
<div class="offcanvas">
<nav>
<ul>
<li>products</li>
<li>investment funds</li>
<li>commentary</li>
<li>literature</li>
<li>resources</li>
<li>about</li>
</ul>
</nav>
</div>
</div><!-- translate -->
</div><!-- container -->
CSS
.container {
overflow: hidden;
}
.translate {
transition: transform 0.3s ease;
}
.translate.is-open {
transform: translate3d(-300px, 0, 0);
}
.offcanvas {
position: absolute;
width: 300px;
right: -300px;
top: 0;
bottom: 0;
background-color: #006993;
}
.offcanvas-toggle {
width: 33px;
height: 33px;
float: right;
}
.main {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.main:after {
content: " ";
display: block;
clear: both;
}
http://jsfiddle.net/RyanHell078/MgcDU/6511/
I am working through my first project using Twitter's Bootsrap. My frontend and CSS skills are fledgling and I am working on understanding CSS and responsive layouts better. I have tried to understand why my H2 classes are not separated when viewing on a smaller display, but they are fine when viewing on a full desktop view.
I like Bootstrap overall, but I am still stuck. I have tried multiple remedies and searched high and low and I am still unable to determine an exact cause or better way to implement the titles for these image divs.
My project is to create a gallery site with 6 image tiles on the homepage (index.html). I will be adding some JavaScript, modals, and tooltips etc later. For now I need to get my layout sharp and working properly.
I decided to use a fluid layout. I created a 'fluid container', then filled it with some rows and spans.My code looks like this:
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Gallery Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- My Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<!-- responsive fallbacks for apple and ie -->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<!-- Navigation -->
<style type="text/css">
body { background: black; }
</style>
<!-- fluid container start -->
<div class="container-fluid">
<div class="row-fluid">
<!-- horizontal bar top of body -->
<div class="span12"><a class="brand" href="index.html">
<img src="/assets/images/logo.png"></a>
<div class="wrapper"><h1><br><p style="color:white;margin-left:20px;">
Welcome to my Gallery Site</p></h1>
</div>
<!-- navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
</a> My Gallery 2013
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">
Artist
</li>
<li>
Art News
</li>
<li>
Commissions
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Gallaries<br></a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider">
</li>
<li class="nav-header">
contact me
</li>
<li>
<div>
email me
<strong>my phone number here</strong>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
resources
</li>
<li class="divider-vertical">
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Galleries
</a>
<ul class="dropdown-menu">
<li>
action
</li>
<li>
another action
</li>
<li>
something else here
</li>
<li class="divider">
</li>
<li>
separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<body>
<!-- Main Body Container →
<div class="container-fluid">
<div class="row-fluid">
<!-- span for music -->
<div class="span4">
<div class="image">
<img src="assets/images/music.jpg" alt="music" />
<h2 class="music">music</h2>
</div>
</div>
<!-- end of span for music -->
<!-- span for bio -->
<div class="span4">
<div class="image">
<img src="assets/images/about.jpg" alt="artist biography" />
<h2 class="music">bio</h2>
</div>
</div>
<!-- end of span for bio -->
<!-- span for new art -->
<div class="span4">
<div class="image">
<img src="assets/images/newart.jpg" alt="new art" />
<h2 class="illuminatedanddecor">new art</h2>
</div>
</div><!-- end of span for new art -->
</div><!-- end row fluid -->
<!-- /////////////////// Second tile content row //////////////////////// -->
<div class="row-fluid">
<!-- span for illuminated & decor -->
<div class="span4">
<div class="image">
<img src="assets/images/illumanddecor.jpg" alt="illuminated and decor art" />
<h2 class="illuminatedanddecor">illuminated & decor</h2>
</div>
</div>
<!-- end of span for illuminated & decor -->
<!-- span for commissions -->
<div class="span4">
<div class="image">
<img src="assets/images/commissions.jpg" alt="commissions" />
<h2 class="illuminatedanddecor">commissions</h2>
</div>
</div>
<!-- end of span for commissions -->
<!-- span for ceramics -->
<div class="span4">
<div class="image">
<img src="assets/images/ceramics.jpg" alt="ceramics" />
<h2 class="music">ceramics</h2>
</div>
</div>
<!-- end of span for ceramics -->
</div><!-- end row fluid -->
</div> <!-- /end container fluid-->
</body>
</html>
// My Custom Style Sheet //
/* Footer Border Top */
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:3px;
margin-top:10px;
margin-bottom:10px;
}
body {
max-width:950px;
background-color:black;
margin: 0 auto;
font color: white;
}
/* element blocks */
#container
{
height:100%;
width:auto;
position:relative;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
/* custom h2's for each image tile (div) header */
/* music heading */
H2.music {
background:rgba(150, 150, 150, 0.5);
text-align:left;
padding-top:77px;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* bio heading */
H2.bio {
background:rgba(170, 187, 97, 0.5);
text-align:left;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* new art heading */
H2.newart {
background:rgba(150, 150, 150, 0.5);
text-align:left;
padding-top:77px;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;
}
/* illuminated and decor */
H2.illuminatedanddecor {
background: rgba(170, 187, 97, 0.5);
text-align:left;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* commissions heading */
H2.commissions {
background:rgba(109, 255, 36, .75);
text align:right;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* ceramics heading */
H2.ceramics {
background: rgba(2, 6, 143, 0.5);
text align:right;
position: absolute;
top: 50px;
left: auto;
width: 100%;
color: #FFFFFF;}
}
/* end custom headers for tiles */
.wrapper {
background-image: url(http://nwtronix.com/word/assets/images/navbartile.jpg);
background-repeat: repeat-x;
background-size: height="100%" width="auto";
width: 100%;
height: 100%;
}
/* header */
h1 {
font-family: 'Satisfy', cursive;
font-color: '#E5E4E2';
}
/* Copyright */
copyright {
font-color: '#333333';
}
/* Bar Background for H2's */
.bar {
height: 22px;
padding-top: opx;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
background: black;
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
margin-top: 5.0em;
}
p {
margin-left: 20px;
}
For now I have laid out a responsive theme. I created a fluid container. Inside of the fluid-container I created a row fluid, inside of which are 3 span-4’s. There are two rows of these span4’s inside one single container.
I am looking for help with understanding what I am doing wrong with CSS regarding the H2 classes here.
What I did was create some h2 alternatives for each image tile (div). The H2’s define the way I want each title’s title to be. Since the tile’s titles will be on varying background images, I think I need to be able to uniquely position the titles depending on each image. I hoped to use some background opacities to help the titles pop out a bit more from their background images.
My understanding is a custom h2 selector will allow me to create unique styles for any div that I select the custom h2 style inside of. Why the h2 styles are all staying linked when viewing on a small screen is stumping me.
Why are my H2’s all clustered on one single image tile div, when I view in a small display? What am I missing or messing up. I appreciate any and all help and will +1 the best answer.
Thank you
I want to put one image left, one image right and text in the middle.
I keep thinking I am close then one or another runs away! I would appreciate some help and guidance.
Code for page and CSS below
VB page
<div id="HeaderTitleWrapper">
<h2><img src="images/Header/logo.jpg" alt="Writting Icon" />
<div id="HeaderTel">
GATEWAY<img src="images/Header/pic2.jpg" alt="Writing Icon" />
</div> <!-- HeaderTel -->
</h2>
</div> <!-- HeaderTitleWrapper -->
CSS
/* Header Text Title */
#HeaderTitleWrapper {
width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
#HeaderTitleContent {
padding: 0px;
height: auto;
position: relative;
left: 0px;
top:10px;
}
#HeaderTel
{
position:absolute;
right:150px;
top:auto;
}
Using text-align:justify and pseudo , you can spray inline-boxes from left to right.
<header>
<img/>
<span>text</span>
<img/
<header>
header {
line-height:0;
text-align:justify;
}
header span {
display:inline-block;
vertical-align:middle;
line-height:1.2em;
}
header:after {
content:'';
display:inline-block;
width:99%;
vertical-align:top;
}
similar exemple : http://codepen.io/gcyrillus/pen/dlvCp
<div
id="firstImage">
<img
src="1.jpg"
alt="Writting Icon"
/>
</div>
<span
id="Text">
GATEWAY
</span>
<div
id="secondImage">
<img
src="2.jpg"
alt="Writing Icon"
/>
</div>
<!-- HeaderTel -->
</div>