I am trying to get the phone number to sit at the bottom of the thumbnail below the images. This is too allow for all three to line up. I have tried position fixed and bottom but neither have worked.
<div class="row text-center hidden-sm hidden-xs" style="position:fixed; top:50%; left:5%; right:5%;">
<div class="col-md-4">
<div class="thumbnail" style="height:150px">
<img style="widht: 150px; height:100px" src="assets/logos/virgin-media.jpg">
<p><span style="color:#428BCA; font-size: 32px; bottom:50px">0871 703 7323</span></p>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height:150px">
<img style="width:150px; height100px" src="assets/logos/talktalk.jpg">
<p><span style="color:#428BCA; font-size: 32px; bottom:50px">08082 230 624</span></p>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height:150px">
<img style="width:150px; height100px" src="assets/logos/bt.png">
<p><span style="color:#428BCA; font-size: 32px; bottom:50px">0871 703 7196</span></p>
</div>
</div>
</div>
I have also made a bootply
http://www.bootply.com/PXayrqx4xx
Ok, here's a fixed-up version with some extra rules:
#thumbs .thumbnail{
text-align:center;
position:relative;
}
#thumbs .thumbnail p{
position:absolute;
bottom:0;
width:100%;
margin:0;
padding:0;
}
Bootply here
Related
im trying to create a overlay color to my images products, basically the overlay color will appear when i make hover to the images, but isnt working.
The idea is when i pass the mouse over the images a transparecy the title and price appears with the overlay color
Here is my code:
html:
<!-- List of products -->
<div id="products" class="row list-group">
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="images/products/1.png" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<div class="row go-bottom">
<div class="col-xs-12">
<p class="price">
80 € / 120 €</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="images/products/1.png" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<div class="row go-bottom">
<div class="col-xs-12">
<p class="price">
80 € / 120 €</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail overlay">
<img class="group list-group-image" src="images/products/1.png" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Color Gold
</h4>
<div class="row go-bottom">
<div class="col-xs-12">
<p class="price">
80 € / 120 €</p>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.thumbnail:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.thumbnail:hover:after {
opacity:1;
}
.list-group-item:hover{
background:rgba(0,0,0,.7);
}
.shop-products .item .thumbnail{
border:none;
padding:0;
position: relative;
}
.shop-products .item .thumbnail .caption{
position: absolute;
bottom:0;
width: 100%;
height: 100%;
text-align: center;
}
h4.list-group-item-heading{
text-transform: uppercase;
font-weight: bold;
color:red;
letter-spacing: 3px;
}
.shop-products .item .thumbnail .caption .price{
color:red;
font-size:16px;
letter-spacing: 3px;
}
.go-bottom{
bottom:0px;
position: absolute;
width: 100%;
}
I'm not able to find the class list-group-item inside your code.
the caption should have the background-color.
.shop-products .item .thumbnail .caption{
position: absolute;
bottom:0;
left:0;
width: 100%;
height: 100%;
text-align: center;
display:none;
background:rgba(0,0,0,.7);
}
.shop-products .item .thumbnail:hover .caption{
display:block;
}
I want to have two images centered side by side. I've tried a lot of things but when I'm trying to change the width (because the images are too large) I have some distance and it's not okay. I want the images centered side by side on both desktop and mobile.
<div class="row" style="text-align:center;"">
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
Try something like:
<style type="text/css">
#left{
float:left;
width:20%;
overflow:hidden;
margin-left: 1%;
}
#right{
overflow:hidden;
}
</style>
<div class="row">
<div id="left">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div id="right">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
It worked for me in the past when I had to to something similar...
Hope it will do for you as well
.img_wrapper{
display:flex;
margin:0 auto;
width:300px;
height:300px;
border:thin black solid;
}
.images{
margin: auto;
}
p{
text-align:center;
}
img{
width:125px;
height:125px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="img_wrapper">
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
</div>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I would do that with Flexbox - If you can life with a little bit of missing browser-support (but in my opinion it is useable).
The code for the ".row"-div (give it an extra class if you use Bootstrap) would be in CSS (without vendor prefixes):
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-itmes: center;
}
With that the inner Elements are next to each other as long as they are fitting so and also vertically centered in the element.
Here the main flexbox-guide i use: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope my answer was helpful.
Edited Answer
As you are using Bootstrap (please see comments below) You can center the images using the Boostrap column system.
Please see here I have updated the CSS, a new col-no-padding class has been created that you can use anywhere if you wish to as it takes away the guttering in the columns and then some basic link and image styles have been added:
.col-no-padding {
padding-left:0;
padding-right:0;
}
.image-wrapper a {
display: block;
}
.image-wrapper img {
width:100%;
}
And the HTML tidied; utilising Bootstraps column and row structure:
<div class="row">
<div class="col-xs-3 col-xs-offset-3 col-sm-2 col-sm-offset-4 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
</div>
i'm getting horizontal scroll bar when resizing the browser to 796px or less i'v tried to delete the sections one by one to find which one gives that issue but it didn't resolve it then i tried to delete some code starting from section products-4 to the end of the code and it's solved then i started to delete the sections one by one from products-4 to the end but that didn't help i don't know what's the link between them to make that scroll appear and when try to test using google chrome device toolbar it gives white space on the right side with mobile screen resolution so i'v tried to delete any css code has any relationship with size for products-4 or for any other section below it but nothing happened so i hope you guys can help me to find where the problem is
/* Products-4 */
#products-4{
background-color: #000;
margin-top:20px;
color:darkred;
}
#products-4 img{
border:1px solid white;
border-radius:10px;
padding:5px;
}
.col-centered{
float: none;
margin: 0 auto;
}
#products-4 h2 {
text-align:center;
}
#products-4 p{
text-align:center;
}
/* Team */
#team h2{
text-align:center;
}
#team{
text-align:center;
}
#team img{
border:1px solid black;
}
/* Contact */
#contact{
background-color: #000;
}
#contact .container{
height:500px;
}
.tab-content{
padding:50px;
border:1px solid white;
}
.tab-content .tab-content-inside{
padding:50px 0;
}
.tab-content .tab-content-inside a{
color:white;
text-decoration: none;
}
.tab-content .tab-content-inside .btn{
margin-top:30px;
}
.tab-content .tab-content-inside .btn-info{
margin-left:50px;
}
.tab-content .tab-content-inside .btn-info a{
padding-right:10px;
padding-left:10px;
}
.nav-tabs li a{
background-color: transparent !important;
color:red;
}
.nav-tabs .active a{
color:white !important;
}
.nav-tabs .active a:hover{
color:cornflowerblue !important;
}
.nav-tabs li a:hover{
background-color:white !important ;
color:cornflowerblue;
transition : all 1s;
-webkit-transition : all 1s;
-moz-transition : all 1s;
-o-transition : all 1s;
}
<!-- Strart of products-4 -->
<section id="products-4">
<div class="container">
<div class="row">
<h1 class="text-center">More Products</h1>
<div class="row">
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-centered">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
</section>
<!-- End of Products-4-->
<!--Start of Team -->
<section id="team">
<div class="container">
<div class="row">
<h1>Our Team</h1>
<div class="col-md-4 col-md-offset-2">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Manager</h2>
<p>Any pragraph here</p>
</div>
<div class="col-md-4">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Sales Man</h2>
<p>Any pragraph here</p>
</div>
</div>
</div>
</section>
<!-- End Of Team -->
<!-- Start of contact -->
<section id="contact">
<div class="container">
<div class="row">
<h1>Contact Us</h1>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#e-mails">E-mails</a>
</li>
<li>
<a data-toggle="tab" href="#phones">Phones</a>
</li>
<li>
<a data-toggle="tab" href="#address">Address</a>
</li>
<li>
<a data-toggle="tab" href="#social">Social Networks</a>
</li>
</ul>
<div class="tab-content">
<div id="e-mails" class="tab-pane fade in active">
<div class="tab-content-inside text-center">
<h1>Feel Free To Text Us Any Time Using This E-Mails</h1>
<div class="tab-content-content">
<button type="button" class="btn btn-primary">
<span class="fa fa-envelope-o fa-2x">
Manager
</span>
</button>
<button type="button" class="btn btn-info">
<span class="fa fa-envelope-o fa-2x">
Sales
</span>
</button>
</div>
</div>
</div>
<div id="phones" class="tab-pane fade">
All Phones Goes here
</div>
<div id="address" class="tab-pane fade">
Address Comes here
</div>
<div id="social" class="tab-pane fade">
Social Addresses goes here
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of contact-->
I am trying to stack 2 column rows with and image in one of the columns and text in the other alternating for each different row. I have not been able to get my pictures to fill the container they are in. I am also unable to make them the same size (I have been able to make the top picture fill its container).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ESQ_Main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>ESQ BUILDS:RESIDENTIAL</title>
</head>
<body>
<div class="menu">
<div class="container">
<div class="row">
<div class = "col-md-2">
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Home</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">About</a>
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Services</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">Conact Us</a>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="header_r">
<div class="container-fluid">
<div class="head">
<h1>
RESIDENTIAL
</h1>
</div>
</div>
</div>
<div class="label">
<div class="container">
<h2>
Open Projects
</h2>
</div>
</div>
<div class="project">
<div class = "container-fluid">
<div class="row">
<div class="col-md-6 col-xs-9">
<h3>
Nantucket
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
<div class="col-md-6 col-xs-9">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg">
</div>
</div>
</div>
</div>
<div class="project">
<div class = "container">
<div class="row">
<div class="col-md-6 col-xs-9">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg">
</div>
<div class="col-md-6 col-xs-9">
<h3>
Nantucket
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
</div>
</div>
</div>
<div class="label">
<div class="container">
<h2>
Past Projects
</h2>
</div>
</div>
<div class="project">
<div class = "container">
<div class="row">
<div class="col-md-6 col-xs-9">
<h3>
PAST PROJECT
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
<div class="col-md-6 col-xs-9">
<img class="img- responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
html,body{
margin:0;
background-color:#CDB389;
}
/*This code is for a different html page. Look under the
Residential heading at the bottom of this code*/
/*HOME HOME HOME HOME HOME HOME HOME HOME HOME*/
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:#CDB389;
text-align:center;
margin-bottom:0px;
padding-top:-3px;
}
.menu .row{
padding-top:5px;
padding-bottom:10px;
}
.menu .btn{
color:black;
font-size:20px;
font-weight:900;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder- houston2.jpg");
background-size:cover;
margin-top:-2px;
margin-bottom:-10px;
}
/*LABEL*/
.label{
margin-top:-5px;
background-color:#CDB389;
}
.label h2{
letter-spacing:15px;
font-size:60px;
text-decoration:uppercase;
font-family:cursive;
color:black;
}
/*Services*/
#extend{
padding-bottom:50px;
}
/*FOOTER*/
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
/*RESIDENTIAL RESIDENTIAL RESIDENTIAL RESIDENTIAL*/
.head {
text-align:center;
}
.project .row {
width:100%;
}
.project img {
min-height:300px;
min-width:400px;
}
html,body{
margin:0;
background-color:#CDB389;
}
/*This code is for a different html page. Look under the
Residential heading at the bottom of this code*/
/*HOME HOME HOME HOME HOME HOME HOME HOME HOME*/
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:#CDB389;
text-align:center;
margin-bottom:0px;
padding-top:-3px;
}
.menu .row{
padding-top:5px;
padding-bottom:10px;
}
.menu .btn{
color:black;
font-size:20px;
font-weight:900;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder-houston2.jpg");
background-size:cover;
margin-top:-2px;
margin-bottom:-10px;
}
/*LABEL*/
.label{
margin-top:-5px;
background-color:#CDB389;
}
.label h2{
letter-spacing:15px;
font-size:60px;
text-decoration:uppercase;
font-family:cursive;
color:black;
}
/*Services*/
#extend{
padding-bottom:50px;
}
/*FOOTER*/
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
/*RESIDENTIAL RESIDENTIAL RESIDENTIAL RESIDENTIAL*/
.head {
text-align:center;
}
.project .row {
width:100%;
}
.project img {
min-height:300px;
min-width:400px;
}
You could wrap the images in a div with the overflow:hidden; and set the width:100%; height:auto;
Alternatively you could set your images to be the background image and set them to background-size:cover; this will be responsive.
I figured it out! So, I added the class:
size{
max-width:500px
height:auto;
}
Then I wrapped each of my images in a link and added the img-responsive class to the image.
<div class="col-md-6 col-xs-9">
<a class"size" href="https://www.google.com/">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg"/>
</a>
</div>
This gives me the full image on one side of the screen and allows room for text on the other side. It also keeps the image within the width of the screen. Additionally, it stacks relatively nicely when the screen is shrunk (the stack could be a bit more even/centered). Still have to check mobile responsiveness.
I am so happy.
I am new to this bootstrap. I have a background image which i want to put in the container fluid. How to do it.
This is my code:
<div class="image_outer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
</div>
</div>
</div>
The corresponding classes are
.image_outer{width:100%;margin:0 auto; background:url(Something/something_bg.jpg) repeat-x; height:128px;}
.fl{float:left;}
.fr{float:right;}
.mr30{margin-right:100px; font-family: ee_nobblee,arial;}
.navi a{ font-size:22px; color:#6D6E70; margin-top:50px; float:left; font-weight:normal; font-family:ee_nobblee,arial;}
.navi a:hover { text-decoration:none; color:#858687;}
Try This CSS:
.image_outer {
width:100%;
margin:0 auto;
background:url(Something/something_bg.jpg) repeat-x;
height:128px;
background-position:cover;
}
Use your code like this and I hope this will work for image
.image_outer{width:100%;margin:0 auto;
background:url(../Something/something_bg.jpg) repeat-x;
height:128px;}
I might be wrong, you are floating children. you need to clear the float so that the background takes up the height specified.
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
<div style="clear:both"></div>
</div>