Responsive form with different background - javascript

h2{
font-weight: 700;
}
h4{
color:#F13F6C
}
.signup-section{
padding-top: 2rem;
}
form{
padding-top:10rem;
}
#media (min-width: 1200px){/*Mac*/
.background-form{
height: 60em;
width: auto;
background: url("https://www.apple.com/v/macbook-air/k/images/specs/mba_router__c00eqnbbyuy6_large_2x.png") center center;
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
margin-bottom: -12rem;
}
}
#media (max-width: 1200px){
.contatti{
display: none !important;
}
}
#media (max-width: 1200px) and (min-width: 500px){/*Ipad*/
.background-form{
height: 60em;
width: auto;
background: url("https://miopc.it/90275-large_default/apple-ipad-pro-129-con-chip-m1-quinta-gen-wi-fi-256gb-grigio-siderale.jpg") center center;
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
margin-bottom: -12rem;
}
}
#media (max-width: 500px){/*Iphone*/
.background-form{
height: 70em;
width: auto;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/IPhone_11_Pro_Midnight_Green.svg/1200px-IPhone_11_Pro_Midnight_Green.svg.png") center center;
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
margin-bottom: -35rem;
}
}
.contatti{
padding-top: 10rem;
}
#contacts .form-control{
background-color: transparent;
border: none;
border-bottom:1px solid rgb(255, 255, 255);
border-radius: 0;
}
#contacts .form-control::-webkit-input-placeholder{
color: white
}
#contacts .form-control:focus::-webkit-input-placeholder{
color: rgba(147, 147, 147, 1.00);
}
#contacts .form-control:focus{
background-color: transparent;
box-shadow: 0 3px 0 0 rgb(249,249,249);
transition: 0.3s ease-in-out;
}
textarea{
resize: none;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body><div id="contacts">
<!-- SINGUP -->
<section id="signup" class="signup-section">
<div class="background-form">
<div class="row">
<div class="contatti col-4 d-flex flex-column text-center offset-2 text-white mt-5">
<h3>Contacts</h3>
<h5 style="color: #0000c5; font-weight: 400;">Info</h5>
<p>email#gmail.com<br>123456789<br><br></p>
<h5 style="color: #0000c5; font-weight: 400;">Address</h5>
<p>abcdefghijklm0<br>
abababababababab<br> Mexico
</p>
</div>
<div class="col-4 d-flex flex-column mt-5 col-xl-5">
<form class="invia text-white text-left">
<fieldset>
<div class="row">
<div class="col-lg-6 col-xl-4">
<div class="form-floating">
<label for="nome">Name</label>
<input type="text" name="nome" class="form-control text-white" id="nome" placeholder="" required>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="form-floating">
<label for="cognome">Surname</label>
<input type="text" name="cognome" class="form-control text-white" id="cognome" placeholder="" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xl-8">
<div class="form-floating">
<label for="nome">mail</label>
<input type="email" name="mail" class="form-control text-white" id="email" placeholder="" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xl-8">
<div class="form-fluid">
<label for="nome">Text</label>
<textarea class="form-control text-white" name="messaggio" placeholder="" id="floatingTextarea2" style="height: 80px" required></textarea>
<div class="mx-auto mt-4 col-xl-7">
<button class="fill btn-block " type="submit">Send</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Hi everyone, I have a problem on a form that has to adapt to the different responsive modes (the background will change according to the device in which the form will be viewed). I want to use only one form, without having to create several, I'm using Bootstrap, but when I can adapt it to the responsive version on ipad or iphone, then it no longer works on Mac. Can you help me solve it? (PS. Only on the Mac appears the writing on the sides with the info, on the responsive it disappears and it works, on CodePen I don't understand why it doesn't read it, you can not even consider it that)

#ella I cannot find any issue with your CSS.
According to the HTML you have posted it does not contain your custom CSS file. can you check it by adding
<link rel="stylesheet" href="style.css">
to your head tag.

Related

Html + Css page not responsive

I am new to html I created a html page and looks good but don't know why the page is not responsive on mobile
here is my html and css code please someone help me
.link-menu {
color: black;
}
.topbar-profile-photo {
width: 1.5em;
height: 1.5em;
position: relative;
}
.story-profile-photo {
width: 56px;
height: 56px;
position: relative;
border-width: 2px !important;
}
.post-profile-photo {
width: 46px;
height: 46px;
position: relative;
border-width: 2px !important;
}
.sidenav-profile-photo {
width: 56px;
height: 56px;
position: relative;
}
.comment-box {
border-top: 1px solid lightgray;
}
.input-post {
outline: none;
}
.btn-ig {
background-color: transparent;
border: 0;
color: #89216b;
font-weight: 600;
right: 0;
bottom: 0;
top: 0;
outline: none !important;
}
.btn-ig:hover,
.btn-ig:focus {
background-color: transparent !important;
color: #89216 !important;
}
.profile-info {
font-size: 14px;
}
.profile-info-username {
display: block;
font-weight: 700;
}
.sugest-profile-photo {
width: 46px;
height: 46px;
position: relative;
}
.sugest-username {
font-size: 14px
}
.btn-group button {
background-color: white; /* Green background */
border: solid #d1cfcf; /* Grey border */
border-width: 1px; /* Border width */
color: #89216b; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left; /* Float the buttons side by side */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/d3d6f2df1f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container justify-content-center">
<div class="d-flex flex-row justify-content-between align-items-center col-9">
<a class="navbar-brand" href="#">
<img src="assets/images/ig-logo.png" alt="" loading="lazy">
</a>
<div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</div>
</nav>
</div>
<div class="mt-4">
<div class="container d-flex justify-content-center">
<div class="col-9">
<div class="row">
<div class="col-8">
<!-- START OF STORIES -->
<div class="card">
<div class="card-body d-flex justify-content-start">
<ul class="list-unstyled mb-0">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
</li>
</ul>
</div>
</div>
<!-- END OF STORIES -->
<!-- START OF POSTS -->
<div class="d-flex flex-column mt-4 mb-4">
<div class="card">
<div class="card-header p-3">
<div class="d-flex flex-row align-items-center">
<div
class="rounded-circle overflow-hidden d-flex justify-content-center align-items-center border border-danger post-profile-photo mr-3">
<img src="assets/images/profiles/profile-1.jpg" alt="..."
style="transform: scale(1.5); width: 100%; position: absolute; left: 0;">
</div>
<figure>
<span class="font-weight-bold">Outfitters</span>
<figcaption>08/03/2021</figcaption>
</figure>
</div>
</div>
<div class="card-body p-0">
<p class="d-block mb-1" style="margin: 10px;">Lil drone shot I got a while back but never posted.</p>
<div class="embed-responsive embed-responsive-1by1">
<img class="embed-responsive-item" src="assets/images/posts/post-1.jpg" />
</div>
<div class="btn-group" style="width:100%">
<button style="width:33.3%">Like</button>
<button style="width:33.3%">Comment</button>
<button style="width:33.3%">Share</button>
</div>
<div class="pl-3 pr-3 pb-2">
<strong class="d-block">365 likes</strong>
<strong class="d-block">Outfitters</strong>
<button class="btn p-0">
<span class="text-muted">View all 100 comments</span>
</button>
<div>
<div>
<strong class="d-block">Usama</strong>
<span>❤️💓💓💓💓💓</span>
</div>
<div>
<strong class="d-block">Saqib</strong>
<span>Hi</span>
</div>
</div>
<small class="text-muted">4 HOURS AGO</small>
</div>
<div class="position-relative comment-box">
<form>
<input class="w-100 border-0 p-3 input-post" placeholder="Add a comment...">
<button class="btn btn-primary position-absolute btn-ig">Post</button>
</form>
</div>
</div>
</div>
</div>
<!-- END OF POSTS -->
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<!-- JS, Popper.js, and jQuery -->
<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/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</footer>
</html>
Seems that problem in using col-9 and col-8 those you apply for divs inside div.container
col-9 and col-8 classes have max-width and flex properties those limit the width.
Just remove them, and it should help with mobile view, but you have to tweak your CSS styles a little bit more, depends what you want to achieve to desktop and tablet screens.

Anomalous padding/margin during slideToggle() jquery

Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.
I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.

How can I get my page to display scaled without scrolling?

So a buddy of mine encountered an issue, the website displays properly when on a screen that's 1440px by 1024px, however on a smaller screen you have to scroll to see further down. We've both been searching and can't figure it out, now it could be the fact that it's made primarily from pngs that the scaling doesn't work properly or it could also be that we're both idiots and it's actually very simple, whichever the case we can't figure it out So hopefully someone can. Overflow-y:hidden will not fix the problem as that would only prevent scrolling and the content of the page stays as is. We've also tried getting JS to detect the window size and it also doesn't seem to work.
Here it is at 100% zoom on a 1366px by 768px screen
https://imgur.com/LN6YJUJ
This is what he wants it to look like without the scrolling of course (This is at 65% zoom same screen)
https://imgur.com/97vjDs0
Here's the CSS and HTML (it won't run due to missing files but I assume the issue would be in these)
html{
height: 100%;
}
body{
background: url("../img/background.png") no-repeat center center fixed;
background-size: cover;
}
.margin-15{
margin-top: 7%;
}
.container-fluid{
height: 100vh;
min-height: 100%;
min-width: 100%;
}
.Rectangle{
width: 168px;
height: 44px;
margin-top: 3%;
border-radius: 18px;
background-color: #292929;
left: 43%;
top: 28.3%;
}
.Rectangle p{
text-align: center;
padding-right: 10%;
padding-top: 6%;
width: 185.2px;
height: 34.3px;
font-family: Roboto;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
}
.Rectangle p span{
color: #a3e8f5;
}
.navBar1 img{
max-width: 40%;
padding-top: 2%;
object-fit: contain;
}
/**.col-xs-3 .atomix{
padding-top: 4%;
}
.col-xs-3 .Rectangle{
margin-top: 20%;
}
.col-xs-3 .navBar1{
margin-top: 10%;
padding-bottom: 20%;
}
.col-xs-3 .atomix{
margin-top: 2%;
}
.col-xs-3 .forums{
margin-top: -5%;
}
.col-xs-3 .discord{
margin-top: 4%;
} **/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | Lectric</title>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\master.css">
<script src="https://cdn.jsdelivr.net/gh/leonardosnt/mc-player-counter#1.1.1/dist/mc-player-counter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid mt-5">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-3 margin-3">
<div class="atomix">
<img src="img\atomix.png" alt="Atomix" class="img-responsive mx-auto d-block"/>
</div>
<div class="col-lg-12 col-md-12 col-xs-3">
<div class="Rectangle playersOnline mx-auto d-block">
<p><span data-playercounter-ip="atomixprison.net">0</span> online</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-3">
<div class="navBar1">
<img src="img/NavBar1.png" class="img-responsive mx-auto d-block" alt="navbar"/>
</div>
</div>
<div class="row margin-4 margin-15">
<div class="col-lg-5 col-md-5 mb-0">
<div class="webStore">
<img src="img/webstore.png" alt="webstore" class="mx-auto d-block img-responsive">
</div>
</div>
<div class="col-lg-2 mt-xl-5 col-md-5 mb-md-0">
<div class="forums">
<img src="img/forums.png" alt="forums" class="mx-auto d-block img-responsive">
</div>
</div>
<div class="col-lg-5 col-md-5 mb-0">
<div class="discord">
<img src="img/discord.png" alt="discord" class="mx-auto d-block img-responsive">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<script type="text/javascript">
$('#body').css('min-height', '100%');
</script>
</body>
</html>
SO, i'm 100% certain that it has a scroll on my screen because of the odd sizing HOW ever the issue was resolved, it turns out the person who was receiving the website didn't have their zoom set to 100% so it looked weird for them..... sigh... some people....

How can I extend image height to fit my whole screen?

Here is my homepage
I want to extend the height of my image to fit the whole screen. I know that I have to adjust the height attribute, I did that, and nothing seems to work.
CSS
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url('../img/hero-slider/boxfill2sm.jpg');
background-size: cover;
position: relative;
padding-top: 0;
height: auto;
}
Note: I tried height: auto;. It doesn't do anything.
HTML
<section class="hero">
<div class="container-fluid no-margin no-padding">
<div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
<div>
<div class="row">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
<div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp fadeInDown">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.ED</h2>
<p>EFFECTIVE DIGITAL LEARNING</p>
<p>Tutti.ed is our educational software platform that empowers education companies to bring state-of-the-art digital learning products to market quickly.</p>
<a class="btn btn-primary" href="/tutti-ed">Learn More</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
<!-- <img class="iphone" src="img/hero-slider/iphone.png" width="649" height="400" alt="Coming Soon Page"/> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.DEV</h2>
<p>BY DEVELOPERS, FOR DEVELOPERS</p>
<p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently. Get it together with Tutti!</p>
<a class="btn btn-primary" href="/tutti-dev">Learn more</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:70px;" class="text-left">WHY AVENIROS?</h2>
<p>Our team has been building content delivery platforms for over 20 years. We have experience with development from large scale LMS installations to mobile applications. We can offer full turn-key technical services for your content or help your technical team get to market on time.
</p>
<a class="btn btn-primary" href="#" data-scrollto="#about">About us</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<div class="video">
<!-- <img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/> -->
<!--
<img src="img/hero-slider/macbook.png" width="782" height="422" alt=""/>
<div class="vide-holder">
<iframe src="//player.vimeo.com/video/79036490?byline=0&portrait=0&color=ffeeac" width="720" height="405"></iframe>
</div>
-->
</div>
</div>
</div>
</div></div><div class="bx-controls bx-has-pager"><div class="bx-pager bx-default-pager"><div class="bx-pager-item">1</div><div class="bx-pager-item">2</div><div class="bx-pager-item">3</div></div></div></div>
</div>
</div>
</div>
<!--Hero Slider-->
<div class=" col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" id="hero-right" style="height: 496px;">
<div>
<div>
<div class="animated fadeInLeft">
<h1>Learnosity</h1>
<p>Did you know we are partnered with learnosity?</p>
<p>To learn more click the button below..filler. </p>
<a class="btn btn-primary" href="#">Learnosity</a>
</div>
</div>
</div>
<!--Close Hero Slider-->
</div>
</div>
</section>
This should work
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
You need to determine screen height for that so its better to use JavaScript
which can be accessed with screen.height. Also if you are using jQuery, you can get this property with $( window ).height();
$(document).ready(function() {
h=$(window).height();
$('.hero').css({'height':h+'px'});
});

Positioning text and the form on the parallel to each other (side by side) - HTML

I am trying to position a form and some paragraph texts on the left side by side so they are parallel to each other how ever I dont understand how I can do this
Currently I am trying to float the form to the right, however the social Icons then move from the bottom and position on the left of the screen
I want to position the ids: "myForm" and class "info" side by side
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-color: black;
background-image: url();
color:white;
font-family: sans-serif;
}
#name {
color:white;
font-family: coolvetica;
font-size: 50px;
text-align: center;
padding-top: 60px;
letter-spacing: 6px;
font-weight: bolder;
text-transform: uppercase;
}
#magician {
color:white;
font-family: raleway;
font-size: 25px;
letter-spacing: 11px;
margin-top: 2%;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -o-linear-gradient(left, #ccc, #ffffff, #ccc);
width:50%;
max-width: 100%;
}
#info {
}
#info h2 {
color:white;
font-family: Baron neue;
font-size: 30px;
padding: 30px 0px 0px 10px;
margin-right: 50%;
}
#info p {
font-family: sans-serif;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
margin-right: 50%;
}
#contact {
padding-left: 10px;
line-height: 1.7em;
margin-right: 50%;
}
#myForm {
top:0;
float:right;
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li>HOME</li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li class="current">ENQUIRIES</li>
</ul>
</div>
<h1 id="name">Arshdeep Soni</h1>
<p id="magician">Magician</p>
<hr>
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
</div>
<div class="main">
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</body>
</html>
You should move "myForm" outside of the "info" div like this
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
</div>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
And your CSS for those elements should look like this
#myForm {
display:inline-block;
}
#info {
width: 50%; // Adjust to your liking
float:left;
}
https://jsfiddle.net/srf9w1w3/
You colud use box model in css to do that, please check the code below in the snippet
#media (min-width: 500px) {
.row:after {
content: " ";
display: table;
clear: both;
}
.column-half {
float: left;
width: 50%;
padding: 0 20px;
box-sizing: border-box;
border:solid 1px #ccc;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.dcenter {
display:block;
text-align:center;
padding:5px;
}
<div class="row">
<div class="column-half">
HTML INFO HERE
</div>
<div class="column-half">
FORM CODE HERE
</div>
</div>
<div class="clearfix"></div>
<div class="dcenter">icons here</div>

Categories

Resources