Develop Reference

Centering two elements horizontally? [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Vertically align text next to an image?
(26 answers)
Closed 2 years ago.
I have this problem where I want to line up two elements (a <p> and a <button>) but I can't seem to find a way of lining them up; I have tried using padding, margin, flex and even grid design, but nothing seems to work.
Here is an image showcasing the problem:
Image
And here is a code snippet of my latest attempt:
.line p {
display: inline-block;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>

This is actually quite easy with flexbox. Make the p tag a flex element and then use the align-items: center; to make them appear on the same line.
.line p {
display: flex; /* Change from inline-block to flex */
align-items: center; /* Added to make them appear on the same line */
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>

Content Editable not saving with localStorage

I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom

You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});

You are using the id "editable" twice, could you change that and retry?

<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()

Issues with Calendar button using Javascript and JQuery

I'm trying to put together an event management calendar but my javascript doesn't seem to be working. I'm trying to add a button that allows the user to create a new event and the button isn't working at all.
Here's the HTML and Javascript/Jquery. I've also added the CSS just in case
< script src = "jquery-3.3.1.min.js" >
var newEventHolder = document.getElementById("newEventHolder");
var eventForm = document.getElementById("newEventForm");
var eventDate = document.getElementById("eventDate");
var addEvent = document.getElementById("addEvent");
var cancel = document.getElementById("cancelAddEvent");
var upcomingEvents = document.getElementById("upcomingEvents");
var eventHolder = document.getElementById("eventHolder");
var removeEvent = document.getElementById("removeEvent");
// Show New Event form
$(newEventHolder).click(function() {
$(eventForm).slideDown(400);
});
// Add Datepicker to Date input
$(eventDate).datepicker();
// Close New Event form
$(cancel).click(function() {
$(eventForm).slideUp(400);
});
// Delete icon removed event from list
$(removeEvent).click(function() {
$(eventHolder).addClass('hide').stop();
}); <
/script>
.container {
margin: 50px auto;
width: 900px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}
#newEventHolder {
margin-bottom: 10px;
width: 100%;
height: 100px;
border: 3px dashed #85b9e4;
text-align: center;
line-height: 4;
font-size: 24px;
color: #85b9e4;
box-sizing: border-box;
border-radius: 3px;
}
#newEventHolder:hover {
border: 3px dashed #3289d2;
color: #3289d2;
cursor: pointer;
}
#newEventForm {
width: 100%;
padding: 15px;
box-sizing: border-box;
display: none;
}
#newEventForm label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 16px;
color: #244674;
}
#newEventForm input[type="text"] {
padding-left: 15px;
margin-bottom: 20px;
height: 50px;
width: 100%;
line-height: 1.875;
font-size: 16px;
color: #a7c1d9;
border: 2px solid #c4ddf2;
outline: 0;
box-sizing: border-box;
background: #f6fafd;
}
#newEventForm input[type="text"]:focus {
background: #fff;
border: 2px solid #9ac5e9;
}
#newEventForm textarea {
margin-bottom: 20px;
padding: 5px;
height: 120px;
width: 100%;
line-height: 1.875;
font-size: 16px;
color: #a7c1d9;
border: 2px solid #c4ddf2;
outline: 0;
box-sizing: border-box;
border-radius: 3px;
background: #f6fafd;
}
#newEventForm textarea:focus {
background: #fff;
border: 2px solid #9ac5e9;
}
#newEventForm button {
margin-right: 10px;
padding: 0 15px;
background: #849ebf;
color: #eef5fb;
font-size: 16px;
font-weight: 400;
border: 0;
outline: 0;
line-height: 3.5;
border-radius: 3px;
cursor: pointer;
}
#newEventForm button:hover {
background: #6284ae;
}
#newEventForm button#cancelAddEvent {
background: #d9e9f7;
color: #4c6a91;
cursor: pointer;
}
#newEventForm button#cancelAddEvent:hover {
background: #c4ddf2;
}
#eventHolder {
padding: 17px 15px;
margin-bottom: 10px;
background: #c4ddf2;
width: 100%;
height: 100px;
box-sizing: border-box;
border-radius: 3px;
}
#eventHolder::after {
content: "";
display: table;
clear: both;
}
#eventHolder .event-date-holder {
float: left;
background: #a7c1d9;
margin-right: 20px;
padding: 10px;
width: 50px;
text-align: center;
border-radius: 4px;
box-shadow: 0px 1px 0px 0px #d9e9f7;
}
#eventHolder .event-date-holder #dateNumber {
display: block;
font-size: 30px;
font-weight: 700;
color: #0c1726;
}
#eventHolder .event-date-holder #dateDay {
text-transform: uppercase;
}
#eventHolder .event-details-holder {
float: left;
width: 520px;
line-height: 3.2;
}
#eventHolder .event-details-holder::after {
content: "";
display: table;
clear: both;
}
#eventHolder .event-details-holder h1 {
float: left;
margin-right: 30px;
vertical-align: bottom;
font-size: 20px;
font-weight: 600;
color: #244674;
}
#eventHolder .event-details-holder span#eventDescription {
position: relative;
padding-top: 4px;
color: #0f2b42;
float: left;
font-size: 18px;
}
#eventHolder .event-details-holder span#eventDescription::before {
content: "//";
position: absolute;
left: -20px;
color: #2a7cc0;
}
#eventHolder .event-details-holder ul#editTools {
float: right;
margin: 0px 0px 0px 10px;
padding: 0px;
}
#eventHolder .event-details-holder ul#editTools li {
display: inline;
margin-right: 15px;
padding-top: 5px;
font-size: 20px;
color: #5ca1db;
}
#eventHolder .event-details-holder ul#editTools li .fa {
text-decoration: 0px 1px 0px 0px #d9e9f7;
}
#eventHolder .event-details-holder ul#editTools li .fa:hover {
color: #3289d2;
cursor: pointer;
}
#eventHolder .event-details-holder ul#editTools li:last-child {
margin-right: 0;
}
.hide {
display: none;
}
ul {
list-style-type: none;
}
<div id="newEventForm">
<label for="event-date">Event Date</label>
<input type="text" id="eventDate">
<label for="event-title">Event Title</label>
<input type="text" name="event-title" id="eventTitleInput"
maxlength="80" />
<label for="event-description">Description</label>
<textarea name="event-descripton" id="eventDescriptionInput">Event
Description</textarea>
<button name="add-event" id="addEvent">Add New Event</button>
<button name="cancel-add-event" id="cancelAddEvent">Cancel</button>
</div>
<ul id="upcomingEvents">
<li id="eventHolder">
<div class="event-date-holder">
<span id="dateNumber">23</span>
<span id="dateDay">Jan</span>
</div>
<div class="event-details-holder">
<h1>Akron Flea</h1>
<span id="eventDescription">Lorem ipsum dolar sit amet…
</span>
<ul id="editTools">
<li><i class="fa fa-pencil-square-o"></i></li>
<li><i class="fa fa-bars"></i></li>
<li><i class="fa fa-times" id="removeEvent"></i></li>
</ul>
</div>
</li>
<li id="eventHolder">
<div class="event-date-holder">
<span id="dateNumber">23</span>
<span id="dateDay">Jan</span>
</div>
<div class="event-details-holder">
<h1>Cleveland Flea</h1>
<span id="eventDescription">Lorem ipsum dolar sit amet…
</span>
<ul id="editTools">
<li><i class="fa fa-pencil-square-o"></i></li>
<li><i class="fa fa-bars"></i></li>
<li><i class="fa fa-times" id="removeEvent"></i></li>
</ul>
</div>
</li>
<li id="eventHolder">
<div class="event-date-holder">
<span id="dateNumber">23</span>
<span id="dateDay">Jan</span>
</div>
<div class="event-details-holder">
<h1>Columbus Flea</h1>
<span id="eventDescription">Lorem ipsum dolar sit amet…
enter code here</span>
<ul id="editTools">
<li><i class="fa fa-pencil-square-o"></i></li>
<li><i class="fa fa-bars"></i></li>
<li><i class="fa fa-times" id="removeEvent"></i></li>
</ul>
</div>
<li>
</ul>
</div>
EDIT* I apologize, I've added the remainder of the code to find the potential issue.

conflict - jumbotron vs responsive img

I created simple website, by used HTML5, CSS3, JS and Bootstrap. I have conflict with jumbotron and img-responsive. When I minimize the screen aprox. below 760, I see two wallpapers the div.jumbotron, and img-responsive. but I want to see only the img-responsive.
I was checking many times what's going on, but I have no idea.
Do somebody can review the code. I will be really grateful.
Link to this web -https://magdalena-dering.github.io/RWD-Coffee-Corner/
/*BODY*/
body {
background-color: #ffeee6;
font-family: 'Mirza', cursive;
}
/*HEADER*/
#header-nav {
background-color: #ffffff;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand a:focus,
.navbar-brand a:hover {
text-decoration: none;
}
.navbar-brand h1 {
/* Restaurant name */
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
line-height: .75;
}
.navbar-brand span {
font-size: 1em;
color: #4d0000;
}
#nav-list a {
font-size: 1.6em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-left: 5px;
background-color: #ffeee6;
border: 1px solid #ffffff;
box-shadow: 0 0 30px #ff9999;
}
#nav-list a:hover {
background: #ffeee6;
box-shadow: 3px 3px 3px #ff9999;
}
.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
border: 1px solid #661400;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
/*HOME PAGE*/
.container .jumbotron {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #4d1a00;
padding: 0;
border: 1px solid #ffffff;
}
#menu-tile,
#specials-tile,
#map-tile {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 280px;
margin: 30px;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
#menu-tile {
background: url('../images/menu.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#specials-tile {
background: url('../images/specials1.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
/* FOOTER */
.panel-footer {
background-color: #ffffff;
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
}
.visible-xs {
border-top: 1px solid #800000;
}
#hours span,
#address span,
#sentence span {
color: #4d0000;
text-align: center;
text-shadow: 3px 3px 3px #ff9999;
font-size: 1.3em;
}
/***********MENU SIDE*********/
.category-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
.category-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.category-tile+div {
margin-bottom: 50px;
}
#menu-title {
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
}
span {
font-size: 1.4em;
text-align: center;
}
.text-center {
margin-top: 0px;
margin-bottom: 30px;
}
/***********COFFEE CATEGORY SIDE*********/
.coffee-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 180px;
height: 180px;
margin: 0 auto 15px;
margin-bottom: 120px;
}
.coffee-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.coffee-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.coffee-price {
font-size: 1.2em;
text-align: center;
margin-top: -110px;
margin-bottom: 20px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 230px;
height: 230px;
margin: 0 auto 15px;
}
.sweets-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.sweets-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.3em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.sweet-price {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
}
/***********SPECIALS SIDE*********/
.specials-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/bday.jpg') no-repeat;
}
.specials-tile2 {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/catering.jpg') no-repeat;
}
.specials-tile:hover,
.specials-tile2:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.specials-tile span,
.specials-tile2 span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
h4 {
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text1,
.text2 {
font-size: 1.3em;
text-align: center;
margin-top: 10px;
position: relative;
border: solid 1px #ffcccc;
padding: 5px;
background-color: #ffe6e6;
}
.text1 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text2 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
/***********CONTACT SIDE*********/
#map-contact {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 250px;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#map-contact:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.head-text {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
margin: 20px;
}
.contact-description {
font-size: 1.3em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin: 30px;
}
}
/********** Large devices only **********/
#media (min-width: 1200px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
}
.container .jumbotron {
background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
height: 675px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
/* Home Page */
.container .jumbotron {
background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
height: 558px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
margin: 5px;
}
/* Home Page */
.container .jumbotron {
background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
height: 432px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand {
padding-top: 10px;
}
.navbar-brand h1 {
/* Restaurant name */
padding-top: 10px;
font-size: 5vw;
/* 1vw = 1% of viewport width */
margin-top: -10px;
}
#nav-list a {
font-size: 4vw;
}
.navbar-brand span {
font-size: 3vw;
color: #4d0000;
}
/*Home Page*/
#logo-img {
background: url('../images/md.png') no-repeat;
height: 76px;
width: 210px;
}
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
/*Footer*/
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: vw;
}
.panel-footer {
font-size: 3vw;
}
#hours span,
#address span,
#sentence span {
font-size: 4vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 4vw;
}
#menu-title {
font-size: 4vw;
}
span {
font-size: 3vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 4vw;
}
.coffee-price {
font-size: 4vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 4vw;
}
.sweet-price {
font-size: 4vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 4vw;
}
.text1,
.text2 {
font-size: 3vw;
margin: 15px;
}
.text-center span {
font-size: 4vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 4vw;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
#media (max-width: 479px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 6vw;
margin-left: 10px;
}
#nav-list a {
font-size: 5vw;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 6vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 6vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
/********** Super EXTRA (created by me) extra small devices Only :-)**********/
#media (max-width: 423px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 7vw;
}
#nav-list a {
font-size: 6vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
width: 150px;
height: 54px;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 5vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 5vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
}
<!doctype html>
<html lang="en">
<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>responsive design - coffee corner</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>coffee corner</h1><span> Magdalena Dering ©<br> RWD</span></a>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navMenuButton">
<a href="menu.html " onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
</li>
<li>
<a href="specials.html">
<span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
</li>
<li>
<a href="contact.html">
<span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- #header-nav -->
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>
</div>
<div class="row"></div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu.html">
<div id="menu-tile"><span>menu</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="specials.html">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/#40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
<!-- End of #home-tiles -->
</div>
<!-- End of #main content -->
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
<hr class="visible-xs">
</section>
<section id="sentence" class="col-sm-4">
<span><b>quots:</b><br></span><i>
“Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
<hr class="visible-xs">
</section>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Best,
Megi

add background for 760 media without url & height 100% to your custom style css
#media (max-width: 767px) {
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
background: url('');
height: 100%;
}
}

Can I make slideToggle() overlap a div rather than move it?

I have a website that I am making with a friend and there is a problem where, when a dropdown tab is being slideToggle()'d with jquery, it moves the html div below it, and I just want it to overlap it, is there an easy way to do it?
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Architects+Daughter|Coda|Indie+Flower|Shadows+Into+Light|Special+Elite" rel="stylesheet">
<title>ALFEX Inc.</title>
</head>
<body>
<div class='content'>
<div class='header'>
<h1>ALFEX INCORPORATED</h1>
<ul class='tabsbar'>
<a class='link' href='alfex.html'><li class='tab'>Home</li></a>
<div class='link'><li class='tab' id='gam'>Gags & Memes</li></div>
<div class='link'><li class='tab' id='crew'>The Crew</li></div>
<a class='link' href='alfex-codex.html'><li class='tab'>The Codex</li></a>
<a class='link' href='alfex-minigames.html'><li class='tab'>Minigames</li></a>
</ul>
</div>
<div class='panel-gam'>
<ul class='panel-list'>
<a class='p-link' href='alfex-gagsandmemes-doggo.html'><li class='p-tab'>Doggo Memes</li></a>
<a class='p-link' href='alfex-gagsandmemes-dad.html'><li class='p-tab'>Dad Jokes</li></a>
<a class='p-link' href='alfex-gagsandmemes-pun.html'><li class='p-tab'>Puns</li></a>
</ul>
</div>
<div class='panel-crew'>
<ul class='panel-list'>
<a class='p-link' href='alfex-alfie.html'><li class='p-tab'>Alfie</li></a>
<a class='p-link' href='alfex-alex.html'><li class='p-tab'>Alex</li></a>
</ul>
</div>
<div class='main'>
<h2>Welcome to the Alfex Inc. website</h2>
<h3>for all your cousin needs xD.</h3>
<div class='olexparent'>
<iframe class='olexvideo' width="560" height="315" src="https://www.youtube.com/embed/aa6IGzjY_kI?list=PLsCWhnzJYhqRCjHKprzyP7vQBJexv6OOZ" frameborder="0" allowfullscreen align="right"></iframe>
</div>
<p class="intro"></p>
</div>
</div>
</body>
</html>
Here is my JavaScript Code:
$(document).ready(function() {
$('.content').hide();
$('.content').fadeIn(800);
$('#gam').click(function() {
$('.panel-crew').slideUp(0);
$('.panel-gam').slideToggle();
});
$('#crew').click(function() {
$('.panel-gam').slideUp(0);
$('.panel-crew').slideToggle();
});
});
If needed, here is my CSS:
/* * {
border-style: solid;
border-width: 0.5px;
border-color: #fff;
box-sizing: border-box;
} */
body {
margin: 0px;
padding: 0px;
background-image: url('http://images.naldzgraphics.net/2012/08/4-lined.jpg');
background-repeat: repeat-y;
background-size: 100%;
}
.tabsbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #525c68;
}
.tab {
padding: 18px 0px 18px 0px;
float: left;
max-width: 20%;
min-width: 20%;
display: block;
text-align: center;
background-color: #525c68;
color: #5dbace;
}
.header {
display: block;
background-color: #525c68;
}
.link{
text-decoration: none;
background-color: #525c68;
color: #7bcadb;
font-family: 'Special Elite', 'Coda', sans-serif;
}
h1 {
color: #ffffff;
font-family: sans-serif;
font-size: 550%;
display: block;
background-color: #525c68;
margin: 0px;
text-align: center;
padding: 10px;
}
p {
font-family: 'Annie Use Your Telescope', 'Indie Flower', 'Shadows Into Light', 'Architects Daughter', cursive;
font-size: 24px;
}
h2 {
font-size: 30px;
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-bottom: 10px;
}
.main {
background-color: #d8d8d8;
max-width: 80%;
margin: 0px 10% 180px 10%;
padding: 80px 80px 100px 80px;
}
h3, .minigames-subheading, .minigames-subheading2, .alfie-subheading {
opacity: 0.5;
padding: 5px 0px 0px 0px;
position: relative;
bottom: 20px;
font-style: italic;
font-family: 'Coda', sans-serif;
margin-right: 50%;
font-size: 26px;
}
.olexvideo {
max-width: 100%;
position: relative;
bottom: 59px;
max-width: 52%;
}
.panel-gam {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 20%;
}
.panel-crew {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 40%;
}
.p-link {
text-decoration: none;
color: #ffffff;
font-family: 'Special Elite', 'Coda', sans-serif;
padding: 0px 20px 20px 20px;
}
.panel-list {
padding: 0px 40px 10px 40px;
list-style-type: none;
}
a.p-link:hover {
color: #d8d8d8;
}
h4 {
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
font-size: 20px;
border-bottom-style: solid;
border-bottom-color: #737373;
border-bottom-width: 2px;
padding-bottom: 5px;
}
.rockpaperscissors {
border-style: solid;
border-width: 5px;
border-radius: 10px;
margin: 20px 0px 10px 0px;
padding: 20px 20px 60px 20px;
background: #a6a6a6;
border-color: #a6a6a6;
min-height: 300px;
}
button {
border-style: outset;
border-color: #4f5864;
background-color: #525c68;
color: #7bcadb;
padding: 40px;
border-radius: 5px;
font-family: 'Special Elite', 'Coda', sans-serif;
width: 33%;
font-size: 28px;
}
button:hover {
border-style: inset;
border-color: #73c6d9;
background-color: #7bcadb;
color: #ffffff;
}
.result {
font-family: 'Special Elite', 'Coda', sans-serif;
font-size: 50px;
}
.reset {
position: relative;
top: 20px;
width: 100%;
}
li.tab:hover {
background-color: #7bcadb;
color: #ffffff;
}
.specialised-memes {
border: none;
padding: 20px 5px 20px 5px;
font-family:
width: 100%;
height: 1000px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
.page-feed {
position: relative;
bottom: 1000px;
max-width: 45%;
overflow: scroll;
}
img {
width: 100%;
padding: 20px 0px 20px 0px;
}
.left-side {
width: 520px;
}
.fb-picture {
position: relative;
bottom: 393px;
background-color: #a6a6a6;
border-radius: 10px;
}
.embed {
border-radius: 50px;
padding: 50px;
background-color: #a6a6a6;
width: 50%;
}
.intro {
margin-left: 20px;
}