I am working on an application and have ran into some CSS styling issues. I am battling against position: sticky and have found myself stuck in a hole I'm not sure how to escape from.
My desired end result is to have a page that is scrollable, but I want the <nav> (white background), <div id='top'> (yellow background), and <div class='selector'> (pink background) to be "sticky" at the top as the user scrolls the page (visual representation of desired result).
The charts will be constant in sizing, but the list of questions will be an undetermined length. As the user scrolls through the list of questions, I want them to always have easy access to the search bar and breadcrumb heading.
What am I doing wrong?? Right now the yellow section behaves as expected up until a certain point, then it randomly decides to scroll away and ignore the sticky. (I'm not even sure where to begin with the pink section, especially since I can't figure out the first part!)
Any help and explanations would be much appreciated to help me learn for the future.
const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5],
backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
},
],
labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
},
options: {
maintainAspectRatio: false,
animation: {
duration: 0
},
plugins: {
datalabels: {
formatter: (value) => {
return ' ' + value + ' questions';
}
},
legend: {
display: false,
},
}
}
});
const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
type: 'bar',
data: {
labels: ['1st', '2nd', '3rd', '4th+'],
datasets: [
{
label: 'Attempt Progression',
backgroundColor: 'rgba(173, 173, 173)',
data: [0.75, 1, 1.75, 2, 3],
},
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
categorySpacing: 0
}]
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: '#666',
font: {
weight: 'normal',
},
},
legend: {
display: false,
},
},
},
});
nav {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
padding: 0px 20px;
box-sizing: border-box;
font-size: 20px;
color: #5F6368;
background-color: white;
border-bottom: 1px solid lightgray}
body {
margin: 0;
position: absolute;
top: 65px; left: 0px;
width: 100%;
height: calc(100vh - 65px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 96px minmax(120px, 1fr);
grid-template-areas:
"top"
"content"}
/* --------[TITLE FEATURE]-------- */
#top {
grid-area: top;
display: flex;
position: sticky;
top: 65px;
justify-content: space-between;
align-items: center;
margin: 0px 40px;
font-size: 38px;
color: #484848;
background-color: yellow;
border-bottom: 1px solid lightgray}
#breadcrumb {
color: #484848;
font-size: 14px;
margin: 10px 40px;}
#breadcrumb ul {
padding: 0;
margin: 0;
list-style: none;}
#breadcrumb li {display: inline}
#breadcrumb li:not(:last-child)::after {
content: '▸';
margin: 0px 10px;}
#breadcrumb a {
text-decoration: none;
color: #581F98;
font-weight: 800}
/* --------[CHARTS]-------- */
#content {
margin: 20px 40px 0px 40px}
#content .charts {
display: flex;
width: 100%;
border-bottom: 1px solid lightgray}
.charts .DOK {
width: 50%;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid lightgray}
.charts .attempts {
width: 50%;
padding: 20px;
box-sizing: border-box;}
/* ------ [TOP CONTROLS] ------ */
.selector {
background-color: pink;
display: flex;
align-items: center;
padding: 20px 0px;}
.selector .title {font-weight: 800}
.selector input[type='search'] {
flex: 1;
font-size: 16px;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
margin: 0px 20px;
padding: 8px 20px;
border: 1px solid black;}
.selector button {
margin-top: -6px;
font-size: 16px}
/* ------ [QUESTIONS] ------ */
#content .questions {
background-color: green;
padding: 20px;}
/* Question box style */
#content .questions section {
min-height: 200px;
margin-bottom: 30px; /* Space under each question */
border: 1px solid lightgray;
background-color: white;
border-radius: 16px;
padding: 20px;
cursor: pointer;}
#content .questions section:hover {border: 2px solid #D4BBF1;}
/* Question excerpt style */
.questions section .excerpt {
padding-bottom: 24px; /* Space under excerpt */
font-size: 14px;
font-style: italic;}
/* Main question style */
.questions section .question {
padding-bottom: 16px; /* Space under question */
font-weight: 800;}
/* Answer choice style */
.questions section li {
margin-bottom: 10px; /* Space under each answer option */
list-style: none;}
.questions section ul {margin: 0px;}
/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}
/* Coloring for correct answer */
.questions section li.correct {
color: #34CB4A;
font-weight: 800;}
<head>
<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<nav></nav>
</head>
<body>
<div id='top'>
<div class='title'>📓 Curriculum</div>
<div id='breadcrumb'>
<ul>
<li><a href='?'>Main</a></li>
<li><a href='?view=attendance'>Curriculum</a></li>
<li><a href='?view=attendance'>Assessments</a></li>
<li>Compare/Contrast</li>
</ul>
</div>
</div>
<div id='content'>
<div class='charts'>
<div class='DOK'><canvas id="dokChart"></canvas></div>
<div class='attempts'><canvas id="attemptsChart"></canvas></div>
</div>
<div class='selector'>
<div class='title'>16 Saved Questions:</div>
<input type='search' placeholder='Search question bank...'>
<button class='button purple-btn'>Create Question</button>
</div>
<div class='questions'>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'> I was a sickly, delicate boy, suffered much from asthma, and frequently had to be taken away on trips to find a place where I could breathe. One of my memories is of my father walking up and down the room with me in his arms at night when I was a very small person, and of sitting up in bed gasping, with my father and mother trying to help me. I went very little to school. I never went to the public schools, as my own children later did, both at the "Cove School" at Oyster Bay and at the "Ford School" in Washington. For a few months, I attended Professor McMullen's school in Twentieth Street near the house where I was born, but most of the time I had tutors. As I have already said, my aunt taught me when I was small.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
</div>
</div>
</body>
Yes, the functionality you are looking for is done with position: sticky. For this property to function, the following is needed: Apply the position: sticky and a property top, left, right, botton, with a coarse. I leave a code of the effect for a better understanding:
.styck_1{
position: sticky;
top: 2px;
}
.styck_2{
position: sticky;
top: 98px;
}
.styck_3{
position: sticky;
top: 193px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position styck</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="container">
<div class="bg-warning p-4 mt-3 styck_1">
<h1>Text 1</h1>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<div class="bg-primary p-4 styck_2">
<h1>Text 2</h1>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<div class="bg-success p-4 styck_3">
<h1>Text 2</h1>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
</body>
</html>
Now let's fix the problem in your html. There is a property in your html that causes conflict. Here the code and then the explanation.
const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5],
backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
},
],
labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
},
options: {
maintainAspectRatio: false,
animation: {
duration: 0
},
plugins: {
datalabels: {
formatter: (value) => {
return ' ' + value + ' questions';
}
},
legend: {
display: false,
},
}
}
});
const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
type: 'bar',
data: {
labels: ['1st', '2nd', '3rd', '4th+'],
datasets: [
{
label: 'Attempt Progression',
backgroundColor: 'rgba(173, 173, 173)',
data: [0.75, 1, 1.75, 2, 3],
},
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
categorySpacing: 0
}]
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: '#666',
font: {
weight: 'normal',
},
},
legend: {
display: false,
},
},
},
});
nav {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
padding: 0px 20px;
box-sizing: border-box;
font-size: 20px;
color: #5F6368;
background-color: white;
border-bottom: 1px solid lightgray}
body {
margin: 0;
position: absolute;
top: 65px; left: 0px;
width: 100%;
/*height: calc(100vh - 65px);*/
background-color: #FCFCFC;
display: grid;
grid-template-rows: 96px minmax(120px, 1fr);
grid-template-areas:
"top"
"content"}
/* --------[TITLE FEATURE]-------- */
#top {
grid-area: top;
display: flex;
position: sticky;
top: 65px;
justify-content: space-between;
align-items: center;
margin: 0px 40px;
font-size: 38px;
color: #484848;
background-color: yellow;
border-bottom: 1px solid lightgray}
#breadcrumb {
color: #484848;
font-size: 14px;
margin: 10px 40px;}
#breadcrumb ul {
padding: 0;
margin: 0;
list-style: none;}
#breadcrumb li {display: inline}
#breadcrumb li:not(:last-child)::after {
content: '▸';
margin: 0px 10px;}
#breadcrumb a {
text-decoration: none;
color: #581F98;
font-weight: 800}
/* --------[CHARTS]-------- */
#content {
margin: 20px 40px 0px 40px}
#content .charts {
display: flex;
width: 100%;
border-bottom: 1px solid lightgray}
.charts .DOK {
width: 50%;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid lightgray}
.charts .attempts {
width: 50%;
padding: 20px;
box-sizing: border-box;}
/* ------ [TOP CONTROLS] ------ */
.selector {
background-color: pink;
display: flex;
align-items: center;
padding: 20px 0px;
position: sticky;
top: 161px;}
.selector .title {font-weight: 800}
.selector input[type='search'] {
flex: 1;
font-size: 16px;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
margin: 0px 20px;
padding: 8px 20px;
border: 1px solid black;}
.selector button {
margin-top: -6px;
font-size: 16px}
/* ------ [QUESTIONS] ------ */
#content .questions {
background-color: green;
padding: 20px;}
/* Question box style */
#content .questions section {
min-height: 200px;
margin-bottom: 30px; /* Space under each question */
border: 1px solid lightgray;
background-color: white;
border-radius: 16px;
padding: 20px;
cursor: pointer;}
#content .questions section:hover {border: 2px solid #D4BBF1;}
/* Question excerpt style */
.questions section .excerpt {
padding-bottom: 24px; /* Space under excerpt */
font-size: 14px;
font-style: italic;}
/* Main question style */
.questions section .question {
padding-bottom: 16px; /* Space under question */
font-weight: 800;}
/* Answer choice style */
.questions section li {
margin-bottom: 10px; /* Space under each answer option */
list-style: none;}
.questions section ul {margin: 0px;}
/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}
/* Coloring for correct answer */
.questions section li.correct {
color: #34CB4A;
font-weight: 800;}
<head>
<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<nav></nav>
</head>
<body>
<div id='top'>
<div class='title'>📓 Curriculum</div>
<div id='breadcrumb'>
<ul>
<li><a href='?'>Main</a></li>
<li><a href='?view=attendance'>Curriculum</a></li>
<li><a href='?view=attendance'>Assessments</a></li>
<li>Compare/Contrast</li>
</ul>
</div>
</div>
<div id='content'>
<div class='charts'>
<div class='DOK'><canvas id="dokChart"></canvas></div>
<div class='attempts'><canvas id="attemptsChart"></canvas></div>
</div>
<div class='selector'>
<div class='title'>16 Saved Questions:</div>
<input type='search' placeholder='Search question bank...'>
<button class='button purple-btn'>Create Question</button>
</div>
<div class='questions'>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'> I was a sickly, delicate boy, suffered much from asthma, and frequently had to be taken away on trips to find a place where I could breathe. One of my memories is of my father walking up and down the room with me in his arms at night when I was a very small person, and of sitting up in bed gasping, with my father and mother trying to help me. I went very little to school. I never went to the public schools, as my own children later did, both at the "Cove School" at Oyster Bay and at the "Ford School" in Washington. For a few months, I attended Professor McMullen's school in Twentieth Street near the house where I was born, but most of the time I had tutors. As I have already said, my aunt taught me when I was small.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
</div>
</div>
</body>
Run the code in full screen
Height property height: calc(100vh - 65px); in body css was affecting how position sticky works
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 months ago.
I'm trying to show/hide a div using the following code-
<label class="paper outer">
<div class="inner">
</div>
<input type="radio" name="clickedChoice">
</label>
.inner{
position:absolute;
width: 30px;
right:5px;
top:5px;
bottom: 5px;
}
input[name="clickedChoice"] ~ .inner{
display: none;
}
input[name="clickedChoice"]:checked ~ .inner{
display: block !important;
}
But .inner div remains visible. What did I miss here?
<label class="paper outer">
<input type="checkbox" name="clickedChoice">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore minus
consectetur assumenda ducimus aliquam minima placeat maiores natus impedit
dolorum quod ipsam odio laboriosam, repellendus commodi, quam, saepe
voluptatibus ad!
</div>
</label>
<style>
.inner{
position:absolute;
width: 30px;
right:5px;
top:5px;
bottom: 5px;
}
input[name="clickedChoice"] ~ .inner{
display: none;
}
input[name="clickedChoice"]:checked ~ .inner{
display: block !important;
}
</style>
I followed the teleport example(youtube video) and want to set the component to the fullscreen.
However, the header and footer still show up when the component is teleported to body or #q-app.
The only difference between my code and the example code is I use quasar layout. Not sure if that matters.
here is my layout code:
<template>
<q-layout view="hhh lpr fff">
<q-header class="bg-white text-black" bordered reveal>
...
</q-header>
<q-page-container class="bg-grey-2">
<router-view />
</q-page-container>
<q-footer class="bg-white text-black bordered reveal>
....
</q-footer>
</template>
here is my component
<template>
<teleport to="#q-app">
<div class="modal">
<h1>This is a modal</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ipsa
laboriosam vero natus ut rerum quaerat, saepe praesentium tempore et hic
velit odio nemo minus labore quam ullam quod architecto?
</p>
</div>
</teleport>
</template>
<script setup lang="ts"></script>
<style lang="scss">
.modal {
background: beige;
padding: 10px;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
</style>
You need to set up in CSS z-index higher than your header and footer components. For example z-index: 100;.
im new at HTML, CSS and Bootstrap.
What im looking for is a way to make the navbar fixed only in a portion of the web.
A cleary example is this web:
http://pascalvangemert.nl/
You can see that the navbar starts at "Profile" section and doesnt go upper than that.
Is there a css or bootstrap way to do it?
Thanks
<body>
<div class="jumbotron intro">
<div class="container-fluid intro-image">
<div class="row">
<div class="col-lg-12">
<img src="/imagenes/fondo6.jpg" class="imagen">
<h1>Ariel Curuchaga</h1>
<hr class="dotted-line" style="border-top: dotted 5px">
<p class="intro-paragraph">Interactive Resume</p>
</img>
</div>
</div>
</div>
</div>
<div>
<nav id="navbar" class="navbar navbar-inverse barra" role="navigation">
<ul class="list-group">
<li class="list-group-item list-group-item-action list-group-item-dark"><i class="fas fa-arrow-circle-up"></i>
</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Profile</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Experience</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Goals</li>
</ul>
</nav>
<div class="profile">
<h2>About Me</h2>
</div>
<div class="experience">
<h2>About Me</h2>
</div>
<div class="education">
<h2>About Me</h2>
</div>
<div class="goals">
<h2>About Me</h2>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.imagen {
height: 100vh;
width: 100vw;
margin: 0;
filter: opacity(0.4) drop-shadow(0 0 0 pink);
}
.intro {
position: relative;
margin: 0;
text-align: center;
}
.intro-image {
padding: 0;
}
h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-weight: 700;
font-size: 60px;
letter-spacing: 8px;
}
.dotted-line {
position: absolute;
width: 32%;
top: 50%;
left: 32%;
color: #6b6e6e;
margin: 0;
padding: 0;
}
.intro-paragraph {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-size: 30px;
}
.barra {
border-radius: 30%;
padding: 0;
opacity: 80%;
position: sticky;
top: 0;
z-index: -1;
}
.list-group {
text-align: center;
}
.profile {
background-color: yellowgreen;
height: 100vh;
width: 100vw;
}
You can use sticky positioning:
#navBar {
position: sticky;
top: /*distance from top of page*/
}
This makes the element in question follow normal page order until it is reached, then it becomes fixed. However, keep in mind that it is not supported by IE.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
I've got a relatively long phrase that consumes way too much space on mobile devices. It looks something like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.container {
width: 100%;
height: 100%;
}
.text {
/*
* Don't want to change font-size, because text
* sometimes maybe shorter and 2.2rem is perfect
* for phrases that are not as long
*/
font-size: 2.2rem;
}
<body class="artificial-phone-viewport">
<div class="container">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</div>
</body>
What I want is to make this text span at most, let's say, 10rem height. If it can't fit into 10rem of height, it should instead expand horizontally, maybe, overflowing its parent, maybe like this:
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
white-space: nowrap;
}
<body class="artificial-phone-viewport">
<!-- Deleted container to reduce code, it actually
doesn't matter, because it anyway spans
100% width and height of its parent -->
<div class="text">
Lorem ipsum dolor, sit amet consectetur<br/>
adipisicing elit. Temporibus saepe illum<br/>
a magni sequi error fugit dolore neque<br/>
voluptates in laborum.
</div>
</body>
P.S. This snippet is just an example of what I want to see, I don't want any of these <br/>s or white-space: nowrap. Also I want the text to overflow its parent, because I then can use Javascript to scale it propertly, but it is not very relevant for the question, I suppose.
So I figured out a way to do it with Javascript, although I don't like it too much. I just increased the width of the element, until the height was small enough, like this
const text = document.querySelector('.text')
const rem = parseFloat(
getComputedStyle(document.documentElement).fontSize
)
let width = text.clientWidth / rem
while(text.clientWidth > 10*rem) {
width++
text.style.width = `${width}rem`
}
.artificial-phone-viewport {
width: 320px;
height: 500px;
border: 1px solid darkgrey;
}
.text {
font-size: 2.2rem;
}
<body class="artificial-phone-viewport">
<div class="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus saepe illum a magni sequi error fugit dolore neque voluptates in laborum.
</div>
</body>
It's not very nice, but it works for me. If someone finds a way to do it without javascript, I'm open to other solutions
Please check the jsFiddle link and tell why padding is not visible inside div container?
body {
background-color: #B8C4BB;
}
.container {
text-align: center;
}
.section_two {
border: 2px solid red;
padding: 10 px;
}
<div class="container">
<div class="section">
Change the value of the color property to see how it changes the text color of this element.
</div>
<div class="section_two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, alias, aliquid fugiat dolorem repudiandae quidem. Molestiae illum pariatur officia voluptate cumque. Necessitatibus earum consequuntur explicabo minus ratione mollitia illum nam.
</div>
</div>
You have only typing mistake.
use padding property
like: padding: 10px;
insteade of: 10 px;
See Fiddle demo
Your css is like following:
.section_two {
border: 2px solid red;
padding: 10 px;
}
Value for padding is invalid. It should be as padding: 10px. Without space between 10 and px
It is not working because you have put a space between 10 and px. It should be like following code.
.section_two {
border: 2px solid red;
padding: 50px;
}