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.
Related
I have a Button for example that has the popover data toggle:
<button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>
The JS code that is associated with this popover:
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger : 'hover',
html : true,
content : '<div class="container mt-5 d-flex justify-content-center"> <div class="card p-3"> <div class="d-flex align-items-center"> <div class="image"> <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="rounded" width="155"> </div><div class="ml-3 w-100"> <h4 class="mb-0 mt-0">Alex Morrision</h4> <span>Senior Journalist</span> <div class="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats"> <div class="d-flex flex-column"> <span class="articles">Articles</span> <span class="number1">38</span> </div><div class="d-flex flex-column"> <span class="followers">Followers</span> <span class="number2">980</span> </div><div class="d-flex flex-column"> <span class="rating">Rating</span> <span class="number3">8.9</span> </div></div><div class="button mt-2 d-flex flex-row align-items-center"> <button class="btn btn-sm btn-outline-primary w-100">Chat</button> <button class="btn btn-sm btn-primary w-100 ml-2">Follow</button> </div></div></div></div></div>'
});
});
CSS for the popover Bootstrap card:
.card {
width: 400px;
border: none;
border-radius: 10px;
background-color: #fff
}
.stats {
background: #f2f5f8 !important;
color: #000 !important
}
.articles {
font-size: 10px;
color: #a1aab9
}
.number1 {
font-weight: 500
}
.followers {
font-size: 10px;
color: #a1aab9
}
.number2 {
font-weight: 500
}
.rating {
font-size: 10px;
color: #a1aab9
}
.number3 {
font-weight: 500
}
However, when I hover over the card, with the appropriate CSS, it will show the default popover background behind the bootstrap card that is with it.
How do I solve this?
See if this works for you:
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
trigger: 'hover',
html: true,
content: '<div class="card p-3"> <div class="d-flex align-items-center"> <div class="image"> <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="rounded" width="155"> </div><div class="ml-3 w-100"> <h4 class="mb-0 mt-0">Alex Morrision</h4> <span>Senior Journalist</span> <div class="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats"> <div class="d-flex flex-column"> <span class="articles">Articles</span> <span class="number1">38</span> </div><div class="d-flex flex-column"> <span class="followers">Followers</span> <span class="number2">980</span> </div><div class="d-flex flex-column"> <span class="rating">Rating</span> <span class="number3">8.9</span> </div></div><div class="button mt-2 d-flex flex-row align-items-center"> <button class="btn btn-sm btn-outline-primary w-100">Chat</button> <button class="btn btn-sm btn-primary w-100 ml-2">Follow</button> </div></div></div></div>'
});
});
.popover-title { display: none !important; }
.popover {
max-width: 500px !important;
}
.popover-header{
display: none !important;
}
.popover-body {
padding: 0px !important;
}
.card{
border: none !important;
}
.card {
width: 400px;
border: none;
border-radius: 10px;
background-color: #fff
}
.stats {
background: #f2f5f8 !important;
color: #000 !important
}
.articles {
font-size: 10px;
color: #a1aab9
}
.number1 {
font-weight: 500
}
.followers {
font-size: 10px;
color: #a1aab9
}
.number2 {
font-weight: 500
}
.rating {
font-size: 10px;
color: #a1aab9
}
.number3 {
font-weight: 500
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>
Live Demo: https://jsfiddle.net/7fnqw418/
P.S: You can comment out the .popover-header class if you wish to display the popover header
First, rename your css class .card.
.custom-card {
width: 400px;
border: none;
border-radius: 10px;
background-color: #fff
}
If you just want to apply your style do this :
<div class="custom-card">
If you want to mix bootstrap style and yours, you can add multiple classes to a single DOM element.
Rules given in later classes (or which are more specific) override.
<div class="card custom-card">
I'm trying to build a responsive upper-headeras you see in this screenshot.
The problem as you see the message icon stay hanged while its text goes
down whenever the width between 757 and 575.
I'm still new in css in general and bootstrap 4.
Thank you in Advance!
.upper-bar {
font-family: Times;
background-color: #007872;
color: #fff;
}
.upper-bar a {
color: #fff;
}
.upper-bar-left,
.upper-bar-right {
margin: 15px 0;
text-align: center;
padding-left: 0;
}
#media (max-width: 575.98px) {
.upper-bar-left:first-child,
.upper-bar-right:first-child {
margin-bottom: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="upper-bar">
<div class="container">
<div class="row">
<div class="col-sm upper-bar-left text-sm-left">
<i class="fa fa-phone"></i> 00000009890
<i class="far fa-envelope"></i> lorem_ipsuml#xxxxx.xx
</div>
<div class="col-sm upper-bar-right text-sm-right">
<i class="fas fa-map-marker"></i> LOrem Ipsum 0, 00098 Loremipsum
</div>
</div>
</div>
</div>
Codepen: https://codepen.io/anon/pen/bxREoK?editors=1100
Keep the envelope icon and email anchor in a span with text-nowrap class on it
<span class="text-nowrap">
<i class="far fa-envelope"></i>
lorem_ipsuml#xxxxx.xx
</span>
See this for information on text-nowrap
.upper-bar {
font-family: Times;
background-color: #007872;
color: #fff;
}
.upper-bar a {
color: #fff;
}
.upper-bar-left,
.upper-bar-right {
margin: 15px 0;
text-align: center;
padding-left: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="upper-bar">
<div class="container">
<div class="row">
<div class="col-sm upper-bar-left text-sm-left">
<i class="fa fa-phone"></i> 0542 1421455
<span class="text-nowrap">
<i class="fa fa-envelope"></i>
lorem_ipsuml#xxxxx.xx
</span>
</div>
<div class="col-sm upper-bar-right text-sm-right">
<i class="fas fa-map-marker"></i> LOrem Ipsum 0, 00098 Loremipsum
</div>
</div>
</div>
</div>
I suggest you can do like this:
html
<div class="icon-text">
<i class="fab fa-facebook-f">
<p> Your text</p>
</div>
css
.icon-text {
display: inline-block;
margin-right: 20px;
}
Please try this way.
CSS Code:
.left-style{
float:left;
}
HTML Code:
<div class="col-sm upper-bar-left text-sm-left">
<span class="left-style"><i class="fa fa-phone"></i> 00000009890</span>
<span class="left-style"><i class="far fa-envelope"></i>
lorem_ipsuml#xxxxx.xx</span>
</div>
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.
Whenever user decreases the window size the text changes according to the window size. But when I decrease the window size it goes over to the image. I tried media queries but It always shows the same. I used the VW and vh to resize according to the window size.
I am getting like this. How to solve that error. The media query I used is
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
How to solve that .
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
color: #32CD32;
}
.carousel-indicators li {
border-color: #000000;
}
.carousel-indicators li.active {
background-color: #32CD32;
}
.button {
background-color:#000000;
border:black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
/*.text {
font-size: 160%;
position: absolute;
display: inline-block;
left: 50%;
top: 180%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}*/
.button1 {
border: 1px solid black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
#media screen and (max-width: 803px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
img {
width:100%,
height:auto;
}
.col-sm-8 {
padding: 60px 50px;
}
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
/*#media screen and (max-width: 500px) {
.text {
font-size: 70px;
}*/
/*#media screen and (max-width:760em) {
.img {
font-size: 150px;
}*/
#media screen and (max-width: 803em) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style = "background:#FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <img src="Assets/img/deyapayiconandroid#3x.png" alt="logo" style="width:60px;"><br> -->
<h1 style = "font-family:Passion One;color:#3393E7;">deyaPay</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li> Login</li>
</ul>
</div>
</div>
</nav>
<div class = "container-fluid" style = "background:#FFFFFF ">
<div class = "row">
<div class="col-sm-8">
<h2 style="margin-top: 100px; margin-left:50px;font-family:Palanquin Dark; font-size:55px" >
Pay for it anyway you want</br>
with deyaPay </h2>
<button type = "button" style = "background-color:#4CAF50; font-size:20px;width:200px;height:40px;margin-left:50px;margin-top:20px;text-align=center;color:white;border:none;display:inline-block"> Get Started </button>
</div>
<div class="col-sm-4">
<img src="Assets/img/deywalletbg.png" class="img-responsive" width="300" height="250" style=" margin-top: 150px">
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color: #F2F2F2">
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-4">
<img src="Assets/img/first.png" class="img-responsive" width="300" height="250" style=" margin-left:180px;margin-top: 40px;">
</div>
<div class="col-sm-8">
<h2 class = "text" style = " font-family: 'Fira Sans Extra Condensed';font-size:3vw;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<div class="item" style="background-color: #F2F2F2">
<div class="row">
<div class="col-sm-4">
<img src="Assets/img/slide2.png" class="img-responsive" width="450" height="250" style=" margin-left:100px;margin-top: 40px;">
</div>
<div class = "col-sm-8">
<h2 style = " font-family: 'Fira Sans Extra Condensed';font-size:35px;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid" style="background-color:#F0F8FF ">
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" class = "img-circle" alt="Paris" width="180">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="New York" width="180">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="San Francisco" width="180">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
</div>
The image is overlapped because it has a margin to the left as inline style. You could remove that inline style and use a media query to overwrite that. Take care that your text also has inline style which might cause problems, as you wont be able to overwrite it with media query.
Additionally, your second slide doesn't has the .text class on it, if you wonder that only one slides text changes.
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.