I have a div (hover) that overlaps a image on hovering, it works perfectly until now. Inside that div I have a text (title) and another div (details). The height of the .hover divis variable, and I need to put the details div in the bottom of the parent div (.hover) and the title at the top. Next is the HTML structure:
<div class="grid-item">
<img class="Movieimg" src="img.jpg">
<div class="hover">
<div class="title">The title</div>
<div class="details pull-right">
<a class="btn btn-danger btn-xs nzbdetails" href="" target="_self" data-toggle="tooltip" data-placement="left" title="Details">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
<a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB">
<i class="fa fa-download" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
And the current CSS is this one:
.grid-item img{
width:150px;
}
.grid-item {
position:relative;
}
img:hover{
cursor: pointer;
cursor: hand;
filter:blur(5px);
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
.grid-item .hover {
display:none;
position:absolute;
bottom:0;
width: 100%;
}
.details a{
margin-bottom: 5px;
margin-top: 80%;
}
.grid-item:hover .hover {
display:block;
height: 100%;
}
.title{
text-align:center;
width:calc(100% - 10px);
position:absolute;
left:5px;
}
Also, I'm using Bootstrap 3, so maybe there's a class to achieve this?
Although your question wasn't quite clear to me but I think this is what you wan't to achieve. I have just used the bootstrap grid-layout to get the proper grid structure. I found some of your css is unnecessary so removed these blocks as you can achieve the desired effect without using the css rather bootstrap grid system should be sufficient.
The removed css blocks
.title{
text-align:center;
width:calc(100% - 10px);
position:absolute;
left:5px;
}
margin-top: 80%;
.grid-item img{
width:150px;// inserted class="img-responsive in place of it
}
Working code snippet
.grid-item {
position:relative;
}
img:hover{
cursor: pointer;
cursor: hand;
filter:blur(5px);
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
.grid-item .hover {
display:none;
position:absolute;
bottom:0;
}
.details a{
margin-bottom: 5px;
}
.grid-item:hover .hover {
display:block;
height: 100%;
}
/*.title{
text-align:center;
width:calc(100% - 10px);
position:absolute;
left:5px;
}*/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="grid-item">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img class="Movieimg img-responsive" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg">
</div>
<div class="hover col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-9 col-xs-offset-3">
<div class="row">
<div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="title">The title</div>
</div>
</div>
<div class="row">
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a class="btn btn-danger btn-xs nzbdetails" href="" target="_self" data-toggle="tooltip" data-placement="left" title="Details">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
<a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB">
<i class="fa fa-download" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
I am trying to create clickable tiles (box shaped) on dashboard.
Problem 1: I tried using flexbox but vertical alignment didnt work for me. so I tried using padding-top. What I am looking for is that the tiles should have vertically centered icons and text which should also be maintained responsively (Bootstrap Used).
div.wrapper{
height:150px;
padding:20px;
padding-top:30%;
border:1px solid black;
margin:auto;
text-align:center
}
Using padding-top doesnot work responsively. On decreasing the screen width, text and icon comes out of the tile. Using line-height equal to box height makes multiline text go way out of the tile.
Problem 2: for making full tile clickable, I tried using display:block on my anchor tag when it was inside the div
<div class="col-md-2 button-col">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Manage Items
</div>
</div>
css:
a.mybutton{
font-weight:bold;
text-decoration:none;
font-family:Arial;
display: block;
}
but full tile didnot become clickable. So I placed anchor tag outside the div.
Here is my present layout:
<div class="container">
<div class="row">
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Click for Production Calculation Chart
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Production Calculation Chart
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile Number 3
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
This is Tile 4
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile 5
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile 6 Text
</div>
</a>
</div>
<!-- And Many More Tiles Will Come and make more rows -->
</div>
</div>
Here is my current css:
div.button-col{
padding:2rem;
}
div.wrapper{
height:150px;
padding:20px;
border:1px solid black;
margin:auto;
text-align:center
}
div.wrapper:hover{
background-color:blue;
cursor: pointer
}
div.wrapper i.fa{
color:#438EB9;
}
div.wrapper:hover i.fa {
color:white;
}
a.mybutton{
font-weight:bold;
text-decoration:none;
font-family:Arial;
}
a.mybutton:hover
{
color:white;
}
Finally a solution that worked perfect for me. Please suggest if this is the best solution? or we can do something better
.button-col{
display: table;
width: 100%;
height: 150px; /* for demo only */
border: 1px solid black;
margin-bottom:20px;
}
.centeralign{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.contentouter{
width:100%;
height:100%;
display: inline-block;
vertical-align: top;
}
div.button-col:hover, div.button-col:hover a{
background-color:blue;
color:white;
}
.icon{
margin-top:30px;
margin-bottom:10px;
}
.content
{
display: table;
width: 100%;
height: 70px;
}
.contentinner{
display: table-cell;
text-align: center;
vertical-align: middle;
}
a.my-button
{
font-weight:bold;
text-decoration:none;
}
HTML:
<div class="col col-sm-2 button-wrapper">
<a href="my_url" class="my-button">
<div class="button-col">
<div class="centeralign">
<div class="contentouter">
<div class="icon">
<i class="fa fa-gear fa-2x"></i>
</div>
<div class="content">
<div class="contentinner">
Items
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col col-sm-2 button-wrapper">
<a href="my_url" class="my-button">
<div class="button-col">
<div class="centeralign">
<div class="contentouter">
<div class="icon">
<i class="fa fa-gear fa-2x"></i>
</div>
<div class="content">
<div class="contentinner">
Click for Production Calculation Chart
</div>
</div>
</div>
</div>
</div>
</a>
</div>
Answer to Problem 1:
Try setting the style to the link 'a' element and removing manual positioning and user vertical-align property instead:
div.wrapper{
border: 1px solid black;
padding: 10px;
text-align: center;
}
div.wrapper a{
display: inline-block;
vertical-align: middle;
}
I've also removed the <br> from the HTML:
<div class="col-md-2 button-col">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
Manage Items
</div>
</div>
If you still want a <i> and <a> each to set in their own lines then wrap <i> with <div> and it should get vertically and horizontally centred.
Notice that a proper display type like inline-block is required to get vertical center working.
See it in action https://jsfiddle.net/74wg2za6/
Answer to Problem 2
To get the whole tile clickable simply wrap your whole wrapper div with <a> instead of making text "Manage Items" only clickable, see it here
https://jsfiddle.net/kr45qoa1/
I just leveraged the <a> tag up to wrap all <div>, <i> and text.
Hope this is what you are looking for.
Can you try that :
<!DOCTYPE html>
<html>
<head>
<script src='js/fontawesome-all.min.js'></script>
<style>
div.button-col{
height:150px;
line-height: 150px;
width: 100%;
margin: 20px auto;
text-align:center;
}
a.mybutton{
width: 90%;
display:inline-block;
padding: 20px;
line-height: 20px;
border:1px solid black;
font-weight:bold;
text-decoration:none;
cursor: pointer;
}
a.mybutton:hover {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 button-col">
<a href="my_url" class="mybutton">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Click for Production Calculation Chart
</a>
</div>
</div>
</div>
</body>
</html>
When I Zoom the page Giving more text , Text is coming out of the box and Image icons are moving out.I am putting two screen shots, 1st Image is what I am getting the output after coding the below code and
2nd Image is excepted output
Please help me in this Thanks in advance
This is Css code,When I Zoom the page, Text is coming out of the box and Image icons are moving out.
.flex-container{
display: flex;
overflow-x:auto;
}
.officeflex{
margin: 10px;
padding: 20px;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.d-flex.align-items-start.summary {
display: flex;
flex-direction: row;
justify-content:space-between;
margin:auto;
max-width:1170px;
width:100%;
}
.align-items-center{
.size{
font-size: 12px;
}
}
.office-address-heading{
.Address{
color:grey;
font-size: 12px;
}
}
.office-address-details{
.mr-2{
color: rgb(0, 195, 255); font-size: 20px
}
}
.profile-details{
margin-left:15px;
padding:40px;
.name{
font-size:12px;
line-height:22px;
font-weight: 500;
}
.designation{
font-size:12px;
line-height:25px;
font-weight: 400;
}
.phone{
font-size:12px;
font-weight: 100;
}
}
.btn{
font-size: 12px !important;
background-color: #0076C8;
color: #FFFFFF;
}
This is HTML code,When I Zoom the page, Text is coming out of the box and Image icons are moving out.
<div class="row">
<div class="col-sm-12">
<div class="profile-summary">
<b>Profile summary</b>
</div>
<div class="d-flex align-items-start summary1" style="margin-bottom: 10px;background-color: #fff;">
<app-image [imagesrc]="imagePath" style="width: 150px;max-height: 150px;clip-path: square(22px at center);"
class="col-2 mr-3 d-none d-sm-block" alt="..."></app-image>
<i (click)="inputFile.click()" style="color : white;left: 165px;
position: absolute; top: 28px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
<div class="col-5 profile-details">
<div class="col-sm">
<span class="name">
<b style = "color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}} {{myprofile?.LastName}}</b>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Role}} </p>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
</span>
</div>
</div>
<div>
<div class="col-12 ">
<div class="office-address-heading">
<p class="Address">Office Address</p>
</div>
<div class="d-flex align-items-center">
<!-- <i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> -->
<address class="mb-0 size">
{{myprofile?.OfficeAddress}}
</address>
</div>
</div>
<hr />
<div class="col-sm">
<div class="office-address-heading">
<p class="Address">Communication Details</p>
</div>
<div class="d-flex align-items-center office-address-details">
<i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
<div><a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}</a></div>
<span class="d-flex align-items-center mail office-address-details">
<i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
<div>
<a style="color: black;" href="mailto:rafael.cepeda#lpl.com">{{myprofile?.Email}}</a>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
[1]: https://i.stack.imgur.com/qc2ci.png
[2]: https://i.stack.imgur.com/ZYK1a.png
for the image and the icon take an outer div to your image and the icon. and apply this css to them .
.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px; }
.outer-div-for-the-imgae-icon img{height:100%; width:100%; object-fit:cover;}
.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px; color:green; }
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head>
<div class="outer-div-for-the-imgae-icon">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"/>
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
</div>
How can I get my "Meet our staff" page more responsive for phones? It's not looking good, having the items all the way to the left with lot of content left to use in the right spot.
I haven't tried much, as I really don't know what I can do.
Codepen here:https://codepen.io/audn/pen/EvNMvO?editors=1100
CSS:
.bg-white{
background-color:white;
height: 216px;
border: 1px solid #ddd;
width: 180px;
display: inline-block;
margin-top:20px;
margin-right:20px;
float:left;
}
.username{
color:black;
font-weight:900;
}
.workspace{
font-size:11px;
color:#999;
}
.contact{
background-color:#1798e5;
display:inline-block;
margin-top:12px;
color:White;
border-radius: .3em;
padding: 6px 10px;
font-size:13px;
text-align:center;
}
.icons{
font-size:16px;
margin-top: 20px;
}
.contact:hover{
background-color:#1765e5;
cursor:pointer;
}
.avatar1{
border-radius:999px;
margin-left:auto;
margin-right:auto;
position:relative;
border: 5px solid white;
width:90px;
height:90px;
}
HTML
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<!--
audn
--><div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<!--
audn
--><div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<!--
audn
-->
You can use media-queries for make your html more responsive. Use the width of screen for resize your "bg-white", like "margin-left: 10%; width: 90%", when load site in phones (you set the size of screen in css)
Look more here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Using flex.
Codepen: https://codepen.io/pandalism1/pen/EvZKXm
JS Fiddle
#media (max-width: 400px){
.bg-white {
width: 100% !important;
}
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.bg-white{
background-color:white;
height: 216px;
border: 1px solid #ddd;
margin: 10px;
width: 200px;
}
.username{
color:black;
font-weight:900;
}
.workspace{
font-size:11px;
color:#999;
}
.contact{
background-color:#1798e5;
display:inline-block;
margin-top:12px;
color:White;
border-radius: .3em;
padding: 6px 10px;
font-size:13px;
text-align:center;
}
.icons{
font-size:16px;
margin-top: 20px;
}
.contact:hover{
background-color:#1765e5;
cursor:pointer;
}
.avatar1{
border-radius:999px;
margin-left:auto;
margin-right:auto;
position:relative;
border: 5px solid white;
width:90px;
height:90px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
<div class="bg-white">
<center>
<img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
<div class="username">
audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
</div>
<div class="workspace">
Administrator
</div>
<div class="contact" data-target="#audn-contact" data-toggle="modal">
<i class="fa fa-envelope" aria-hidden="true"></i> Message
</div>
</center>
</div>
</div>
</body>
You could add a wrapper element, say a section, around the 3 divs with a class of bg-white. Add a style of text-align: center to center the 3 .bg-white divs within their section container.
Then, add a media query that will allow you to style the .bg-white divs at a certain screen/device width. Let's choose an arbitrary width of 640px.
At this break point, you can change the width of the .bg-white divs from their original width of 180px to 100% and make them display: block instead of display: inline-block so that they take up the entire width of the page and each will sit on it's own line.
These are the CSS changes you'd need to make this work.
.bg-white {
background-color:white;
height: 216px;
border: 1px solid #ddd;
width: 180px;
display: inline-block;
margin-top:20px;
margin-right:20px;
/* float: left; */
}
section {
text-align: center;
}
/* place at the bottom of your CSS file, after all other rules */
#media (max-width: 640px)
{
.bg-white {
width: 100%;
display: block;
}
}
Don't forget to wrap your 3 .bg-white divs in a section container so that you can center them within this parent container.
These changes will give you 3 .bg-white divs that are centered within their parent container when your users view your site on their computers/laptops, and will show the same markup but with different, mobile optimized styles on mobile devices (because of the media query styles getting picked up when device width <= 640px).
Screenshots of what these added CSS rules and the addition of the section container would do for you.
Desktop
Mobile
I am making a website for a project. I am having some issues making it "compatible" with any kind of phone, in the sense that everything that is on the website is extremely small, and some of the things have to be zoomed in on to read what it says.
This is my current code:
body, html {
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;
}
#author__image {
width: 125px;
height: 125px;
border-radius: 50%;
border: 5px solid white;
margin-bottom: 10px;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: .5s;
}
#profile__name {
font-family: 'Montserrat', sans-serif;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: .8s;
}
#profile__asset {
color: #CCCCCC;
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 18px;
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: 1.1s;
}
.header img {
margin-top: 35vh;
}
.profile__links {
-webkit-animation-duration: 1.5s;
-webkit-animation-delay: 1.4s;
}
button {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 18px;
margin: 15px 5px 5px 5px;
background: white;
border: none;
cursor: pointer;
}
#twitter {
color: #55acee;
background: white;
border: white 2px solid;
}
#linkedin {
color: #007cb7;
background: white;
border: white 2px solid;
}
#github {
color: #333333;
background: white;
border: white 2px solid;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Hind:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Test Website</title>
<div class="fluid-container">
<div class="row">
<section class="module parallax parallax-1">
<div class="container header">
<div class="col-12 text-center">
<img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
</div>
<div class="col-12">
<h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
</div>
<div class="col-12">
<p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
</div>
<div class="col-12 text-center animated fadeIn profile__links">
<button id="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</button>
<button id="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</button>
<button id="github">
<i class="fa fa-github" aria-hidden="true"></i>
</button>
<button id="email">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</button>
</div>
</div>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.js"></script>
You need to add a meta tag in the head tag of your HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
You'll probably want this in your CSS as well:
#-ms-viewport{
width: device-width;
}
You should have something similar to class="col-sm-12" instead of class="col-12". Check out w3 schools bootstrap: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
You should correct the class:fluid-container with container-fluid
That is at least the first error
You also need to wrap cols inside the row class. Take a look at this edited code:
<div class="container-fluid">
<div class="row">
<section class="module parallax parallax-1">
<div class="container header">
<div class="row">
<div class="col-md-12 text-center">
<img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
</div>
<div class="col-md-12">
<h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
</div>
<div class="col-md-12">
<p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
</div>
<div class="col-md-12 text-center animated fadeIn profile__links">
<button id="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</button>
<button id="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</button>
<button id="github">
<i class="fa fa-github" aria-hidden="true"></i>
</button>
<button id="email">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</section>
</div>