Center Bootstrap form-group input field and make it smaller - html

I'm currently trying to implement the design you see below:
Everything is working except for the size of the input field and the button. I'm using Boostrap.
HTML:
<div className='jumbotron text-center'>
<div className='container'>
<h1 id='hero-questions-h1'>What’s your name?</h1>
</div>
<div className='container'>
<div class="col-sm-4 text-center">
<div className="form-group input-group-lg">
<input type="text" className="form-control"></input>
</div>
<button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button>
</div>
</div>
<div className='container'>
<h2 id='tip'>
Tip! You will get motivational playlists, stories, posters and much more
</h2>
</div>
<footer className="footer">
<div className="container">
<p id="social-proof" className="text-center">“Must have for every ambitious athlete!”</p>
<p id="social-proof-tagline" className="text-center">Anders Hasselstrøm, Deca Ironman (10x)</p>
</div>
</footer>
</div>
CSS:
.jumbotron {
height: 100vh;
margin-bottom: 0px !important;
background-image: url("bg-hero-v2.png");
background-size: cover;
}
#hero-h1 {
color: white;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 60px;
padding-top: 10%;
}
#hero-h2 {
color: #ECECEC;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 20px;
margin-top: 30px;
line-height: 40px;
padding-bottom: 40px;
}
#hero-questions-h1 {
color: white;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 60px;
padding-top: 10%;
padding-bottom: 30px;
}
.btn-success {
background-color: #66B878 !important;
}
.form-control {
background-color: transparent !important;
color: white !important;
}
#signup-btn {
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 15px;
}
#continue-btn {
height: 60px;
font-size: 18px;
}
#social-proof {
color: white;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 18px;
font-style: italic;
}
#social-proof-tagline {
color: white;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 16px;
}
#tip {
color: #ECECEC;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 16px;
margin-top: 30px;
}
.footer {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
bottom: 0;
width: 100%;
background-color: black;
opacity: 0.6;
}
As you can see my current implementation looks like this:

DOM Elements use class instead of className to allocate CSS classes (You may have this confused with the JS .className property). To position the fields how you'd like, i would suggest taking advantage of the bootstrap grid col-x-offset-x options to position the column offset from the left side of the .row
For correct positioning, remember to place a .row element around your columns, and between the .container. Also, input elements are self-closing (ie. you dont need the trailing </input>)
HTML
<div class='jumbotron text-center'>
<div class='container'>
<h1 id='hero-questions-h1'>What’s your name?</h1>
</div>
<div class='container'>
<div class="row">
<div class="col-sm-offset-3 col-sm-6 text-center">
<div class="form-group input-group-lg">
<input type="text" class="form-control" />
</div>
<button type="button" id="continue-btn" class="btn btn-success btn-block">Continue</button>
</div>
</div>
</div>
<div class='container'>
<h2 id='tip'>
Tip! You will get motivational playlists, stories, posters and much more
</h2>
</div>
<footer class="footer">
<div class="container">
<p id="social-proof" class="text-center">“Must have for every ambitious athlete!”</p>
<p id="social-proof-tagline" class="text-center">Anders Hasselstrøm, Deca Ironman (10x)</p>
</div>
</footer>
</div>
JSFIDDLE

I was just working with bootstrap now and I had the same problem. In place of:
<div className='container'>
<div class="col-sm-4 text-center">
<div className="form-group input-group-lg">
<input type="text" className="form-control"></input>
</div>
<button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button>
</div>
</div>
Try this:
<div className='container'>
<div class="col-sm-4">
</div>
<div class="col-sm-4 text-center">
<div className="form-group input-group-lg">
<input type="text" className="form-control"></input>
</div>
<button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button>
</div>
<div class="col-sm-4">
</div>
The extra class with col-sm-4 will structure the divs in the correct order.
<div class="col-sm-4">
</div>
The is optional but I found that it helped me.

Related

Make 2 Divs same height as screen

Im using bootstrap 3 with flexbox in order to achieve the output. To explain, I am creating a login screen where the left div has a background-image that completely covers the div and on the right side is the form container together with it form contents. I've provided a snippet to show what I am trying to do.
#page-login-template {
margin-top: -32px;
.column-wrapper{
display:flex;
}
.login-left {
background-image: url("assets/images/web_login#2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.login-right {
padding: 0 100px;
.login-logo {
padding:99px 0;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],[type=text]{
border-right:0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left:0;
border-top:1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
i{
font-size:18px;
}
.btn-login{
height:54px;
font-size:16px;
font-family:Poppins;
color:#fff;
background:#0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover{
background:#0570B6;
}
}
.form-container-2{
padding:20px 0;
p{
font-family: Poppins;
font-size: 12px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
.form-container-3{
padding-top:180px;
p{
font-family: Poppins;
font-size: 11px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
}
}
<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-lg-7 login-left"></div>
<div class="col-lg-5 login-right">
<div class="row login-logo text-center">
<img src='<?= get_stylesheet_directory_uri() . '/assets/images/logo/logo#2x.png' ?>' width="50%">
</div>
<h4 class="text-center">Login to My Account</h4>
<div class="row form-container">
<form class="form-horizontal">
<div class="row">
<div class="form-part-group col-lg-12">
<input id="email" type="email" class="form-control form-input-group email-input" data-error-required="This field is required" data-class-focus="email-input" placeholder="Email">
<div id="email" class="error-block"></div>
</div>
</div>
<div class="row form-part-group">
<div class="input-group col-lg-12 password-input">
<input id="password" type="password" class="form-control form-input-group" data-error-required="This field is required" data-class-focus="password-input" placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="row">
<div class="form-part-group col-lg-12">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</div>
</form>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>
As you can see I am controlling the height of the layout via padding the contents on the form. Is there a way to have the same output without it being dependent on the form's height.
height: 100vh;
This code can make your div same height as screen
First thing that you need to do is to set on "column-wrapper" class:
height: 100vh;
You probably need something like this, just group the div's in a way that you like:
JSFiddle
Try this. You need to set elements to height 100% or 100vh. And the right part is better to make with the flexbox.
html,
body {
height: 100%;
}
#page-login-template{
height: 100%;
}
.column-wrapper {
display: flex;
height: 100%;
}
.login-left {
background-image: url("https://source.unsplash.com/user/erondu/1600x900");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.login-logo{
padding-top:100px;
}
.login-right {
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
}
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],
[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],
[type=text] {
border-right: 0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left: 0;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
.input-group-addon i {
font-size: 18px;
}
.btn-login {
height: 54px;
font-size: 16px;
font-family: Poppins;
color: #fff;
background: #0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover {
background: #0570B6;
}
.form-container-2 {
padding: 20px 0;
}
.form-container-2 p {
font-family: Poppins;
font-size: 12px;
color: #333;
font-weight: bold;
}
.form-container-2 a {
color: #0392CC
}
.form-container-3 p {
font-family: Poppins;
font-size: 11px;
color: #333;
font-weight: bold;
}
.form-container-3 a {
color: #0392CC
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-md-7 login-left"></div>
<div class="col-md-5 login-right">
<div class="row login-logo text-center">
<img src='https://source.unsplash.com/random/200x200>' height="150">
</div>
<div class="form-container">
<h4 class="text-center">Login to My Account</h4>
<form>
<div class="form-group">
<input id="email" type="email" class="form-control form-input-group email-input"
data-error-required="This field is required" data-class-focus="email-input"
placeholder="Email">
<div id="email" class="error-block"></div>
</div>
<div class="form-group">
<input id="password" type="password" class="form-control form-input-group"
data-error-required="This field is required" data-class-focus="password-input"
placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="form-group">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</form>
</div>
<div>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>

How to make sections height same in HTML?

I have a web page in HTML, with different page having some sections like below image
I need every sections to be of the same height, the first section in the image is perfect with the section only till the screen, but the second section in the 2nd image is a little below the screen like below
I need it to be like the first section, till the screen. My code:
body {
font-family: Montserrat;
}
/*.paddingTB60 {padding:100px 0px 60px 0px;}*/
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
}
p {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
}
.para1 {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
margin-left: -2.5vh;
}
.paddingTBB {
padding-top: 95px;
padding-bottom: 30px;
}
.paddingTB {
margin-top: 50px;
}
.paddingTBq {
margin-top: 50px;
}
.paddingTBq2 {
margin-top: 100px;
}
<div id="backtop">▲</div>
<div id="zub" class="about-section paddingTB60 gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class=" about-title clearfix">
<div class="col-md-5 col-sm-5 how-img text-center">
<img src="img/teamweserve.png" class="img-fluid" alt="" />
</div>
<div class="col-md-7 col-sm-7">
<h1 class="tws">TEAMS WE SERVE</h1><br>
<p class="para1">CEOs face incessant barrage of “go to cloud”, “go digital”.</p>
<p class="para1">CFOs are under tremendous pressure to free-up or find capital in legacy IT to invest in digital, IT modernization.</p>
<p class="para1">CIOs/CTOs are in uneviable position to maintain legacy IT while transforming business for digital, cloud.</p>
<p class="para1">HR is struggling with talent and skills shortage.</p>
<p class="para1">Functional heads are under pressure to show results fast, and unknowingly give out critical information to suppliers.</p>
<p class="para1">Procurement/Sourcing are handed situations after the damage has been done by the organizational silos.</p>
</div>
</div>
</div>
<div class="login" id="theFormID1" action="">
<button type="submit" class="btn btn-warning" id="submit_on1" onclick="window.location.href='setupdiscussion.php'">SET UP A DISCUSSION</button>
</div>
</div>
</div>
</div>
How do I make it like that, can anyone help me?
Change this:
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
}
to
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
height: 900px;
overflow: hidden;
}
If you want to have a different height just change height: 900px; to height: what you want; and make sure that every grey section has the class gray-bg. You also might want to add overflow: hidden; to ensure that no content spills out of the div.
Snippet:
body {
font-family: Montserrat;
}
/*.paddingTB60 {padding:100px 0px 60px 0px;}*/
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
height: 900px;
overflow: hidden;
}
p {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
}
.para1 {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
margin-left: -2.5vh;
}
.paddingTBB {
padding-top: 95px;
padding-bottom: 30px;
}
.paddingTB {
margin-top: 50px;
}
.paddingTBq {
margin-top: 50px;
}
.paddingTBq2 {
margin-top: 100px;
}
<div id="backtop">▲</div>
<div id="zub" class="about-section paddingTB60 gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class=" about-title clearfix">
<div class="col-md-5 col-sm-5 how-img text-center">
<img src="img/teamweserve.png" class="img-fluid" alt="" />
</div>
<div class="col-md-7 col-sm-7">
<h1 class="tws">TEAMS WE SERVE</h1><br>
<p class="para1">CEOs face incessant barrage of “go to cloud”, “go digital”.</p>
<p class="para1">CFOs are under tremendous pressure to free-up or find capital in legacy IT to invest in digital, IT modernization.</p>
<p class="para1">CIOs/CTOs are in uneviable position to maintain legacy IT while transforming business for digital, cloud.</p>
<p class="para1">HR is struggling with talent and skills shortage.</p>
<p class="para1">Functional heads are under pressure to show results fast, and unknowingly give out critical information to suppliers.</p>
<p class="para1">Procurement/Sourcing are handed situations after the damage has been done by the organizational silos.</p>
</div>
</div>
</div>
<div class="login" id="theFormID1" action="">
<button type="submit" class="btn btn-warning" id="submit_on1" onclick="window.location.href='setupdiscussion.php'">SET UP A DISCUSSION</button>
</div>
</div>
</div>
</div>
You can create a common class with the height whatever you want and add that class to all sections.

How would I change the content overflow of an element

What I am trying to do?
I have created a custom footer for my textarea. And want to alter the content overflow of my textarea. So that the text would never go beyond the footer of my textarea.
https://imgur.com/hOfqRQ7
As you can see in the picture the text goes beyond the footer (that horizontal line is where the footer starts) of my textarea. How would I prevent it ? so that the text starts to overflow before it reaches the footer.
My code:
#message textarea {
resize: none;
min-height: 250px;
padding-bottom: 45px;
overflow: hidden;
}
#sendMsg #separator hr {
margin-top: -35px;
}
#sendMsg #contactFormBtn,
#showContactErrMsg {
position: absolute;
margin-top: -30px;
}
#sendMsg #showContactErrMsg {
padding-left: 40px;
font-size: 12px;
}
#showContactErrMsg {
font-size: 14px;
color: maroon;
font-family: "Century Gothic";
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="message">
<div class="col-xs-offset-1 col-xs-10">
<div class="form-group">
<label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message </label>
<textarea class="form-control" class="formInput" id='inputContactMsg'></textarea>
<div class="row" id='sendMsg'>
<div class="row" id='separator'>
<div class="col-xs-offset-2 col-xs-8">
<hr style="height: 0.5px; background-color: silver;">
</div>
</div>
<div class="col-xs-8">
<strong id='showContactErrMsg'></strong>
</div>
<div class="col-xs-4">
<button type="submit" id='contactFormBtn'>Send</button>
</div>
</div>
</div>
</div>
</div>
Change below code in #message textarea
max-height: 250px; /*max instead of min*/
overflow: auto;/*scroll or auto instead of hidden*/
This will force your textarea to take scroll once height reaches your set value.
Hope this helps :)
#message textarea {
resize: none;
max-height: 250px; /*change this to max*/
padding-bottom: 45px;
overflow: auto;/*change this to scroll*/
height: 90px;
width: 100%;
border: none;
}
#message textarea:focus{
border: none;
outline: none;
}
#sendMsg #separator hr {
margin-top: -35px;
}
#sendMsg #contactFormBtn, #showContactErrMsg {
position: absolute;
margin-top: -30px;
}
#sendMsg #showContactErrMsg {
padding-left: 40px;
font-size: 12px;
}
#showContactErrMsg {
font-size: 14px;
color: maroon;
font-family: "Century Gothic";
}
div .extra {
height: 130px;
display: block;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="message">
<div class="col-xs-offset-1 col-xs-10">
<div class="form-group">
<label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message </label>
<div class="extra form-control">
<textarea class="" class="formInput" id='inputContactMsg'></textarea>
</div>
<div class="row" id='sendMsg'>
<div class="row" id='separator'>
<div class="col-xs-offset-2 col-xs-8">
<hr style="height: 0.5px; background-color: silver;">
</div>
</div>
<div class="col-xs-8">
<strong id='showContactErrMsg'></strong>
</div>
<div class="col-xs-4">
<button type="submit" id='contactFormBtn'>Send</button>
</div>
</div>
</div>
</div>
</div>
Edit: Added textarea into one div and gave class="extra" to it.

Footer and container inside each other when I'm on small sized screen

I've created a login page, everything seems normal when the page is maximized but when I'm on xs and sm sized screen my footer and content area goes inside of each other and there's a gap at the bottom how may I solve this problem?
https://jsfiddle.net/tLhy3av1/
Full Code:
.navbar-default.navbar-fixed-top {
background-color: #FFFFFF;
border-color: #E7E7E7;
font-family: gesta;
font-size: 20px;
padding-bottom: 10px;
}
.container.top {
margin-top: 50px;
}
.navbar-header.topHeader {
margin-left: 50%;
}
.mid {
width: 100%;
height: 497px;
background-color: #F1F2F4;
margin-top: 110px
}
.myFooter {
margin-bottom: 0px;
width: 100%;
height: 50px;
background-color: #2F2F2F;
border-top: 2px inset #F1F2F4;
}
.formSignIn {
width: 25%;
height: 100%;
margin: 60px auto 30px auto;
}
.form-signin-heading {
color: #8F95A3;
font-weight: 400;
}
.btn {
font-size: 1.1em;
background-color: #F04B14;
border: 1px solid #CE3D0D;
background-color: #f04b14;
box-shadow: 0px -1px 0px #CE3D0D inset;
border-radius: 0;
text-align: center;
}
.btn:hover {
background-color: #F04B14;
box-shadow: 0px -1px 0px #CE3D0D inset;
border: 1px solid #CE3D0D;
background-color: #F47E57;
}
.forget {
margin-top: 10px;
float: right;
}
a {
font-weight: 400;
color: #2693CE;
}
a:hover {
font-weight: 400;
color: #2693CE;
}
.checkbox {
display: inline-block;
}
.formSignIn p {
margin-top: 30px;
text-align: center;
}
#name {
text-align: center;
color: #8F95A3;
font-family: arial;
font-weight: 400px;
font-size: 15px;
}
#bottomLinks a {
text-decoration: none;
color: #8F95A3;
font-family: arial;
font-weight: 400px;
}
#bottomLinks a:hover,
bottomLinks a:focus,
bottomLinks a:active {
text-decoration: underline;
color: #535865;
font-family: arial;
font-weight: 400px;
}
.break {
clear: both;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container top">
<div class="navbar-header topHeader">
<a class="navbar-brand" href="index.html">Logo</a>
</div>
</div>
</nav>
<div class="container mid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="form-signin formSignIn">
<h4 class="form-signin-heading">Log in</h4>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Remember me
</label>
</div>
<div class="forget">
Forgot password?
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<p>Not a member yet? Sign Up
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<p id="name">© Biz Yapalım <span id="bottomLinks"> Privacy Terms</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class "break">
</div>
<footer class="container myFooter">
</footer>
<!--Javascript-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
On your form set width to px or some other fixed value since percentage is from the width of a window and will always be a trouble:
.formSignIn {
width: 200px; // 25%
}
Beside that, since you are covering more resolutions set some properties through media queries where you can stay with % value.

Is there are any way of making carousel attachment fixed

Is there are any way of making carousel attachment fixed just like we can use to make background-image attachment fixed? Example
https://jsfiddle.net/5c3b56a7/3/
if there are any way of fixing slider background attachment that would be really helpfull for me thanks.
<div id="main-slider" class="owl-carousel owl-theme text-center">
<div class="item text-center">
<div class="position col-lg-12 text-center">
<h1 class="swiper-slide text-center">
<strong>
welcome to the shop
</strong>
</h1>
<p class="subtitle">
<span>
Take your time looking around & don't be shy
</span>
</p>
<p class="top-space">
<button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
START BROWSING
</button>
</p>
</div>
<img src="img/front_girl1.jpg">
</div>
<div class="item text-center">
<div class="position col-lg-12 text-center">
<h1 class="swiper-slide">
<strong>
Huge summer sale
</strong>
</h1>
<p class="subtitle">
<span>
All sunglasses 50% off while supplies last
</span>
</p>
<p class="top-space">
<button type="button" class="btn btn-default color-red btn-lg button hvr-float-shadow" id="focus">
SHOP SUNGLASSES
</button>
</p>
</div>
<img src="img/front_girl_3.jpg" style="background-position:fixed">
</div>
<div class="item text-center">
<div class="position col-lg-12 text-center">
<h1 class="swiper-slide">
<strong>
Make a statement
</strong>
</h1>
<p class="subtitle">
<span>
Check the store for more information
</span>
</p>
<p class="top-space">
<button type="button" class="btn btn-default color-green btn-lg button hvr-float-shadow" id="focus">
SHOP COATS
</button>
</p>
</div>
<img src="img/front_girl_2.jpg" style="background-position:fixed">
</div>
</div>
My CSS
/*slider*/
#main-slider .item img{
display: block;
width: 100%;
height:700px;
z-index: -1;
}
.position{
position: absolute;
padding-top: 240px;
}
.swiper-slide{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 60px;
line-height: 79px!important;
color: #fff;
}
.subtitle{
font-family: 'Rouge Script', cursive;
font-size: 40px;
line-height: 39px!important;
font-weight: 400;
color: #fff;
font-style: italic;
}
strong{
font-weight: bold;
}
.btn-default{
background-color: #5cbcf6;;
border-radius: 0px;
color: #fff;
height: 61px;
margin-bottom: 20px;
font-size: 15px;
width: 250px;
float: none;
text-align: center;
border: none;
letter-spacing: 3px;
text-transform: uppercase;
}
.btn-default:hover{
background-color: #5cbcf6;;
border-radius: 0px;
color: #fff;
height: 61px;
margin-bottom: 20px;
font-size: 15px;
width: 250px;
float: none;
text-align: center;
border: none;
letter-spacing: 3px;
text-transform: uppercase;
`enter code here`}
.color-red{
background-color:#ff4f57!important;
}
.color-green{
background-color: #54df92!important;
}
.top-space{
padding-top: 30px;
}
.top-spacing{
padding-top: 60px;
}
.space-from-top{
margin-top: 30px;
}