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
Related
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>
I have a few divs that act as lists/buttons on my page.
Each div contains an icon and a text.
I need to keep these 'buttons' in the center of the page but at the same time, I have to align the icons and texts under eachother.
So all the icons are under eachother AND all the texts are under eachother.
This is what I have so far:
code
https://jsfiddle.net/sy21m4dq/
.list{
width:100%;
text-align:center;
}
.list-item{
display:inline-block;
width:250px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">
<div class="list-item">
<i class="fa fa-user" aria-hidden="true"></i> Account
</div>
<div class="list-item">
<i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN
</div>
<div class="list-item">
<i class="fa fa-star" aria-hidden="true"></i> freedback
</div>
<div class="list-item">
<i class="fa fa-question" aria-hidden="true"></i> Help
</div>
</div>
This is what I am looking to achieve:
could someone please advice on this?
Thanks in advance.
I'd improve your markup structure and leverage a CSS layout option, such as display table, among others.
My suggestion is to have additional layers of markup for the various CSS layout concerns you have / need.
<div class="list">
<div class="list-container">
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-user" aria-hidden="true"></i></div>
<div class="list-item-cell">Account</div>
</div>
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-star" aria-hidden="true"></i></div>
<div class="list-item-cell">freedback</div>
</div>
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-question" aria-hidden="true"></i></div>
<div class="list-item-cell">Help</div>
</div>
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-sign-in" aria-hidden="true"></i></div>
<div class="list-item-cell">Account LOGIN</div>
</div>
</div>
</div>
In this way, you can leverage the type of layout styles you want in a cleaner fashion. Your markup is your skeleton. If you have too few bones, your design will be more limited.
.list{
width:100%;
text-align:center;
}
.list-container {
display: table;
max-width: 400px;
margin: 0 auto;
}
.list-item{
display: table-row;
width:250px;
}
.list-item-cell {
display: table-cell;
}
.list-item-cell:first-child {
padding-right: 10px;
width: 30px;
}
There's a few things going on that I will explain, but the below snippet works.
You had the divs with id="list-item", which was a typo. They needed to be class="list-item".
You had the .list-item as inline-block, but really they should be block, and the container (the .list div) should be set to the 250px width.
A little icing on the cake to make the icons / text really line up was to apply some width to the icons (.list-item .fa).
body{
text-align: center;
}
.list {
display: inline-block;
width: 150px;
}
.list-item {
display: block;
width: auto;
text-align: left;
}
.list-item .fa {
width: 30px;
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">
<div class="list-item">
<i class="fa fa-user" aria-hidden="true"></i> Account
</div>
<div class="list-item">
<i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN
</div>
<div class="list-item">
<i class="fa fa-star" aria-hidden="true"></i> freedback
</div>
<div class="list-item">
<i class="fa fa-question" aria-hidden="true"></i> Help
</div>
</div>
Add a fixed width to the icons
i {
width: 20px;
text-align: center;
}
Make the list an inline-flex-container with columns-display
Center the whole box with either text-align-center or flex
https://jsfiddle.net/qw2f3ojt/
I have a div with three divs inside of different width. when my window size changes it is overlapping each other.How do I make content remain without overlapping when window size changes.
Here is my code.
#topBarContainer{
background-color: blue;
}
#topBarLeft{
width: 14%;
text-align: center;
}
#topBarMiddle{
width: 26%;
text-align: center;
}
#topBarRight{
width: 60%;
text-align: right;
}
.topBar {
margin-right: -4px;
text-align: center;
display: inline-block;
padding-top: 5px;
padding-bottom: 3px;
}
<div id="topBarContainer">
<!--TopBar-->
<div id="topBarLeft" class="topBar">
<input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
</div>
<!--Top Bar Middle-->
<div id="topBarMiddle" class="topBar">
<div class="searchBoxContainer">
<i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon"> </i>
<input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
</div>
</div>
<!--Top Bar Right-->
<div id="topBarRight" class="topBar">
<div>
<div class="loginRow">Hi{{loginName()}}</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="emailIcon()" class="iconRow" >
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</div>
It is looking good with normal window when I resize window it is overlapping all.leftBar takes 14%and middle bar takes 26% and rest for the right container.
I am spenting days to fix this. I need to align all so that all 3 sections display in the same line.
you can use display:flex from flexbox
body {
margin: 0
}
#topBarContainer {
background-color: blue;
display: flex;
}
#topBarLeft {
width: 14%;
text-align: center;
}
#topBarMiddle {
text-align: center;
background: red;
width: 35%
}
#topBarRight {
text-align: right;
background: green;
flex: 1
}
#topBarRight > div {
display: inline-flex
}
.topBar {
text-align: center;
padding-top: 5px;
padding-bottom: 3px;
}
#topBarRight >div:last-of-type {
text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id="topBarContainer">
<!--TopBar-->
<div id="topBarLeft" class="topBar">
<input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
</div>
<!--Top Bar Middle-->
<div id="topBarMiddle" class="topBar">
<div class="searchBoxContainer">
<i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon"> </i>
<input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
</div>
</div>
<!--Top Bar Right-->
<div id="topBarRight" class="topBar">
<div>
<div class="loginRow">Hi{{loginName()}}</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
<i class="fa fa-trash"></i>
</div>
<div ng-show="canMoveToFolder()" class="iconRow" ng-mouseover="newIcon = true" ng-mouseleave="newIcon = false"> <i class="fa fa-folder-o"> </i>
<div ng-if="newIcon" id="newItemOptions">
<label class='newItemLabel' ng-click="moveMessageToFolder(3)">Inbox</label>
<label class='newItemLabel' ng-click="moveMessageToFolder(4)">Sent</label>
</div>
</div>
</div>
</div>
</div>
I'm not sure if it is what you are looking for but if you put your searchBoxContainer in display:flex; it shud solwe the problem cause it puts your searchBoxIcon in front of the searchBox it self
you have to pu in your css
.searchBoxContainer{
display:flex;
}
#topBarContainer{
background-color: blue;
}
#topBarLeft{
width: 14%;
text-align: center;
}
#topBarMiddle{
width: 26%;
text-align: center;
}
#topBarRight{
width: 60%;
text-align: right;
}
.topBar {
margin-right: -4px;
text-align: center;
display: inline-block;
padding-top: 5px;
padding-bottom: 3px;
}
.searchBoxContainer{
display:flex;
}
<div id="topBarContainer">
<!--TopBar-->
<div id="topBarLeft" class="topBar">
<input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
</div>
<!--Top Bar Middle-->
<div id="topBarMiddle" class="topBar">
<div class="searchBoxContainer">
<i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon"> </i>
<input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
</div>
</div>
<!--Top Bar Right-->
<div id="topBarRight" class="topBar">
<div>
<div class="loginRow">Hi{{loginName()}}</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="emailIcon()" class="iconRow" >
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</div>
Why are all elements moved right with that negative margin on the .topBar class? I would just erase that, and add box-sizing: border-box; to .topBar (just to be on the safe side for percentage widths and heights).
So you'd have
.topBar {
box-sizing: border-box;
text-align: center;
display: inline-block;
padding-top: 5px;
padding-bottom: 3px;
}
I have a footer I am making for a webpage that looks like this
As you can see the right column will not stay in line with the others and the spacing between them is not even. The gradient behind each column is a picture. I tried using pull-right but when I go to resize then it looks weird and doesn't stack on top of each other. Here's my HTML:
<div class="row">
<div class="gradient left">
<div class="text-center button-center">
<a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
<i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS<br>PORTAL</a>
</div>
</div>
<div class="gradient text-center center">
<div class="vertical-center">
<h4 id="connect">Connect With Us!</h4>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-envelope fa-2x"></i></div>
</div>
<div class="gradient text-center right">
<h3 id="ML">Click to view our upcoming events</h3>
<i class="fa fa-calendar fa-2x" ></i></div>
</div>
and here's the CSS:
.gradient{
width: 278px;
height: 106px;
background-image: url('gradient.png');
}
.button-center{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.vertical-center{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.left{
float: left;
}
.center{
margin-right: auto;
margin-left: auto;
}
.right{
float: right;
}
I need each section to be evenly spaced and to stack correctly when it's resized. And the footer spans the whole container FYI.
within the <div class = 'row'> can add the <div class = "col-sm-4 '> as shown in the Grid System of bootstrap
<div class="row">
<div class="col-sm-4" style='background: #55D946'>a</div>
<div class="col-sm-4" style='background: #5333EC'>b</div>
<div class="col-sm-4" style='background: #D8F02F'>c</div>
</div>
Since your using bootstrap you can use columns in your row, i have added this to your code. Look at how the boostrap grid system works for further understanding.
see Updated Code
.gradient {
width: 278px;
height: 106px;
background-image: url('gradient.png');
}
.button-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.left {
float: left;
}
.center {
margin-right: auto;
margin-left: auto;
}
.right {
margin-bottom: 20px;
float: right;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 gradient left">
<div class="text-center button-center">
<a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
<i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS
<br>PORTAL</a>
</div>
</div>
<div class="col-xs-4 gradient text-center center">
<div class="vertical-center">
<h4 id="connect">Connect With Us!</h4>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
<div class="col-xs-4 gradient text-center right">
<h3 id="ML">Click to view our upcoming events</h3>
<i class="fa fa-calendar fa-2x" ></i>
</div>
</div>
As you know with bootstrap you get a 12 grids running across.
You need something like:
div class = row for container .
div class= col-md-4 // for all 3 boxes. This assumes no margins or padding on divs otherwise change 4 to a 3