Develop Reference

Unable to scroll custom Scrollbar in VueJS

I am developing an application using VueJS and Bootstrap. I am developing a scrollbar for a component with the id="show".
When the button with id="infoButton" is clicked, the details section opens up, like this
What I want is, only the component with id="show"(the center component) scrollable
Here is the code for it:
import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'
export default {
methods:{
changeView(){
if(this.$store.state.gridView){
this.$store.state.gridView = false;
}
else if(!this.$store.state.gridView){
this.$store.state.gridView = true;
}
},
openDetailsSection() {
this.buttonClicked = true;
if(!this.$store.state.detailsSectionOpen){
this.$store.state.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
showSection.style.width = "80%";
showSection.style.transition = "0.5s";
})
},
closeDetailsSection(){
this.buttonClicked = false;
if(this.$store.state.detailsSectionOpen){
this.$store.state.detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.style.width = "0%";
showSection.style.width = "100%";
}
},
data(){
return {
buttonClicked: false,
folderDetails : {},
}
},
components: {
ListView,
GridView,
DetailsView
}
}
<style>
#infoButton:focus,
{
outline: none;
box-shadow: none!important;
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}
.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}
li .btn:hover{
color: #E91E63;
}
.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}
#context-menu-icon{
color: #424242;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
#image {
height: 16px;
border: 0px;
color: #878D99;
}
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}
.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}
.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}
.context-menu-span{
padding-left: 10px;
color: #424242;
}
.btn{
background-color: none;
border: none;
outline: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
#no-padding{
padding: 0px;
}
/* show */
#show{
overflow-y: scroll;
}
/* Custom scrollbar */
#show::-webkit-scrollbar {
width: 10px;
}
/* Track */
#show::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
}
/* Handle */
#show::-webkit-scrollbar-thumb {
background: red;
border-radius: 5px;
}
/* Handle on hover */
#show::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
<template>
<div>
<ol class="breadcrumb" id="topButtons"
style="display: flex;margin-top: 8px;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 15px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 10px 0px;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="!$store.state.gridView" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="$store.state.gridView" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="!$store.state.detailsSectionOpen" class="btn" id="infoButton" #click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
<button v-else-if="$store.state.detailsSectionOpen" class="btn" id="infoButton" #click="closeDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr" style="margin-bottom: 0px;margin-left: 30px;margin-right: 30px;">
<div class="content" style="padding-top: 0px;margin-bottom: 15px;padding-bottom: 8px;" id="show">
<div class="container-fluid">
<div>
<!-- Grid view section begins here -->
<grid-view v-if="$store.state.gridView &&
!$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files"
:buttonClicked="buttonClicked">
</grid-view>
<!-- If the details section is open, give a scroller -->
<grid-view v-else-if="$store.state.gridView &&
$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files"
:buttonClicked="buttonClicked"
id="grid-view">
</grid-view>
<!-- List View section begins here -->
<list-view v-if="!$store.state.gridView &&
!$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files">
</list-view>
<!-- If the details section is open, give a scroller -->
<list-view v-else-if="!$store.state.gridView &&
$store.state.detailsSectionOpen"
:folders="folders"
:recentFiles="recentFiles"
:files="files"
id="list-view">
</list-view>
</div>
</div>
</div>
<details-view
v-if="$store.state.detailsSectionOpen"
#folderDetailsSent="folderDetails = $event"
#fileDetailsSent="fileDetails = $event"
id="details"
>
</details-view>
</div>
</template>
Although the scrollbar appears between for the component with id="show", the scrollbar thumb is not visible, and I am unable to scroll it.
Can someone please help me out? Thanks in advance.

How to sort a group of elements using jquery sortable and prevent a spot from being placed

I have a list of categories, each with their own questions below them. I want to sort all categories alongside with their questions.
With my current code I can only sort the category bar but the questions are left in place.
This is my html (questions and categories can be any amount because when creating them they can be added dynamically):
<span id="sortablecats" class="ui-sortable">
<label class="categorytitle ui-sortable-handle" style="">jjjj</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">hhhh</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
<label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
<label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
<label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
</div>
</div>
<div class="col-md-8">
<p class="questionclass">jjj</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
<label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
<label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
<label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
<label class="categorytitle ui-sortable-handle" style="">Testt</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">test</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
<label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
<label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
<label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</span>
And my js:
$( "#sortablecats" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "#questionrow",
cancel: "#questionrow"
});
I have a jsfiddle to demonstrate what is currently happening
How can I make it so that I only sort a category with all its questions? And only be able to sort them above or below other groups (so not a group in the middle of another group)?

You need to put all of the sortable contents in the same child div and link them to the parent.
For example having the parent div like so :
<div id="sortMyContents">
<div>Content to be draggable with everything inside</div>
<div>Content to be draggable with everything inside</div>
</div>
Following this logic your code should be :
$("#sortablecats").sortable({
connectWith: "#questionrow",
cancel: "#questionrow"
});
/* Dropdown menu */
.dropdown {
position: relative;
display: inline-block;
}
.btn-success {
background-color: #10355e !important;
border: 1px solid #10355e !important;
}
.bar {
height: 18px;
background: green;
}
.savewpi {
margin-top: 10px;
}
.deletefileclass {
cursor: pointer;
font-size: 20px;
color: #10355e;
}
.btn-success:hover {
background-color: #051d38 !important;
border: 1px solid #051d38 !important;
}
.displaynonecoid {
display: none;
}
.lijstnaamtitle {
font-size: 20px;
color: #212529;
}
.lijsttitle {
width: 85% !important;
margin-top: 0px !important;
}
.lijstresult {
background-color: #10355e;
color: #fff;
padding: 20px;
font-size: 20px;
border-radius: 5px;
text-align: center;
margin-top: 15px;
display: none;
}
.horscroll {
overflow-x: scroll !important;
}
.hiddenupload {
display: none;
}
.addsubpage {
display: none;
}
.progress-bar {
background-color: #10355e !important;
}
.fileDisplayArea img {
max-width: 100% !important;
}
.tarievenhead {
background-color: #10355e;
color: #fff;
}
.trinv {
background-color: #edeaea;
}
.companylogo {
max-width: 100%;
}
.headerlogo {
max-height: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
.switch-field {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
float: left;
}
.switch-field label {
display: inline-block;
width: 60px;
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.container label {
position: relative;
}
/* Base styles for spans */
.container span::before,
.container span::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* Radio buttons */
.container span.radio:hover {
cursor: pointer;
}
.addwerkplekinspectie input[type="radio"] {
display: none;
}
.questionclass {
margin-left: 15px;
font-size: 17px;
font-weight: 500;
border-bottom: 2px solid #e9e9e9;
height: 90%;
}
.nomarginleft {
margin-left: 0px !important;
}
.inputtitles {
font-size: 15px;
font-weight: 500;
margin-bottom: 30px;
margin-left: 10px;
}
.borderbottom {
border-bottom: 2px solid #ccc;
}
.text-right {
text-align: right;
margin-top: 5px;
}
.radiotoggle {
display: inline-block;
margin-bottom: .5rem;
margin-left: 60px;
position: relative !important;
right: 0px;
}
.container span.radio::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #10355e;
border-radius: 50px;
}
.container span.radio::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #6C788A;
transition: left .25s, background-color .25s;
}
input[type="radio"]:checked+label span.radio::after {
left: -27px;
background-color: #ffffff;
}
.categorytitle {
font-size: 20px;
background-color: #10355e;
padding: 10px;
color: #fff;
display: block;
border-radius: 3px;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #A5DC86;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
.deletedemployee {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.deletewpi {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.deletedtemplate {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #10355e;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
width: 100%;
}
.addedemployee {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.filedeletedmessage {
display: none;
font-size: 15px;
padding: 5px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessageuser {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.deleteduser {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.manualmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.resultmessageuseradded {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.editcontentmessage {
display: none;
font-size: 20px;
padding: 20px;
text-align: center;
background-color: #206b0a;
color: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.fs-upload-input {
background-color: #10355e;
color: #fff;
border-radius: 3px;
padding: 20px;
}
.fs-upload-target {
padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
float: left;
font-weight: 500;
}
.categorylist {
margin-bottom: 20px;
padding-left: 0px;
}
.sortwrap input {
display: inline-block !important;
width: 85% !important;
}
.sortwrap {
position: inherit !important;
}
.catinput {
margin-top: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.dragndrop {
font-size: 34px;
color: #10355e;
cursor: move;
border: 1px solid #ced4da;
border-radius: 3px;
top: 7px;
position: relative;
}
.ui-state-highlight {
width: 100%;
height: 40px;
border: 1px solid #113c69;
width: 300px;
}
.wrapper {
clear: both;
!important;
}
.inspectiebutton {
margin-top: 20px;
}
.removebutton {
margin-top: 18px;
margin-left: -90px;
}
.questionbutton {
margin-left: 20px;
margin-bottom: 5px;
}
.questioninput {
margin-left: 20px;
margin-bottom: 5px;
}
.removequestion {
margin-top: 10px;
}
.categorylist li {
list-style: none;
list-style-position: inside;
}
.categorylist li input {
font-weight: 500;
}
.questionlist li input {
font-weight: normal;
}
.questionlist li {
margin-top: 10px;
margin-left: -10px;
}
#loginresult {
background-color: #dc0b0b;
color: #fff;
padding: 20px;
border-radius: 4px;
font-size: 20px;
display: none;
}
.dropdown-content {
display: none;
}
.dropdown-show {
display: block !important;
padding: 4px 10px !important;
z-index: 1;
}
/* Einde dropdown menu */
.menuicon {
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.backlink {
color: #fff;
}
.addcontent {
display: none;
}
.backlink:hover {
color: #fff;
}
.personeel {
font-size: 90px;
}
.versions {
display: none;
}
.green {
color: #55af11 !important;
}
.red {
color: #c31111 !important;
}
.versionlist {
list-style-type: none;
list-style-position: inside;
padding-left: 0px;
}
.versionlist li {
margin-bottom: 10px;
}
.versionlist i {
font-size: 25px;
color: #10355e;
cursor: pointer;
}
.mtop-20 {
margin-top: 20px;
}
.companylink {
color: #0e3158;
text-decoration: underline;
font-weight: bold;
}
.manualtitle {
float: left;
}
.editmanual {
float: right;
font-size: 25px;
color: #113c69;
}
.wysiwyg {
clear: both;
}
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.menuliststyle {
list-style-type: none;
padding: 0px;
}
.menuliststyle a {
color: #10355e;
font-size: 15px;
margin-bottom: 5px;
}
.textcenter {
text-align: center;
}
.logoheader {
padding-top: 10px;
padding-bottom: 10px;
max-width: 200px;
}
.underlinelink {
text-decoration: underline;
color: #10355e;
}
.frontpageicon {
color: #10355e;
font-size: 18px;
}
.cover {
object-fit: cover;
}
.pbottom-0 {
padding-bottom: 0px !important;
}
.ptop-0 {
padding-top: 0px !important;
}
.chapter {}
.font-10 {
font-size: 10px;
}
.h45 {
height: 45px;
}
.mtop10 {
margin-top: 8% !important;
}
.font-12 {
font-size: 12px;
}
.tabheight-100 {
height: 100px;
}
.col-xl-custom {
flex: 0 0 20%;
max-width: 20%;
}
.dashicon {
text-align: center;
padding: 5px;
font-size: 40px;
color: #113c69;
}
.tabheight {
height: 120px;
}
.greydark {
color: #272727;
}
.padding-0 {
padding: 0px !important;
}
.shadowhover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.1s ease-in-out;
}
.shadowhover:hover {
box-shadow: 0 5px 50px 3px rgba(0, 0, 0, 0.5);
display: inherit;
}
.bigheader {
font-size: 20px !important;
margin-bottom: 20px !important;
}
.btnadd {
color: #fff;
background-color: #10355e;
border-color: #10355e;
margin-bottom: 20px;
}
.bgblue {
background: radial-gradient(at 50% -20%, #1967a9, #0a1832) fixed !important;
}
.btnadd:hover {
color: #fff;
background-color: #051d38;
border-color: #051d38;
margin-bottom: 20px;
}
.actionbuttons {
text-align: center;
}
.actionbuttons i {
color: #0e3158;
font-size: 25px;
}
.normblue {
color: #10355e;
}
.btn-blue {
background-color: #10355e !important;
border: 1px solid #10355e !important;
}
.filestyle {
background-color: #10355e;
}
.padding-025 {
padding: 0.25rem !important;
}
.editwindowadmin {
display: none;
}
.margininput {
margin-bottom: 20px;
}
.activebutton {
background-color: #10355e;
}
.activebutton i {
color: #fff;
}
.activebutton h4 {
color: #fff;
}
.editcontent {
float: right;
}
.editcontent i {
font-size: 30px;
color: #10355e;
cursor: pointer;
}
.table {
width: 100% !important;
}
.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
background-color: #10355e !important;
}
.fullwidth {
width: 100%;
}
.font-15 {
font-size: 15px;
}
/* .h60{
height: 60px;
} */
#media only screen and (max-width: 800px) {
.menuliststyle {
list-style-type: none;
padding: 0px;
max-width: 90%;
}
.btnadd {
color: #fff;
background-color: #10355e;
border-color: #10355e;
margin-bottom: 20px;
font-size: 15px !important;
display: block !important;
margin: 0 auto;
margin-bottom: 20px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<span id="sortablecats" class="ui-sortable">
<div>
<label class="categorytitle ui-sortable-handle" style="">jjjj</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">hhhh</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-1" value="ok" required="">
<label class="radiotoggle" for="radio-1"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-2" value="fout" checked="">
<label class="radiotoggle" for="radio-2"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][hhhh]" id="radio-3" value="nvt">
<label class="radiotoggle" for="radio-3"><span class="radio">N.v.t</span></label>
</div>
</div>
<div class="col-md-8">
<p class="questionclass">jjj</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-4" value="ok" required="" checked="">
<label class="radiotoggle" for="radio-4"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-5" value="fout">
<label class="radiotoggle" for="radio-5"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[jjjj][jjj]" id="radio-6" value="nvt">
<label class="radiotoggle" for="radio-6"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</div>
<div>
<label class="categorytitle ui-sortable-handle" style="">Testt</label>
<div class="row ui-sortable-handle" id="questionrow">
<div class="col-md-8">
<p class="questionclass">test</p>
</div>
<div class="col-md-4">
<div class="container text-right">
<input type="radio" name="questionlist[Testt][test]" id="radio-7" value="ok" required="">
<label class="radiotoggle" for="radio-7"><span class="radio">Ok</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-8" value="fout" checked="">
<label class="radiotoggle" for="radio-8"><span class="radio">Fout</span></label>
<input type="radio" name="questionlist[Testt][test]" id="radio-9" value="nvt">
<label class="radiotoggle" for="radio-9"><span class="radio">N.v.t</span></label>
</div>
</div>
</div>
</div>
</span>

how to move buy button underneath drop down box?

I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!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="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}

There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!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="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>

You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)

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%;
}
}

Angularjs Adding Style to Directive (With Css File)

I am trying to add a style to angularjs Directive with a seprated css file.
index-nav-bar-directive{
ul{
list-style: none;
margin: 0;
padding: 0;
}
h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
.fa-plus{
float: right;
}`[![enter code here][1]][1]`
}
And my html file is :
<body ng-app="IndexApp" ng-controller="indexController">
<index-nav-bar-directive> </index-nav-bar-directive>
</body>
And my directive HTML File:
<div class="root">
<div id="container" class="col-md-2">
<h1> Mongo : Data Bases</h1>
<ul id="todoList">
<li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
<li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
<li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
</ul>
</div>
</div>
I already saw that answer :
How to CSS style angular directive?
But its didn't work out.
Thank you very much!

Solved by Checking The Css inside :
Suppose to be like this form (in css you can't reach to inner attribute like i did)
div[index-nav-bar-directive] ul{
list-style: none;
margin: 0;
padding: 0;
}
div[index-nav-bar-directive] h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
div[index-nav-bar-directive] .fa-plus{
float: right;
}
div[index-nav-bar-directive] li{
cursor: pointer;
background-color: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
div[index-nav-bar-directive] span{
background-color: #e74c3c;
height: 40px;
margin-right:20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
opacity: 0;
transition: 0.2s linear;
}
div[index-nav-bar-directive] li:hover span{
width: 40px;
opacity: 1.0
}
div[index-nav-bar-directive] input{
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
div[index-nav-bar-directive] #container{
background-color: #f7f7f7;
width: 360px;
margin: 100px auto;
box-shadow: 0px 0px 7px 1px grey;
}