I am attempting to use media queries in my _Layout.cshtml to determine which Nav bar is displayed.
On larger devices I want to display a vertical nav bar using Bootstrap (col-2) and I want to RenderBody() (col-10) with the Horizontal nav bar not displayed.
On smaller devices the Horizontal nav bar is displayed the full width of the screen and RenderBody() would be below.
I'm not sure if the media queries actually work because the following error is displayed.
The "RenderBody" method has already been called.
So my question is how can I conditionally Render based on the size of the screen?
Please note that I'm just trying to piece this together as I go and am by no means an expert. Far from it.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#* #Styles.Render("~/Content/css") *#
#*#Styles.Render("~/Content")*#
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/animate.min.css" rel="stylesheet">
<link href="~/Content/ionicons.min.css" rel="stylesheet">
<link href="~/Content/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/magnific-popup.css" rel="stylesheet">
<link href="~/Content/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/Content/strap4.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="~/Content/style.css" rel="stylesheet">
<link href="~/Content/pure.css" rel="stylesheet">
</head>
<body>
<!--==========================
Top Bar
============================-->
<section id="topbar" class="d-none d-lg-block">
<div class="container clearfix">
<div class="contact-info pull-left">
<i class="fa fa-envelope-o"></i> shipleyswine#yahoo.com
<i class="fa fa-phone"></i> Orders: 1-866-376-8986 (Toll Free) • 740-745-2911
</div>
<div class="social-links pull-right">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</section>
<!--==========================
Header
============================-->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<img src="~/Assets/Images/ssHeader.png" height="40px" width="150px">
</div>
<!-- #nav-menu-container -->
</div>
</header><!-- #header -->
<div id="HorizontalNav" class="container">
<div class="">
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Yorkshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/york.jpg" /><div id="imageText"class="w-100 h-100">Yorkshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Duroc" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/duroc.jpg" /><div id="imageText"class="w-100 h-100">Duroc</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Berkshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/berk.jpg" /><div id="imageText"class="w-100 h-100">Berkshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Exotic" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/exotic.jpg" /><div id="imageText"class="w-100 h-100">Exotic</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Hampshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/hamp.jpg" /><div id="imageText"class="w-100 h-100">Hampshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Other" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/Other.jpg" /><div id="imageText"class="w-100 h-100">Other</div>
</a>
</div>
</div>
</div>
<a href="#">
<div id="salealert" class="alert alert-danger" role="alert">
Summer Pricing, Most Boars up to 50% off!
</div>
</a>
<div id="VerticleNav" class="row">
<div class="col-lg-2 col-md-3 col-sm-3">
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected text-center">Boars</li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/york.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Yorkshire</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/duroc.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Duroc</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/berk.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Berkshire</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/exotic.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Exotic</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/hamp.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Hampshire</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/Other.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Other</div></li>
</ul>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-9">
#RenderBody()
</div>
</div>
<div id="HorizontalNav">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
CSS
#media (min-width: 320px) and (max-width: 480px) {
#HorizontalNav{
display:block;
}
#VerticleNav{
display:none;
}
}
#media (min-width: 481px) and (max-width: 767px) {
#HorizontalNav {
display: block;
}
#VerticleNav {
display: none;
}
}
#media (min-width: 768px){
#HorizontalNav {
display: none;
}
#VerticleNav {
display: inline-block;
}
}
#imageText {
position: absolute;
color: white;
top: 0;
/* left: 0; */
/* right: 0; */
/* bottom: 0; */
/* transform: translate(-50%, -50%); */
font-size: 1rem;
margin-top: 40%;
padding-left:2.5px;
padding-right:2.5px;
}
.breedMenu {
width: 100%;
height: 100%;
max-height: 100%;
}
.breedOption {
width: 16.66%;
max-width: 16.66%;
min-width: 16.66%;
float: left;
height: 100%;
max-height: 100%;
background: center;
background-repeat: no-repeat;
text-align: center;
color: white;
}
.boarlabel {
padding-top: 83px;
padding-bottom: 0px;
font-family: AmericanCaptain, Calibri, sans-serif;
font-size: 14pt;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.breedOption:hover {
cursor: pointer;
color:black;
}
.breedOption a {
text-decoration: none;
color: inherit;
}
.listcontainer{
height:auto;
}
#salealert {
text-align:center;
font-size:large;
margin-top:20px;
}
#salealert:hover {
background-color: #ffe6e6;
}
You can use renderbody once. If you need a second renderbody, you can use RenderSection instead. Simply explained in the link.
https://exceptionnotfound.net/asp-net-mvc-demystified-layout-viewstart-renderbody-and-rendersection/
Related
I am working on a mobile website ( 360x640) .
Firstly, I am not able to fill the empty spaces on the right with text in the talk to astrologer section . I am not able to shift 25 years of text on the right side.
Secondly, I am not able to align font awesome with the text .
Can someone help me in setting margins so that it looks exactly similar to what I want ??
Thirdly , Phone font awesome which I want <i class="fas fa-phone-alt"></i> is not working ,
What do I want to achieve ??
My Frontend
Please help in achieving what I want to !!!!
body {
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
font-size: 30px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(241, 241, 241);
color: orangered;
text-align: center;
font-size: 30px;
}
.experience {
float: right;
}
.orange {
background-color: #f78336;
font-size: 30px;
color: white;
}
i {
color: #f78336;
}
.call-btn {
background-color: #f78336;
padding: 15px;
margin-left: 40px;
width: 300px;
box-shadow: 5px 10px #c8c8c8;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../assets/talk.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Talk to an Astrologer</title>
</head>
<body>
<!-- Search bar-->
<div class ="search-bar sticky-top " >
<ul class="navbar navbar-light bg-light justify-content-end ">
<a class="navbar-brand " href="# ">
<img src="../assets/search.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/filter.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/sort.png " width="30 " height="30 " alt=" ">
</a>
</ul>
</div>
<!--- MAIN SECTION -->
<div class="main mb-3 ">
<h1><b>Talk to an Astrologer</b></h1>
<div class="card flex-row flex-wrap mb-3 mx-3 ">
<div class="card-header border-0 ">
<img src="//placehold.it/200 " width="200 " height ="200 " alt=" ">
</div>
<div class="card-block mx-2 ">
<span style ="float: right; "class ="experience ">25 years</span>
<h2 class="card-title "><b>Arvind Shukla</b></h2>
<p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
<p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
<p class="card-text "><i class="fas fa-money-bill-wave "></i><b>₹100/Min</b></p>
<i class="fas fa-phone " style = color:white></i>Talk on Call
</div>
</div>
</div>
</div>
</body>
</html>
try this one it will work as expected ,
<body>
<!-- Search bar-->
<!--- MAIN SECTION -->
<div class="main mb-3 ">
<h1><b>Talk to an Astrologer</b></h1>
<div class="card ">
<div class="card-header border-0 ">
<img src="//placehold.it/200 " width="200 " height ="200 " alt=" ">
</div>
<div class="card-block mx-2 ">
<div style="display: flex; flex-direction: row; place-content: space-between; width: 100%">
<h2 class="card-title "><b>Arvind Shukla</b></h2>
<span style ="float: right; " class ="experience ">25 years</span>
</div>
<p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
<p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
<p class="card-text "><i class="fas fa-money-bill-wave "></i><b>₹100/Min</b></p>
<div class="btn orange call-btn">
<i class="fas fa-phone " style = color:white></i>
Talk on Call
</div>
</div>
</div>
</div>
</div>
</body>
css ,
body {
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
font-size: 20px!important;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(241, 241, 241);
color: orangered;
text-align: center;
font-size: 20px !important;
}
.experience {
float: right;
}
.orange {
background-color: #f78336;
font-size: 20px !important;
color: white;
}
i {
color: #f78336;
}
.call-btn {
background-color: #f78336;
padding: 15px;
margin-left: 40px;
width: 300px;
box-shadow: 5px 10px #c8c8c8;
}
.card{
border: 1px solid #707070;
display: flex;
flex-direction: row;
flex-flow: row;
place-content: stretch;
justify-content: start;
width: 100%;
padding-bottom: 20px;
}
.card-block{
width: 100%;
}
.card-header{
height: 300px;
width: 300px;
}
for font check wheather you add the font awesome script of install locally the font awasome in you project
Can you try the following code. It is not perfect but its OK i guess.
body {
margin: 0px;
font-size: 30px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(241, 241, 241);
color: orangered;
text-align: center;
font-size: 30px;
}
.orange {
background-color: #f78336;
font-size: 30px;
color: white;
}
i {
color: #f78336;
}
.call-btn {
background-color: #f78336;
padding: 15px;
margin-left: 40px;
width: 300px;
box-shadow: 5px 10px #c8c8c8;
}
.card{
max-width: 750px;
width: auto;
}
.fas,.fa{
margin-right: 10px;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Talk to an Astrologer</title>
</head>
<body>
<!-- Search bar-->
<ul class="navbar navbar-light bg-light justify-content-between">
<h1><b>Talk to an Astrologer</b></h1>
<div>
<a class="navbar-brand " href="# ">
<img src="../assets/search.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/filter.png " width="30 " height="30 " alt=" ">
</a>
<a class="navbar-brand " href="# ">
<img src="../assets/sort.png " width="30 " height="30 " alt=" ">
</a>
</div>
</ul>
<!--- MAIN SECTION -->
<div class="main mb-3 ">
<div class="card flex-row flex-wrap mb-3 justify-content-between" >
<div class="card-header border-0 w-1/4">
<img src="//placehold.it/200 "alt=" ">
</div>
<div class="card-block flex justify-content-between w-3/4 mx-auto">
<span style ="float: right; "class ="experience text-center">25 years</span>
<h2 class="card-title "><b>Arvind Shukla</b></h2>
<p class="card-text "><i class="fas fa-user "></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
<p class="card-text "><i class="fas fa-om "></i>English,Hindi</p>
<p class="card-text "><i class="fas fa-money-bill-wave"></i><b>₹100/Min</b></p>
<i class="fa fa-phone " style = color:white></i>Talk on Call
</div>
</div>
</div>
</div>
</body>
</html>
As you can see in the snippet bellow. I am trying to fit all the content but it is going out on the website, especially on the small devices (iphone x for example), parts of the content are not there. Any idea how to fix this? Thanks for any help as I dont know how to do this but presumebly something with flexbox
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
#media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>
</html>
I think you can accomplish what you are looking for by adding some media queries and adjusting the width and height of the images and icons. I edited your code for a 320px screen, but you can also add one for 768px screens, etc. I also targeted your bigger images more specifically as just using img in your CSS rule, those properties were also affecting your icon images at times.
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img[src$="jpg"]{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
#media (max-width: 475px){
.text h1 {
width: 90%;
}
.icon {
width: 60px;
height: 60px;
right: -30px
}
img[src$="jpg"]{
width:250px;
height:250px;
display: block;
}
}
#media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
}
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>
The navigation bar is at a certain distance away from the top, after scrolling past the navigation-bar, it sticks to the top but unfortunately it's width expands beyond the container(it's defined in). The navigation-bar should retain it's original width, so how do I resolve it? Here's my github link too :- https://github.com/Archiie/MyPortfolio
.affix {
top: 0px;
margin: 0px 20px;
}
.affix + .container {
padding: 5px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
Check Now its working, when it is sticky then it's position fixed so you have to give it width or set left and right position
.affix {
top: 0px;
margin: 0px 20px;
width:1100px;
}
#media (max-width: 1199px)
{
.affix {
width: 900px;
}
}
#media (max-width: 991px)
{
.affix {
width: 680px;
}
}
#media (max-width: 768px)
{
.affix {
left:15px;
right:15px;
width:auto;
}
}
.affix + .container {
padding: 0px;
}
h1, h4 {
text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
margin: 40px 0px;
border-radius: 10px;
background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
font-family: Tangerine, Monospace;
color: white;
}
#head_tag {
font-size: 100px;
height: 300px;
}
#footer_tag {
font-size: 50px;
}
.image {
border-style: solid;
border-radius: 50%;
border-width: 1px;
border-color: #000;
height: 230px;
width: 240px;
}
.img-responsive {
margin: 20px auto;
}
.navbar {
margin: 0px 20px;
z-index: 1;
}
.info {
font-family: Monospace;
font-size: 20px;
background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
border-radius: 10px;
margin: 20px 20px;
padding: 20px 20px;
}
.boxSpacing {
margin: 20px auto;
}
.pics {
height: 300px;
width: 300px;
}
#aboutMe, #portfolio, #contactMe {
font-family: Lobster, Monospace;
font-size: 35px;
color: #6E326F;
}
.centeringIcon {
display: block;
text-align:center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10">
<div class="container main-container">
<div class="row">
<div class="col-md-8">
<h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
</div>
<div class="col-md-4">
<img src="images/Archi.jpg" class="img-responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
<ul class="nav navbar-nav">
<li>About Me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info">
<h3 class="text-center" id="aboutMe">About Me</h3>
<p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
<p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
</div>
<div class="info">
<h3 class="text-center" id="portfolio">Portfolio</h3>
<div class="row">
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
<div class="col-md-6 boxSpacing">
<img src="images/Project_1.png" class="img-responsive pics">
</div>
</div>
</div>
<div class="info">
<h3 class="text-center" id="contactMe">Contact</h3>
<p><b>Here's my contact details:</b></p>
<ul>
<li>Name:- Archita Sundaray</li>
<li>Phone no.:- +91 89514 88208</li>
<li>email address:- archi.sundaray5#gmail.com</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-linkedin centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-github centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-twitter centeringIcon"></i>
</div>
<div class="col-md-1 img-responsive">
<i class="fa fa-bitbucket centeringIcon"></i>
</div>
</div>
</div>
</body>
</html>
I'm using the basic fullscreen carousel from Bootstrap. It's working great, full screen. The issue is I need to add a custom header and footer to it (along with a little bit of text in the center). I want the header and footer to overlap the carousel (as if the carousel is in the background). Is this possible? I've tried playing around with z-index a bit, no success so far.
Here's the code for the carousel.
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
Update 1.0
I already adjust from my template.Hope you learn something from my coding.
HTML
<div class="wrapper">
<div class="nav-bar-area">
<div class="menu">
<div id="text">Menu</div>
<div id="image"><img src="http://www.rcunlocks.com/IMG_0468.PNG" /></div>
</div>
<div class="nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>Contact US</li>
</ul>
</div>
</div>
<div class="container--head">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-tooltip">
<div class="caraousel-tooltip-item active" data-index="0">
<a href="#" class="tooltip-carousel" style="top:100px;left: 100px;padding:5px 10px;background:#f00;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Wicked Sick">
<span class="fa fa-heart"></span>
</a>
<a href="#" class="tooltip-carousel" style="top:120px;left: 400px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="First Blood">
<span class="fa fa-star"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="1">
<a href="#" class="tooltip-carousel" style="top:120px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="top" data-content="NeverMore">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="2">
<a href="#" class="tooltip-carousel" style="top:100px;left: 500px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Pudge">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="3">
<a href="#" class="tooltip-carousel" style="top:20px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="right" data-content="Hello World">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="4">
<a href="#" class="tooltip-carousel" style="top:180px;left: 200px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" >
<span class="fa fa-plus"></span>
</a>
</div>
</div>
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://blogs-images.forbes.com/rogerkay/files/2014/06/dell-background-2.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Dell</h3>
Bring The Game
</div>
</div>
<div class="item">
<img src="http://www.techarena.co.ke/wp-content/uploads/2015/02/acer-on-black-wallpapers_30230_1920x1080.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Acerr</h3>
Just Starting
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://orig08.deviantart.net/3f83/f/2012/097/c/b/hp_in_dark_by_yarinsl45-d4vak5s.png" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Hello World</h3>
The Taste Can't Describe
</div>
</div>
</div>
<!-- Controls -->
</div>
</div>
</div>
<!-- Fontawesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
.body {
background-color: #bbb;
}
.container--head {
background: #BF3E11;
}
.tooltip-carousel {
position: absolute;
z-index: 11;
border-radius: 50%;
}
.caraousel-tooltip-item {
display: none;
}
.caraousel-tooltip-item.active {
display: block;
}
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
.nav-bar-area{
width: 100%;
height: 60px;
background-color: #000;
padding: 0;
margin:0 auto;
position:relative;
}
ul{
margin: 0 auto;
padding: 0;
width: 600px;
height: 60px;
}
ul li{
display:inline;
float:left;
padding: 10px 10px 10px 8px;
margin: 0 3% 0 0;
color: #fff;
cursor:pointer;
line-height: 225%;
}
li:hover{
background-color: #888888;
}
.menu{
display:none;
color:#fff;
font-weight:bold;
}
#text{
float:left;
}
#image{
float:right;
cursor:pointer;
}
#media screen and (max-width: 600px){
.nav-bar-area{
height:auto;
overflow:auto;
}
ul{
width: 100%;
height: auto;
display:block;
overflow: hidden;
}
ul li{
width: 50%;
float:left;
position: relative;
display:block;
margin: -1px;
padding: 10px 0 10px 0;
text-indent: 25px;
border-bottom: 1px solid #888888;
border-right: 1px solid #888888;
}
.nav-bar{
display:block;
}
}
#media screen and (max-width: 480px){
.menu{
display:block;
padding: 20px 0 40px 0;
border-bottom: 1px solid #fff;
}
#text{
margin: 0 0 0 20px;
}
#image{
margin: 0 30px 0 0;
}
.nav-bar{
display:none;
}
.nav-bar{
font-size: 0.8em;
}
}
JS
$(function(){
$('.tooltip-carousel').popover();
$('#carousel-example-generic').on('slide.bs.carousel', function () {
$('.tooltip-carousel').popover('hide');
$(this).find('.caraousel-tooltip-item.active').fadeOut(function(){
$(this).removeClass('active');
});
});
$('#carousel-example-generic').on('slid.bs.carousel', function () {
var index = $(this).find('.carousel-inner > .item.active').index();
$(this).find('.caraousel-tooltip-item').eq(index).fadeIn(function(){
$(this).addClass('active');
});
//alert(index);
});
$('.tooltip-carousel').mouseenter(function(){
$(this).popover('show');
}).mouseleave(function(){
$(this).popover('hide');
});
});
Here is the DEMO.
I'm trying to list some images, and for each image I want to have a caption, with some details, let's say the title, the problem right now is that the width of the caption is relative to the parent div which is normal, but I want it to be relative to the image width, but since I have the class img-responsive on the img I don't know how to achive this. Maybe you guys can help me out.
Here is a live example: http://jsbin.com/cudugize/1/edit?html,css,output
Here is the code
HTML
<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
<div class="thumbnail">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
<div class="caption img-responsive">
<h4 class="text-center">Nice title</h4>
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> usa</p>
</div>
</div>
<div class="thumbnail">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
<div class="caption img-responsive">
<h4 class="text-center">Nice title</h4>
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> usa</p>
</div>
</div>
</div>
CSS
Aditional bootstrap core css
.thumbnail{
position: relative;
width: 100%;
border: none !important;
}
.thumbnail .caption{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}
http://jsbin.com/cudugize/7
please see my demo code, it archived your demand.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc {
text-align:center;
}
.thumbnail {
position: relative;
display:inline-block;
*display:inline;
*zoom:1;
border: none;
margin:0 auto;
padding:0;
}
.thumbnail .caption {
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.50);
width: 100%;
padding: 0px !important;
}
</style>
</head>
<body>
<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
<div class="tc">
<div class="thumbnail">
<a href="url">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
</a>
<div class="caption img-responsive">
<h4 class="text-center">Nice title
</h4>
<p class="text-center">
<a href="#" class="homepage city text-uppercase">
<span class="glyphicon glyphicon-globe"></span>usa</a>
</p>
</div>
</div>
</div>
<div class="tc">
<div class="thumbnail">
<a href="url">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
</a>
<div class="caption img-responsive">
<h4 class="text-center">Nice title
</h4>
<p class="text-center">
<a href="#" class="homepage city text-uppercase">
<span class="glyphicon glyphicon-globe"></span>usa</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
This CSS should do the trick:
.thumbnail {
display: inline-block;
position: relative;
border: none !important;
padding: 0;
}
.thumbnail .caption{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}