I can't figure where this space is coming from (marked in red in attached image)? Any pointers?
This is a 'Coming soon' page with mainly a masthead and a mastfoot, and some social links positioned differently if on mobile or desktop. I'm having problems with the mobile view.
This is the relevant HTML:
<div class="masthead">
<div class="masthead-bg"></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto">
<div class="masthead-content text-white py-5 py-md-0">
<h1 class="mb-3">Register</h1>
<p class="mb-5">Building a X.
We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
<form action="https://hen.us18.list-manage.com/subscribe/post" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="hidden" name="u" value="377b993ba697354f6584371c9">
<input type="hidden" name="id" value="e1c7ba1f4b">
<div class="input-group input-group-newsletter">
<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter your email..." aria-label="Enter email..." aria-describedby="basic-addon">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">Notify Me!</button>
</div>
<input type="hidden" name="ht" value="f5b0455009025ab4743b2ecc932316028905c673:MTUzMTgyNjMzMC43NDM3">
<input type="hidden" name="mc_signupsource" value="hosted">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="mastfoot">
<div class="inner-mastfoot">
© 2018 X Ltd. All Rights Reserved. •
Legal
• Contact
</div>
</div>
<div class="social-icons">
<ul class="list-unstyled text-center mb-0">
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-medium"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
</ul>
</div>
and the relevant CSS:
.masthead .masthead-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
}
.social-icons {
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
}
.social-icons ul {
margin-top: 2rem;
width: 100%;
text-align: center
}
.social-icons ul>li {
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
}
.social-icons ul>li>a {
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
.mastfoot {
color: #262626;
color: rgba(26, 26, 26, .5);
position: absolute;
bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 2
}
.inner-mastfoot {
font-size: 0.8rem;
text-align: center
}
So far as I can tell - in this case, on desktop by resizing my window to be as thin as a mobile screen - it's because your content isn't tall enough to fill the screen.
Image: https://i.stack.imgur.com/9Cmyr.png
Your mystery space is just the height of the <body>, unfilled by content.
Related
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 3 years ago.
I am applying a background image to my page. The background image is inside a div element, but the div element is not taking 100% browser height. Though, body, html and the div all heights are set to 100%.
I have also tried with min-height: 100vh, but not working.
Below is the code for login.css
.corporate {
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background: url("../../../assets/login-new.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
margin-top: 5rem;
width: 30vw;
height: 75vh;
opacity: 0.9;
}
the global styles.css
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
html, body {
margin: 0;
padding: 0;
background: #f5f5f5;
font-size: 16px;
color: #222;
font-family: 'Roboto', sans-serif;
font-weight: 300;
max-width: 100%;
/* min-height: 100%; */
height: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
The html file:
<div class="corporate">
<div class="container white z-depth-2">
<ul class="tabs teal">
<li class="tab col s3">
<a class="white-text" routerLink="/register" routerLinkActive="active"
>don't have an account? click to register</a
>
</li>
</ul>
<form class="col s12">
<div class="form-container">
<h2 class="teal-text">Hey there</h2>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="email" class="validate" />
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">https</i>
<input id="password" type="password" class="validate" />
<label for="password">Password</label>
</div>
</div>
<br />
<div style="text-align: center;">
<button
class="btn waves-effect waves-light teal"
type="submit"
name="action"
>
Log In
</button>
<br />
<br />
Forgot Password?
</div>
<div class="site-wrapper-inner clearfix">
<div class="social-login clearfix">
<p>- or sign in with -</p>
<div class="social-buttons">
<ul>
<li class="social-media-icon">
<a href="" class="facebook social-icon"
><i class="fab fa-facebook-f"></i
></a>
</li>
<li class="social-media-icon">
<a href="" class="twitter social-icon"
><i class="fab fa-twitter" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
100% referes to the parent so in this case a div, so your image is taking 100% of the height of your div and the div heigth is determinate by its content.
your are using material that have its way of style components, try to take a look at material documentation material grid or use some framework because mix style in the way you are tryng to do is not a good idea.
resize images is not a good practice, you will lose quality when the height or width will increase.
I am creating a web page layout using bootstrap and the backend is Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out the problem in CSS code,,,please assist?
Code
#font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/pacifico.woff") format('woff');
}
html,
body {
margin: 0;
padding: 0;
}
img,
object,
embed,
video {
max-width: 100%;
height: auto;
}
/*Service section*/
.service-heading {
font-size: 22px;
}
#service {
background: url(../img/bg/number1.gif) repeat center center fixed;
color: #ffffff;
display: block;
}
#service h3,
p {
color: #ffffff;
}
#service .block-heading h1 {
color: #fff;
font-family: 'Milonga', cursive;
font-weight: 400;
font-size: 55px;
word-spacing: 5px;
}
/*Contact section*/
#contact {
background: url(../img/bg/contact-bg.jpg) no-repeat center center fixed;
background-size: cover;
color: #fff;
}
#contact .block-heading h1 {
color: #fff;
font-family: 'Milonga', cursive;
font-weight: 400;
font-size: 55px;
}
.overlay-3 {
padding: 60px 0;
/* background-color: rgba(9, 20, 39, 0.83); */
/* background-color: rgba(24, 77, 77, 0.93); */
background-color: rgba(33, 103, 88, 0.9);
}
.contact-info {
padding: 16px 62px;
text-align: left;
font-size: 18px;
line-height: 36px;
margin-top: 25px;
}
. .contact-info i {
width: 40px;
height: 40px;
color: white;
padding-top: 7px;
font-size: 25px;
border: 1px solid #fff;
text-align: center;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.contact-info p {
padding: 27px 10px;
}
.contact-info span {
padding-left: 20px;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin: 0 auto;
width: 100%;
background: transparent;
border: 1px solid #fff;
padding: 12px 15px;
margin-bottom: 30px;
}
input[type="submit"] {
background: transparent;
border: 1px solid #fff;
width: 100%;
padding: 10px;
transition: 0.5s background linear;
font-weight: bold;
}
input[type="submit"]:hover {
background: #fff;
border-color: #fff;
transition: 0.5s background linear;
color: #333;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media only screen and (min-width: 321px) and (max-width: 480px) {
#service {
display: inline-block;
height: 100%;
width: 100%;
padding-bottom: 20px;
background: blue;
}
.overlay-3 {
background: none;
padding: 0;
}
#contact {
display: inline-block;
height: 100%;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
<meta name="HandheldFriendly" content="true">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"> >
<link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/bootstrap/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<!-- google font -->
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet'>
</head>
<body>
<!-- Service Section -->
<div class="content-block" id="service">
<br><br>
<header class="block-heading cleafix text-center">
<h1> Services</h1>
<!-- <p>Lorem Ipsum Text</p> -->
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted"> Welcome </h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School Of Arts</h4>
<p>...............</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">School of Business </h4>
<p> ........... </p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Engineering </h4>
<p> ........ </p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-wordpress fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Human Resource</h4>
<p> ........ </p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Medicine </h4>
<p> ........ .......</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Biological Sciences </h4>
<p> .......... </p>
</div>
</div>
</div>
</div>
<!-- END SERVICE SECTION-->
<!-- Contact Form Section-->
<div class="content-block" id="contact">
<div class="overlay-3">
<header class="block-heading cleafix text-center">
<h1>Contact</h1>
<!-- <p>Feel Free to Contact</p> -->
</header>
<div class="block-content text-center">
<div class="container-fluid">
<div class="row">
<!-- Form Section -->
<div class="col-sm-4 wow animated fadeInLeft">
{!! Form::open(array('route' => 'index.post', 'method' => 'POST','class' => 'contact-form')) !!} {{ Form::text('name', null, array( 'placeholder' => 'Name...', 'class' => 'input', 'required' => ''))}} {{ Form::email('email', null, array('placeholder'
=> 'Email Address...','class' => 'input', 'required' => ''))}} {{ Form::textarea('message', null, array('placeholder' => 'Message...', 'class' => '', 'required' => 'input')) }} {{ Form::submit('Submit') }} {!! Form::close() !!}
</div>
<!-- Adress -->
<div class="col-sm-4 wow animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="contact-info">
<div class="clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-map-marker"></i>
</div>
<p><strong> 3069 Nkr</strong> </p>
</div>
<div class="tel clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-mobile"></i>
</div>
<p>
<strong> <a class="tell" href="tel:+256123456" rel="nofollow"> +256 123456 </a> </strong>
<br>
<strong> <a class="tell" href="tel:+256547890" rel="nofollow"> +254 756789098</a> </strong>
</p>
</div>
<div class="clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-envelope-o"></i>
</div>
<p>
<strong> info#tcol.com </strong>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<ul class="social-box">
<li>
<a class="facebook-icon" href="https://www.facebook.com/pwebkenya" target="_blank"> <i class="fa fa-facebook"></i></a>
</li>
<li>
<a class="twitter-icon" href="https://twitter.com/pwebkenya" target="_blank"> <i class="fa fa-twitter"></i></a>
</li>
<li><a class="g-plus-icon" href="https://github.com/patwan"><i class="fa fa-github"></i></a></li>
<li> <a class="linkedin-icon" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<!-- photo -->
<div class="col-sm-4">
<br> <br>
<div class="team-member">
<img src="img/7.jpg" class="img-responsive img-circle" alt="">
<h4> Steve Johns</h4>
<p class="text-muted"> Web Developer/Graphics Designer</p>
</div>
</div>
<!-- END PHOTO-->
</div>
</div>
</div>
<!-- block-content -->
</div>
<!-- overlay-3 -->
</div>
<!-- content-block -->
</body>
</html>
There is a typo in your HTML in the 'contact' section:
<header class="block-heading cleafix text-center">``
Therefore, the floats are not cleared on this element. Don't know if it fixes the entire problem though.
Hi I have 4 buttons in a row. Button CSS is coming fine in IE11,Chrome and Safari and all other browser except IE10. Here is my code
Hi I have 4 buttons in a row. Button CSS is coming fine in IE11,Chrome and Safari and all other browser except IE10. Here is my code
My HTML
{{actionBarTitle}}
</div>
<div class="action-line col-xs-10 col-md-10 col-sm-10 abc">
<!-- Edit button -->
<div>
<button class="btn btn-large deactivate-btn-large" title="{{::'title.edit' | translate}}" ng-click="showEditUserPanel()" title="" ng-disabled="!actionButtonStatus.EDIT">
<i class="fa fa-pencil-square-o fa-lg"></i>
<span class="action-button-text">{{::'button.edit' | translate}}</span>
</button>
</div>
<div>
<button class="btn btn-large deactivate-btn-large" title="{{::'title.assign.roles' | translate}}" ng-click="showAssignRolesPanel()" title="" ng-disabled="!actionButtonStatus.ASSIGN">
<i class="fa fa-user-secret fa-lg"></i>
<span class="action-button-text">{{::'button.assign' | translate}}</span>
</button>
</div>
<div class="active-send-select" pull-left btn-group>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown" title="{{::'title.send' | translate}}" ng-disabled="!actionButtonStatus.SENT">
<i class="fa fa-envelope fa-lg"></i>
<span class="action-button-text">{{::'label.button.send' | translate}}</span>
<i class="icon-chevron-down pull-right" style="margin-top:-20px;"></i>
</button>
<ul class="dropdown-menu filter-state dropdown" ng-show="!user.isPeUser">
<li><span class="{{userstatus == 'Complete'? 'resettest': ''}}">{{::'label.dropdown.sendActivation' | translate}}</span></li>
<li>
<span class="{{(userstatus == 'Notified' || userstatus == 'Added')? 'resettest': '' }}">{{::'label.dropdown.resetPassword' | translate}}</span>
</li>
</ul>
<ul class="dropdown-menu filter-state dropdown" ng-show="user.isPeUser">
<li>
{{::'label.send.welcomeEmail' | translate}}
</li>
</ul>
</div>
<div class="action-bar-item" >
<button class="btn btn-large deactivate-btn-large" ng-click="changeUserState()" title={{title}} ng-disabled="!actionButtonStatus.ENABLE">
<i class="fa fa-power-off fa-lg"></i>
<span class="action-button-text">{{getEnableButtonLabel()}}</span>
</button>
</div>
</div>
</div>
<div class="panel-title">
<span>{{panelTitle}}</span>
</div>
</div>
</div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-select-panel.html'" ng-if="panelSelector.USER_SELECT"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-add-panel.html'" ng-if="panelSelector.USER_ADD"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-edit-panel.html'" ng-if="panelSelector.USER_EDIT"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-detail-panel.html'" ng-if="panelSelector.USER_DETAILS"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-import-panel.html'" ng-if="panelSelector.USER_IMPORT"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-state-change-panel.html'" ng-if="panelSelector.USER_STATE_CHANGE"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/password-reset-panel.html'" ng-if="panelSelector.USER_PASSWORD_RESET"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/user-activation-panel.html'" ng-if="panelSelector.USER_ACTIVATE"></div>
<div class="row inner-row full-panel" ng-include="'script/item-full-panel/welcome-email-panel.html'" ng-if="panelSelector.USER_WELCOME_EMAIL"></div>
<div class="row inner-row full-panel" ng-include="'script/assign-roles-panel/assign-roles-panel.html'" ng-if="panelSelector.ASSIGN_ROLES"></div>
<!-- access denied template -->
<div class="row inner-row full-panel" ng-if="panelSelector.ACCESS_DENIED">
<div class="row scrowable" ge-scroll-port>
<div class="access-denied-msg">
Access Denied
</div>
</div>
</div>
</div>
My CSS
.deactivate-btn-large {
width: 90px;
margin-left: 10px;
margin-bottom: 10px;
height: 34px;
border: 1px solid #grayLight;
border-radius: 4px 4px 4px 4px;
margin-right: 10px;
}
.action-button-text {
display: inline-block;
}
.active-send-select {
white-space: nowrap;
width: 90px;
button.btn {
width: 90px;
height: 34px;
padding: 5px 5px;
border-radius: 4px 4px 4px 4px;
margin-left: 10px;
text-align: left;
i {
padding: 5px 0 0 5px;
}
}
.dropdown {
margin-top: -5px;
margin-left: 225px;
}
.active-filter-option {
color: #black;
}
}
.dropdown {
margin-top: -5px;
margin-left: 225px;
}
[This is coming correct][1]
[In IE 10 it is coming like that][2]
[1]: https://i.stack.imgur.com/HWjN2.png
[2]: https://i.stack.imgur.com/CO3BZ.png
Where I am doing wrong. Please let me know. Thanks in advance.
Try using prefixfree, this will help you to put the right prefix for css properties that needs specific prefix for a specific borwser. Just load the js file in the head tag
Been having difficulty trying to center vertically a Font Awesome icon, a 2 text line div, and 2 more icons in the same Bootstrap row div. I managed to fake the needed outcome but after hours trying out numerous CSS properties I'd love to hear what the best solutions was.
So the items I need to position vertically centered so those stay that way regardless of the containing element size are the 'fa fa-building-o fa-4x' icon, the 2 lines of text to its right ("X5 Retail Group" and "Company address and contacts"), both are of different font size (which I attempted to achieve with <h5> and <h3> tags), and the 2 icons to the right.
It was not required to make the sections of a certain height. The line-height property contains a number convenient to me at the moment.
The code was designed for Firefox 39.
Here's a Plunkr link to my html: https://plnkr.co/edit/0BVnHFowRD53KOVoy1KU?p=preview
Below is the .html of the page.
body {
padding-top: 20px;
}
section#top1 {
line-height: 40px;
}
section#top2 {
line-height: 80px;
}
.monitoring {
background-color: #E8E8E8;
}
.monitoringh4 {
display: inline;
}
.h4buttonlike:hover {
cursor: pointer;
font-weight: bold;
}
section#top3 {
line-height: 60px;
}
section#top4 {
line-height: 80px;
}
.container {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 5px;
}
.container .col-md-12 {
background: #e6e6e6;
border-radius: 4px;
}
.container .logo {
display: inline;
margin: auto 0 auto 0;
width: 80px;
}
.container h4 {
font-size: 1.0em;
display: inline;
margin-left: 5px;
text-align: center;
}
section#top1 .container ul {
display: table;
margin: auto 0;
float: right;
}
section#top1 .container ul li {
display: table-cell;
padding-right: 15px;
}
.settings i {
vertical-align: middle;
}
.container i {
margin-right: 5px;
}
.dropdown {
display: inline;
margin-left: 5px;
margin-top: 3px;
}
.myclass {
text-align: right;
}
section#top4 .brands {
position: absolute;
top: 50%;
display: inline-block;
/* margin-left: 20px; */
transform: translate(5%, -55%);
}
.exp {
height: 56px;
width: 44px;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.my-icons {
position: absolute;
top: 50%;
right: 15px;
transform: translate(-60%, -50%);
display: inline-block;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section id='top1'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<img class='logo' src='http://www.toennies.com/uploads/pics/fTRACE-Logo_02.png'>
<h4>Company name</h4>
<ul>
<li>Total items: 100</li>
<li style='color: #009900;'>Oline: 82</li>
<li style='color: #787878;'>Offline: 16</li>
<li style='color: #FF0000;'>Damaged: 6</li>
</ul>
</div>
<div class='clearfix'></div>
</div>
</div>
</section>
<section id='top2'>
<div class='container'>
<div class='row'>
<div class='col-md-9 monitoring'>
<div class='monitoringh4'>
<h4>Monitoring</h4>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Reports
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Report 1
</li>
<li>Report 2
</li>
<li>Report 3
</li>
</ul>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tune
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Tune 1
</li>
<li>Tune 2
</li>
<li>Tune 3
</li>
</ul>
</div>
</div>
<div class='col-md-3 monitoring'>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
John Doe (Admin)
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Jane Doe
</li>
<li>Jack Doe
</li>
<li>Jimmy Doe
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id='top3'>
<div class='container'>
<div class='row'>
<div class='col-md-12 settings'>
<h4><i class="fa fa-desktop fa-2x"></i>Tuneup > Company profile > X5 Retail Group</h4>
</div>
</div>
</div>
</section>
<section id='top4'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='exp'><i class="fa fa-building-o fa-4x"></i>
</div>
<div class='brands'>
<h3>X5 Retail Group</h3>
<h5>Company address and contacts</h5>
</div>
<div class='my-icons'>
<h5><i class="fa fa-pencil-square-o"> Edit</h5>
</i>
<h5><i class="fa fa-print"></i>Print</h5>
</div>
</div>
</div>
</div>
</section>
Thank you.
I am jumping into a large complex application today and it's a bit daunting.
So, I want to solve the issue locally then find where the solution should eventually be located.
I have square images that come from sources of various sizes. Currently the image fills the div regardless of its dimensions.
<li class="hint-li" data-position="undefined" data-id="551ef3279934asda2e2565" id="551efsfasd8354582e2565" style="background-image: url(http://s3.amazonaws.com/source/558dadasd9a0f3.616asd74.jpg);">
<div class="sold-out hidden">
</div>
<div class="partnered hidden">
</div>
<div class="overlay">
<div class="row">
<div class="col">
<strong>
Thermal bath, aromatherapy, massage
</strong>
<em>
Aire Ancient Bath
</em>
<strong class="hintPrice">
$181
</strong>
</div>
</div>
</div>
<div class="options">
<div class="row">
<div class="col">
<a target="_blank" class="buy" href="http://www.ancientbathsny.com/aire-services/thermal-bath-with-aromatherapy-and-relaxing-30-minutes-massage/">
Buy
</a>
<a target="_blank" class="hint">
Hint
</a>
</div>
<div class="col">
<ul>
<li>
<a class="twitter" target="_blank">
<span class="sprite twitter-alt">
</span>
</a>
</li>
<li>
<a class="facebook" target="_blank">
<span class="sprite facebook-alt">
</span>
</a>
</li>
<li>
<a class="email">
<span class="sprite email">
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
Here is the CSS that effects these image sizes:
.grid>ul>li {
width: 247px;
height: 250px;
background-position: center;
background-size: cover;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
vertical-align: top;
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px 1px #ddd;
box-shadow: 1px 1px 1px 1px #ddd;
}
I'm trying to center the image within the div and have the remaining space be white space:
I have tried various approaches such as:
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
But it is breaking their format on the page.
How do I get the desired behavior?
As in this JS Fiddle these lines should be in your .grid>ul>li css:
background-position: center center;
background-repeat:no-repeat;
background-size: contain;
background-color:white;
EDIT: My answer is not actually applicable to OP, but I will leave it here in case someone is looking to center img elements as OP described in the title.
Wrap the following class around each img attribute:
.example-wrapper img {
text-align:center;
transform: translateY(-50%);
top: 50%;
height: auto;
max-width: 100%;
max-height:100%;
position: relative;
background-color: white;
}
extra option: "text-align:center;" above can be replaced with:
display: flex;
justify-content:center;
HTML
<div class="example-wrapper">
<img ....>
</div>