The html elements on this simple to do list app i'm making won't properly align themselves when ran on mobile. Essentially when on mobile, the h1 tag should be in the center of the screen as well as the input box and add button under it and the tasks being added to the page, instead on mobile everything is off alignment. Any fixes?
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
display: none;
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<div class="input-group">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
you need to make some css changes in media.
Center the container for small device using margin
Remove display: none for #btn in media query
Use flex to align add button for small device
clearfix the .input-group using before and after
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
margin: 0 auto; /* to align center */
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
/* display: none; */
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
/*** Additional css ***/
.input-group.flex {
display: flex;
justify-content: center;
}
.input-group:before, .input-group:after {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<!-- Added one additional class -->
<div class="input-group flex">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
working fiddle here
Related
I have a Popup image with a close button that its not working
could someone check the issue please.
jQuery(document).ready(function($) {
var $modal_popup = '9a3a3fc18bd438fca6433562e193b511';
var $only_once = '1';
var $s3waas_modal_cookie = getCookie('s3waas_modal_cookie');
if ($modal_popup != $s3waas_modal_cookie) {
deleteCookie('s3waas_modal_cookie');
$s3waas_modal_cookie = null;
}
if (!$only_once) {
$('.modalbox-container').removeClass('hide');
$('html,body').css('overflow', 'hidden');
$('.modalbox-banner').focus();
} else {
if ($s3waas_modal_cookie == null) {
$('.modalbox-container').removeClass('hide');
$('html,body').css('overflow', 'hidden');
$('.modalbox-banner').focus();
}
}
$("#s3wassModalpopupClose").click(function() {
if ($only_once) {
let nonce = $(this).attr('data-nonce');
$.post(ajaxurl, {
nonce: nonce,
action: 's3waas_modal_cookie'
}, function() {
return true
});
}
$(".modalbox-container").hide();
$('.skip-to-content').focus();
$('html,body').css('overflow', '');
});
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
if ($(".modalbox-container").length > 0) {
$("#s3wassModalpopupClose").trigger('click');
}
}
});
})
.modalbox-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.75);
overflow-y: auto;
display: inline-grid;
align-items: center;
z-index: 999999;
}
.modalbox-container .modal-box {
display: inline-block;
max-width: 1000px;
position: relative;
margin: 0 auto;
}
.modalbox-container .modal-box img {
max-width: 100%;
border: 2px solid #fff;
border-radius: 5px 0 5px 5px;
box-shadow: 0 0 30px 0 #000;
}
.modalbox-container .close-popup {
position: absolute;
top: 0;
right: -40px;
width: 40px;
height: 40px;
line-height: 40px;
background: #fff;
text-decoration: none;
font-size: 40px;
color: #000;
border-radius: 0 5px 5px 0;
}
.contrast .modalbox-container .close-popup {
background: #ff0;
}
#media (max-width: 800px) {
.modalbox-container .modal-box {
margin: 45px;
}
.modalbox-container .modal-box img {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>New Page 1</title>
</head>
<body class="home page-template-default page page-id-26984 mva7-thc-activetheme-district-theme lang-en wpb-js-composer js-comp-ver-5.4.7 vc_responsive">
<div class="modalbox-container hide">
<div class="modal-box">
<a href="#" class="modalbox-banner" title="Tamil poster">
<img src="https://cdn.s3waas.gov.in/s38fe0093bb30d6f8c31474bd0764e6ac0/uploads/2021/05/2021051855.jpg" title="Tamil poster" alt="popoup">
</a>
×
</div>
</div>
</body>
</html>
This image slide show is positioned in the middle on my page how do I make it so that it's in the middle but slightly higher? The things I've tried don't currently work which includes my css code. the top: xx%; thing doesn't work either. As you can see the images are actually behind the question container and I want it so that it is above the question container (not in front).
html:
<div class="container2">
<img name="slide">
css
.slide {
width: auto;
max-width: 1%;
height: auto;
max-height: 30%;
position: absolute;
z-index: 1;
top: 50%;
}
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
const startmsgs = document.getElementById('startmsg')
var i = 0;
var images = [];
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
window.onload=changeImg;
}
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
changeImg()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function startGame() {
startButton.classList.add('hide')
startmsgs.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
setStatusClass(selectedButton, correct);
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
}
else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'Are you excited to learn about the immune system?',
answers: [
{ text: 'Yes', correct: true },
{ text: 'YES!!!', correct: true },
{ text: 'No', correct: false },
{ text: 'YES!!!!!!!', correct: true }
]
},
{
question: 'Our immune system protects from the thousands of different viruses we encounter daily! Without it, a simple paper cut could mean death. So to demonstrate how the immune system functions to protect us from bacterias, viruses and foreign bodies, we start our journey with a paper cut!',
answers: [
{ text: 'I am exicted!', correct: true },
]
}
]
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
position: absolute;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.slide {
width: auto;
max-width: 1%;
height: auto;
max-height: 30%;
position: absolute;
z-index: 1;
top: 50%;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!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">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="container2">
<img name="slide">
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
<script src="slide.js"></script>
</body>
</html>
If I've understood what you want correctly, you'd need to add this to .slide:
transform: translateY(-50%)
top: 50% will put the top of the slider in the middle of the screen so this will push it back up based on the height of the slider.
Edit:
Based on your new code you could do the same thing on .container. Or you could use
margin-top: -100px
or
margin-bottom: 100px
or
position: relative;
top: -100px;
You can try:
Css-
Margin-top: -x;
And add !important
I need to position white container with the "hello" to be above the main question container... right now the "hello" container is to the side of the main question container if you run the code snippet below. How do I do this? I don't know how to add more details so don't bother reading this... I'm just trying to fill in more words so I can publish this question.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function showwords (startwords) {
questionElement.innerText = startwords.startwords
}
function startGame() {
startButton.classList.add('hide')
startwords.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
function blank() {
if (question == '') {
image1.classList.remove('hide')
}
}
const questions = [
{
question: 'What is 4+2?',
answers: [
{ text: '1', correct: false },
{ text: '2', correct: false },
{ text: '3', correct: false },
{ text: '6', correct: true }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
},
]
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!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">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
<div class="container2">
<div id="imgcontainer">hello</div>
<div id="image1" class="hide">
<img src="img/wantedvirus.png" alt="image1">
</div>
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>
just reposition in the html container2
var startButton = document.getElementById('start-btn');
const questions = [
{
question: 'What is 4+2?',
answers: [
{ text: '1', correct: false },
{ text: '2', correct: false },
{ text: '3', correct: false },
{ text: '6', correct: true }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
},
]
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function showwords (startwords) {
questionElement.innerText = startwords.startwords
}
function startGame() {
console.log('hello');
startButton.classList.add('hide')
startwords.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
function blank() {
if (question == '') {
image1.classList.remove('hide')
}
}
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!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">
<!--<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script> -->
<title>Quiz App</title>
</head>
<body>
<div>
<div class="container2">
<div id="imgcontainer">hello</div>
<div id="image1" class="hide">
<!--<img src="img/wantedvirus.png" alt="image1">-->
</div>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="wrapper">
<!--<img src="img/uni.png" alt="image">-->
</div>
</div>
<div id="particles-js"></div>
<!-- <script src="particles.js"></script>
<script src="app.js"></script>-->
</body>
</html>
EDIT:
For your updated Question do this:
Add font-size: 0.8em; to
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
font-size: 0.8em;
}
and top:20%; position:absolute; to .container2
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
top:20%;
position:absolute;
}
Example:
https://codepen.io/pr0cz/pen/zYrevRm
Codepen
You can add position: relative; to container(that makes children with position absolute to not get out of the container) and to container2 add this this lines to css:
position: absolute;
margin: auto;
z-index: 3;
position: absolute; let it go over other div.
margin: auto; makes it positioned to the center of the parent div.
z-index: 3; to make it appear over the other divs.
So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.
I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.
I have a problem with my input.
As you can see, my input is taking up too much space. It doesn't have margin or padding.
Here's my code (I am using Boilerplate v5.3.0).
How can I fix it so it just takes the space that it needs?
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
When you float an element, you remove it from the normal flow of the document. As a result, other block elements don't respect their space.
Since both elements on the line (Modelo and Anio) are float: left, the next block element (Email) doesn't see them, and takes their space. So the Email div now lies hidden under the split elements.
However, the input element inside the Email div is not a block element. It's an inline element, by default. And inline elements respect the space of floated elements. (This is how text is able to wrap around floated images.)
So in your code, while the Email div shifts below the split element (on the z-axis), the input inside the Email div stays below the split element (on the y-axis).
When you highlight the Email element in dev tools, it illustrates this split across two rows.
One solution is to give the Email div display: inline-block and width: 100%.
div.selectorWrapper:nth-child(4) {
display: inline-block;
width: 100%;
}
Another solution is to add clear: both to the Email div. (Read more about clearing floats.)
div.selectorWrapper:nth-child(4) {
clear: both;
}
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
div.selectorWrapper:nth-child(4) {
clear: both;
}
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
In your question you are showing the properties of div, check properties of a tag inside div. The a tag is having padding:10px;.
This is happening because a.selectButton has padding of 10px. You can remove it completely or you can only remove the left padding to fix the problem.
a.selectButton {
padding-left: 0;
}
Insert the above code in your style tag to fix the problem.