I have problem with 3 object in one row there is text between two images on the desktop it show this http://www.part.lt/img/d3aabc6dea1cafd939b9cda8152403a5633.jpg on mobile looks great, i need solution any help ?
my code:
<div class="pull-left hidden-xs">
<img src="images/head_window.png" class="img-responsive">
</div>
<div class="header_title">
<h2 class="align-right">åpnes i<br/>
eller<br/>
åpne ut
</h2>
</div>
<div class="pull-right hidden-xs">
<img src="images/head_window2.png" class="img-responsive">
</div>
css
.header_title {
margin:90px auto 0px;
width: 32%;
text-align: center;
padding: 0px;
}
.header_title h2 {
font-family: 'Arimo', sans-serif;
font-size: 73px;
color: #004657;
}
Try to add columns since you using boostrap.
<div class="col-sm-5">
<div class="pull-left hidden-xs">
<img src="images/head_window.png" class="img-responsive">
</div>
</div>
<div class="col-sm-2">
<div class="header_title">
<h2 class="align-right">åpnes eller åpne ut</h2>
</div>
</div>
<div class="col-sm-5">
<div class="pull-right hidden-xs">
<img src="images/head_window2.png" class="img-responsive">
</div>
</div>
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
To change the color like this:
I don't seem to find how to do it anywhere.
If you want to apply the same color style to all of your cards you can do something like this:
.ui.card,
.ui.cards>.card {
background-color: #D9499A;
}
The card is divided into 3 div elements: .image, .content, and .extra.content. If you want to change the colors individually do something like:
.ui.card>.content,
.ui.cards>.card>.content {
background-color: #D9499A;
}
.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
background-color: #D9499A;
}
Check this example Fiddle out:
HTML
<div class="ui card kristy">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 22 Friends
</a>
</div>
</div>
<div class="ui card matthew">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</div>
<div class="content">
<a class="header">Matthew</a>
<div class="meta">
<span class="date">Joined in 2015</span>
</div>
<div class="description">
Matthew is an in interior designer living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 47 Friends
</a>
</div>
</div>
<div class="ui card molly">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</div>
<div class="content">
<a class="header">Molly</a>
<div class="meta">
<span class="date">Joined in 2010</span>
</div>
<div class="description">
Molly is a personal assistant living in Paris.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 12 Friends
</a>
</div>
</div>
CSS
.ui.card {
display: inline-block;
margin: 10px;
}
.ui.card,
.ui.cards>.card {
background-color: #5C5D5F;
color: white;
}
.ui.card.matthew {
background-color: #2B4B64;
}
.ui.card.kristy {
background-color: #253E54;
}
.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
color: white;
}
You can give an id for the object and then set the color with CSS, eg:
#header-blue{
background-color: #1A3E6E;
}
I have a list which looks like this:
https://codepen.io/Insane415/pen/QgbQvv
but somehow the columns aren't breaking correctly when resizing the window. I want to keep it readable when someone access my page with a smartphone or other small devices.
Any help would be appreciate
(reduced code)
HTML
<ol class="product-list">
<div class="row">
<div class="col-md-3">
<li>
<div class="row vertical-center">
<div class="col-lg-4 col-md-12 col-xs-12 text-right">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
</div>
</li>
<li>
<div class="row vertical-center">
<div class="col-lg-4 col-md-12 col-xs-12 text-right">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
</div>
</li>
</div>
<div class="col-md-6 large-image-holder">
<img class="image-large" src="http://via.placeholder.com/500x400"/>
</div>
<div class="col-md-3">
<li>
<div class="row vertical-center">
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="col-lg-4 col-md-12 col-xs-12 text-left">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
</div>
</li>
<li>
<div class="row vertical-center">
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="col-lg-4 col-md-12 col-xs-12 text-left">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
</div>
</li>
</div>
CSS
body {
counter-reset: counter;
}
.circle-number {
counter-increment: counter;
}
.circle-number:after {
content: counter(counter);
}
.product-list{
padding-left: 50px;
padding-right: 50px;
}
.product-description{
display: block;
}
img{
margin-top: 15px;
}
li{
/*display: inline-block;*/
list-style-type: none;
border-bottom: 2px solid #47c9e5;
padding-bottom: 20px;
margin-top: 10px;
}
.large-image-holder{
text-align: center;
object-fit: cover;
}
.image-large{
object-fit: cover;
width: 100%;
}
.circle{
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #47c9e5;
max-width: 70px;
max-height: 70px;
}
.circle-number{
font-size: 45px;
color: white;
}
.vertical-center{
display: flex;
align-items: center;
justify-content: center;
}
.image-holder{
text-align: center;
}
li:last-child{
border-bottom: none;
}
I would like to have all my .element at the same height and the image vertical align middle if it's too small to be full size.
I tried so many things but I can't find the solution
.element {
border: 10px solid #e6e6e6;
margin-bottom: 20px;
}
.element .inner {
padding: 15px;
}
.element .inner p {
margin-bottom: 5px;
text-align: center;
}
.element a {
background-color: #424753;
color: #fff;
display: block;
height: 30px;
padding-top: 3px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
</div>
You can add display: flex, flex-direction: column and flex: 1 on element, inner and col-3. To make img centered you can use margin-top and margin-bottom auto.
.col-3,
.element,
.inner {
display: flex;
flex-direction: column;
flex: 1;
}
.element {
border: 10px solid #e6e6e6;
margin-bottom: 20px;
}
.element .inner {
padding: 15px;
}
.element .inner p {
margin-bottom: 5px;
text-align: center;
}
.element a {
background-color: #424753;
color: #fff;
display: block;
height: 30px;
padding-top: 3px;
text-align: center;
}
.element img {
margin-top: auto;
margin-bottom: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
</div>
You can use the new Bootstrap 4 flexbox utilities and reduce all the extra CSS..
http://www.codeply.com/go/LBkyWJzTrT
<div class="row">
<div class="col-3">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
<div class="col-3">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
<div class="col-3">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
<div class="col-3 align-items-center">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
</div>
http://www.codeply.com/go/LBkyWJzTrT
Do you want like this, just added position styling. But with this you also have to write media-query styling.
.element {
border: 10px solid #e6e6e6;
margin-bottom: 20px;
height: 225px;
position: relative;
}
.element .inner {
padding: 15px;
}
.element .inner p {
margin-bottom: 5px;
text-align: center;
}
.element a {
background-color: #424753;
color: #fff;
display: block;
height: 30px;
padding-top: 3px;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
</div>
I am trying to add section seperator using border as shown in the image. Any help for how to do this is much appreciable. I dont know is there any materialized component already available for the same or not?
Myfiddle : https://jsfiddle.net/fcvr8oxq/
Image demo :
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
</body>
please try this one:
.row
{
border:5px solid #42a5f5;
margin-top:10px;
}
DEMO
You can use the following HTML:
<div>
<h1><span>Div title</span></h1>
</div>
With the following CSS:
div{
border: 1px solid #000;
width: 200px;
height: 200px;
}
div h1{
text-align: center;
margin-top: -10px;
height: 20px;
line-height: 20px;
font-size: 15px;
}
div h1 span{
background-color: white;
}
DEMO
Please Try this one:
img {
outline: 1px solid white;
outline-offset: -4px;
}
DEMO
IE9&10 do not support the outline-offset property, but otherwise support is good:http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://jsfiddle.net/ivinraj/2nj1qn3h/1/