I need some help. I need to make adaptive image in footer and to put the picture in right corner. Size of pic is: 150x150 px.
<footer>
<div class="container">
<p class="text-xs-center"> TEXT TEXT TEXT<br>
text text text<br>
<a href="</a> </p>
</div>
</footer>
footer {
position: absolute;
width: 100%;
height: 150px;
background-color: rgb(50, 50, 50);
}
I ask you to help me, with some code. With my old code - was bad responsive.On gadgets with 600 x 1024 display - footer text is superimposed on the image.
I don't actually know the if "text-right" is a really bootstrap class... However, I think that this layout would work.
footer {
width: 100%;
height: 150px;
}
<footer>
<div class="container">
<p class="text-xs-center"> TEXT TEXT TEXT<br>
text text text<br>
</p>
<p class="text-right"><img scr="YOUR IMAGE PATH HERE" /></p>
</div>
</footer>
Class "pull-right" should be mentioned in img tag. Further, bootstrap col classes can be used to place text and image side by side.
The code is below:
HTML
footer {
width: 100%;
height: 150px;
background-color: rgb(50, 50, 50);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container ">
<div class="col-sm-6 col-md-6 col-xs-6">
<p class="text-xs-center text-danger"> TEXT TEXT TEXT<br> text text text<br>
Link
</p>
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
<img src="http://www.fillmurray.com/150/150" alt="image" class="pull-right" /></div>
</div>
</footer>
Related
I use splidejs to create a slider for image and text content. The size of the sliderList (ul) is based on the largest list item (sliderItem --> li).
Each SliderItem consists of a wrapper (item-wrapper), which contains an image and a text. Both the image and the text can be of different length/highness.
Now the SliderItems should be aligned so that each image element is above the text, but the texts are aligned at the bottom of the container (with a dynamic height) and each text starts at the same height. That is, the texts are all placed at the same height at the end of the container and the image should be placed directly above them with a defined margin. Is this somehow possible using SCSS? In case of need I can also use JS to reposition something if needed.
Attached is a mockup of how it should look:
Some code snippet:
HTML
<div class="splide">
<div class="splide__track">
<ul class="splide__list"> //Slider List
<li class="splide__slide"> //Slider Item
<div class="item-wrapper">
<div class="image">
<img/>
</div>
<div class="text">
<h2>Some text</h2>
Some other text
</div>
</div>
</li>
CSS
.splide {
width:100%;
height: 100%;
}
.splide__list {
display: flex;
.splide__slide{
.item-wrapper{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
.image {
img {
width: 100%
height: auto
}
}
.text {
}
}
}
}
If you wanted to solve this placement with CSS then it has grid written all over it. Here's an example of what that solution would look like retaining your HTML structure.
ul {
display: grid;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
grid-auto-columns: 1fr;
list-style: none;
margin: 0;
padding: 0;
}
.splide__slide,
.item-wrapper {
display: contents;
}
.image {
display: flex;
align-items: flex-end;
}
https://jsfiddle.net/yd0or3je/
Notice that the li and .item-wrapper had to be eliminated from the layout using display: contents and unless that slider js thingy is only manipulating the ul scroll position or something, it will probably no longer work after these changes.
Other than that you could use javascript to find the highest .image after the page loads and then apply the same height to all the .image elements.
Or the third option would be to just not use the slider js thingy and write some custom js for the slider while retaining the grid css for the layout.
Hope this helps you.
Your code snippet seems to have lost some material somewhere. However, if I have worked it out correctly, then the code example below I think satisfies the following requirements:
maintains your HTML structure (so it should still work with your
slider?)
aligns the boundaries between images and text
does not require javascript
The approach in the code below is to create a reference line for each image and text pairing which can also be referenced to an outer container. This is done by decoupling the layout flow for the image and the text from its parent using 'position'. Decoupling both elements from their shared parent results in the parent collapsing to an element with 0 height, ie, a "line", because it no longer has any layout content. This "line" can then be referenced back a common ancestor, for all image text pairs, again using 'position'.
.splide {
width:100%;
height: 100%;
}
.splide__list {
list-style-type: none;
display: flex;
flex-direction: row;
/* Establish common reference context */
position: absolute;
top: 50%;
}
.splide__slide {
}
.item-wrapper {
margin-left: 5px;
margin-right: 5px;
width: 20vw;
/* Establish image text pairing parent position reference */
position: relative;
}
.image {
border: 2px solid black; /* If the black border is not required, then remove this property */
padding: 5px;
/* Align the bottom of the image, and center the image */
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
}
img {
width: 100%;
}
.text {
border: 2px solid black; /* If the black border is not required, then remove this property */
padding: 5px;
/* Align the top of the text, and center the text */
position: absolute;
top: 5px;
left: 5px;
right: 5px;
}
.upperGreenBorder { /* If the lime border is not required, then remove this class */
border-left: 2px solid lime;
border-top: 2px solid lime;
border-right: 2px solid lime;
position: absolute;
top: -7px;
bottom: -7px;
left: -7px;
right: -7px;
}
.lowerGreenBorder { /* If the lime border is not required, then remove this class */
border-left: 2px solid lime;
border-bottom: 2px solid lime;
border-right: 2px solid lime;
position: absolute;
top: -7px;
bottom: -7px;
left: -7px;
right: -7px;
}
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="400px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=1">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 1</h2>
<p>Some other text for text number one Some other text for text number one Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="500px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=2">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 2</h2>
<p>Some other text for text number two Some other text for text number two Some other text for text number two</p>
<p>Some other text for text number two</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="200px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=3">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 3</h2>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="300px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=4">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 4</h2>
<p>Some other text for text number four</p>
<p>Some other text for text number four</p>
<p>Some other text for text number four</p>
<p>Some other text for text number four</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="400px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=5">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 5</h2>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="50px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=6">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 6</h2>
<p>Some other text for text number six</p>
</div>
</div>
</li>
</ul>
</div>
You should set the height of all your splide elements to 100%. Inside your splide__slide, set the .image CSS class into height: 60% and .text class height: 40%, or whichever proportion you prefer. Then, turn the .image CSS class into a flex container and set the img element to be align-self: end. I tried matching your HTML and CSS. Here's a working version with imports for SplideJS:
https://jsfiddle.net/opLsgf9v/
Thanks for all your answers. I made it work by some hacky js:
First i need to wait for my document to be fully loaded calling
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
this.calculateImages();
}
});
then i process every image and calculcate the tallest image (get the height of the tallest element in pixels). After this, i move every image by its height difference (difference actuall image to max height image) by applying the height difference with a margin-top. Thats it for me. I guess a bit hacky but it works.
I have the following four inner div container (small picture - text - small picture - text):
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
The CSS for components-circle and inner-component:
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
The problem is, that components-circle and inner-component are overlapping the text which is on the right side of them when I resize the browser, that means the template is not responsive.
How could I insert a line break when the browser is resized or make components-circle and inner-component responsive, so that they do not overlap the corrsponding text on the right side?
Is the content of the "col-sm-12" div overlapping the content of the page, or the text next to the image that is overlapping?
Anyway, you can fix both of these issues in this way, using a "container" or "row" div and adding a css for page resizing.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
.center-text{
text-align: left;
}
#media (max-width: 765px) {
.center-text{
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
You are already using row class so just setting the width of components-circle to 100% (rather than making it static) will work (as bootstrap will handle rest of the responsive stuff).
To keep the aspect ratio of height-width you have to remove height from components-circle and use padding-top. Have a look here to see how it works. (padding-top: 100% gives 1:1 aspect ratio)
Open the below snippet in full-page view and resize to see the effect :)
Though there can be other methods to achieve the same, IMO this one is quite simple and understandable.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
padding-top: 100%;
width: 100%;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
background-size: contain;
}
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</body>
</html>
Update: To keep the inner image at the centre during resize, you have to set it's position to 0px 0px (which is default) and add background-size: contain to the inner-component. This will scale the image to fit the parent. See the updated snippet above!
To make a breakpoint that is hidden on larger viewports, you can use these CSS classes with the line break:
.d-md-none To make it invisible on anything larger than md sized screens.
.d-sm-none To hide it on anything larger than sm sized screens.
You may also need to put the row inside a container.
This is what it would look like: <br class="d-md-none">
If you want a line break without using a <br> element, check out this guide.
I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of the card, so no matter what comes before, the buttons are always aligned.
Furthermore, I want to separate the cards between rows, but I haven't been able to find a solution yet, because if I change margins it only applies in the last row.
Here is my code:
<div class="row my-flex-card">
<div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body inline-block">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a class="btn btn-success" href="#!/women/details/{{woman._id}}">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
My CSS:
.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}
.row {
margin-bottom: 50px;
}
That .row feature isn't working.
This is how my website looks like right now:
Thank you :)
.parent {
display: flex;
flex-direction: row;
padding: 10px;
}
.parent .child {
padding-right: 10px;
flex-grow: 1;
width: 33%;
position:relative;
}
.parent .child .content {
height: 100%;
box-shadow: 0 0 1em gray;
}
.content img{
background-size:cover;
width:100%;
}
.content h3,p{
padding:10px;
}
.content input{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}
<div class="parent">
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 3</h3>
<p>text text text text text text text text text text text text text text text text text text text</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 2</h3>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 1</h3>
<p>text text text text text text text text text text text text tex</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
</div>
make the box class with position relative :
.boxClassName{
position:relative
}
then make the button class with the following :
.buttonClassName{
position:absolute;
bottom:0;
}
I am working on a site, of which has to have a description section. I am trying to achieve this by having two Bootstrap columns, one sized 8 and then another sized 4 to make sure it is equal to 12. Then in the column which is 8, I want to have two columns inside, to achieve one column of text on the left and then a second column of text on the right.
There is just a problem, as it doesn't seem to be working and whenever I try to do this, it just creates a second column underneath the first one inside of the 8 column.
I have attached an image to make it easier to see what I got and what I am trying to achieve. Any help is much appreciated.
Image of current situation:
What I am trying to achieve:
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
<div class="leftContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
</div>
<div class="rightContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
Your left and right DIV's wrap the Bootstrap col-md-6 columns so they no longer float next to each other. Also, always put nested col-*s inside another row so the padding is correct..
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img />
</div>
<div class="row">
<div class="col-md-6">
<div class="leftContDesc">
<img />
</div>
</div>
<div class="col-md-6">
<div class="leftContDesc">
<p>
</p>
</div>
</div>
</div>
<div class="partLineDesc2">
<img/>
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
</div>
Demo: http://codeply.com/go/yRQum3xKKY
It seems your bootstrap columns are all over the place.
You really need to wrap everything you're trying to split into columns into an overhead div that way you're saying that your main container is taking up 12 columns of that grid then you decide which of those 12 the inside columns need to take up.
Quick mock-up below.
---
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
<div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="securInfo">
</div>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
The idea of this is to have a responsive header with text and an image element, which sit on a fixed background image.
I've tried to do this with bootstrap columns, which works on desktop to come out the way I want it. On smaller devices however, the bootstrap media queries do exactly what they are supposed to do and break the columns up to be displayed below each other.
I am out of ideas for this. I know I need to fix the image element somehow to stay consistently on the bottom end of the container, but since the entire thing is responsive I have no idea how to accomplish that.
Here is what I have so far, but this is not the solution. I appreciate any suggestions.
<section class="section swatch-black section-text-shadow section-inner-shadow">
<div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left element-normal-top element-normal-bottom">
<h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
<strong>More Text </strong> </h1>
<p class="lead"> Even more text </p>
learn more
contact us </div>
<div class="col-md-6 text-right">
<img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
</div>
</div>
</div>
</section>
you can set up your own column structure. Here's an example that I made for you real quick:
http://jsfiddle.net/97wswqvr/
this will need more work obviously, depending on the rest of your header text/buttons etc... but its a good place to start
html
<header>
<div class='content col col-1-2'>
<div>
text text text
</div>
<div>
text text text
</div>
<div>
text text text
</div>
</div>
<div class='col col-1-2 img'>
<img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
</div>
</header>
css
html,body {
margin: 0;
}
header {
background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
text-align: center;
}
.content {
color: white;
padding: 40px 0;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col-1-2 {
width: 45%;
}
.img {
}
img {
width: 70%;
}