In the top bar, How can the green and the red "li" area be made with width 3em?, I tried my css as in the code but all the 3 list items remain with equal width.
It will be displayed in a mobile app webView.
Thank you
ul {
text-align: center;
}
li {
height: 2em;
line-height: 2em;
}
.menuIconLeft {
width: 3em;
background-color: green;
}
.menuIconRight {
width: 3em;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/myStyle.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<section id="firstpage" data-role="page">
<div data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li class="menuIconLeft">
☰
</li>
<li>
Activity label
</li>
<li class="menuIconRight">
⋮
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li>
NO
</li>
<li>
EXTRA
</li>
<li>
YES
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
To adhere to the result you where looking for you needed to:
Set your list items display attribute to display: inline-block.
Set your unordered list to list-style-type: none so the list item bullets do not show.
Set your left and right list elements to float: left and float: right respectively, this helps a lot because your left and right list elements will be center aligned (due to your ul { text-align: center }), so they will not flush left and right unless you tell them to.
I added a new class menuIconCenter to the middle list element. This applies a width of width: calc(100% - 6em);, since the left and right list elements are each 3em in width, then substracting both these widths by 100% will yield the remaining width of your center list element.
"How can the green and the red "li" area be made with width 3em?"
Added a header and footer class, to help differentiate how the footer and header sections work. This is an important architectural change, can you tell why?
Added <b> to bold the text in the footer.
Suggestion: if you want to make these list elements clickable or work like buttons do the following (this is in pseudocode!):
<li>
Something here
</li>
li > a {
display: block;
width: 100%;
}
Any questions please ask in the comments below :-)
ul {
text-align: center;
min-width: 320px;
}
li {
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0;
}
.menuIconLeft {
float: right;
width: 3em;
}
.menuIconCenter {
width: calc(100% - 6em);
}
.menuIconRight {
float: left;
width: 3em;
}
.center {
list-style-type: none;
padding: 0;
margin: 0;
}
.header .menuIconLeft {
background-color: green;
}
.header .menuIconRight {
background-color: red;
}
.header .center {
border: 1px solid lightgray;
}
.footer .center {
background-color: lightgray;
}
<section id="firstpage" data-role="page">
<div class="header" data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li class="menuIconLeft">
☰
</li>
<li class="menuIconCenter">
Activity label
</li>
<li class="menuIconRight">
⋮
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li class="menuIconLeft">
<b>NO</b>
</li>
<li class="menuIconCenter">
<b>EXTRA</b>
</li>
<li class="menuIconRight">
<b>YES</b>
</li>
</ul>
</nav>
</div>
</section>
Related
I have text between 2 block float elements and I want to add an additional indentation to the right for a quote id element inside the p paragraph. The problem is that margin-left doesn't work next to a float element and if I use the position: relative method, like in the shown example, then the text will clip the right float block. Is there a way to move the quote text to the right without the clipping?
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
Edit:
For an exact example you can look at en.wikipedia.org/wiki/Hercules at the line Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: You can see that the indented text that follows is essentially between 2 floating images.
The margin is correctly applied.
The problem is that your block is before in your html and it you should be after.
So, for what you are trying to achieve it is better to use display:flex
So I restructure your html, by placing a "container" and applying the flex.
Then, I put all your p into a div and place the right block below.
As you added a left to your #quote you need to adjust width of it too.
So I could remove your float.
DEMO
#left-block{
height: 150px;
width:50px;
/*float: left;*/
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
/*float: right;*/
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
width: calc(100% - 30px);
}
.d-flex{
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-flex">
<div id="left-block"></div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
<p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</div>
<div id="right-block"></div>
</div>
</body>
</html>
You can use a margin, but the value has to be larger than the width of the floated elements, since the margin is measured from to side of the parent element, not taking the floated element into account:
(no need for relative position BTW)
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
margin: 0 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
So the solution that isn't perfect but works, is to simply add overflow: hidden in to the quote element. The explanation seems to be written here
https://stackoverflow.com/a/18718157/18429900
The only issue with this is that it doesn't move the text to the left once it goes lower than the block height as show in the example below.
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
overflow: hidden;
padding-top: 40px;
padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
I have a simple grid (https://jsfiddle.net/3f5oLjxu/1/), how can I get the links on the left side of the grid to center vertically, instead of being positioned at the top.
css:
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
margin: 0px 12%;
}
.grid>* {
border: 1px solid lightgray;
padding: 15px;
}
<div class="grid">
<nav>
<ul>
<li>Home</li>
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Deck Painting</li>
<li>Power Wash</li>
<li>Wallpaper Remvoal</li>
<li>Contact</li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
</section>
</div>
<!-- close grid -->
I have tried all sorts of combinations of justify-content, justify-items, align-self, margin: auto;, turning the nav into a flex item, the ul into a flex item, etc... Thanks in advance for any help.
You could do this using flexbox:
https://yoksel.github.io/flex-cheatsheet/
It is easy to learn and is very common tool in nowadays websites.
Make .grid a flex item with flex-basis: 100%; and flex-flow: row nowrap;
Make .nav a flex container, and align it's items in the center with align-items: center;
OR if you just want to use flex on your nav element and nowhere else, doing
nav{
display: flex;
align-items: center;
}
would be totally sufficient, If you don't want your whole layout to have a flexy manner
.grid {
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
margin: 0px 12%;
}
.nav{
display: flex;
align-items: center;
}
.grid>* {
border: 1px solid lightgray;
padding: 15px;
}
<div class="grid">
<div class="nav">
<nav>
<ul>
<li>Home</li>
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Deck Painting</li>
<li>Power Wash</li>
<li>Wallpaper Remvoal</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
</section>
</div>
<!-- close grid -->
To change the position of a child of a grid, you can use the *-self property. Vertical will be your column access, use nav {align-self: center;} to vertically center the nav in this scenario.
You can use the flexbox layout module. It seems like you were on the track there to begin with. Just attach this to the nav style.
nav {
display: flex;
alignt-items: center;
}
i have a box for a text like this
my css is like this for the box,
.bg-text-kol2 {
background-color: #ffffff;
background-size: 10px 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}
because this slider use swipper slider this is the js,
$(document).ready(function() {
(function ($) {
//initialize swiper when document ready
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 20,
centeredSlides: true,
})(jQuery);
});
the question is how to make the size is same? i want to make the box is 640px x 640px?
I think you can work on from this demo, I tried to replicated your images.
The most important here is you need to set the swiper height, this property helps the plugin to determine the size of the swiper.
Codepen demo: https://codepen.io/DieByMacro/pen/mYxJNo
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 2,
loop: true,
spaceBetween: 20,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
.swiper-container {
width: 100%;
height: 600px;
}
/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
display: flex;
flex-flow: column nowrap;
}
.swiper-item .item-image {
flex: 0 0 auto;
background: blue;
height: 250px;
}
.swiper-item .item-content {
flex: 1 1 0px;
height: auto;
background: white;
padding: 20px;
width: 85%;
margin: -30px auto 0;
}
.wrapper {
background: lightgreen;
padding: 10px;
width: 100%;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
</div>
</div>
</div>
<div class="swiper-slide swiper-item">
<div class="item-image">
Image
</div>
<div class="item-content">
<div class="item-content__text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
There are a lot of examples for how to have a fixed width sidebar on Bootstrap 4, but I haven't found one that will cause the main content to disappear on mobile.
I've tried the following:
<div class="row no-gutters flex-nowrap">
<div class="col-md col-12 d-none d-xs-block d-sm-block ">
Main area
</div>
<div class="col-md-4 col-12 sidebar">
Sidebar
</div>
</div>
.sidebar {
max-width: 600px; min-width: 600px
}
And this mostly works, but what happens is that between 768 to 576 pixels the sidebar disappears entirely.
What I'm after is for the sidebar to be a fixed width with the main area shrinking and eventually disappearing.
With few lines of CSS you can achieve this with Flexbox. Please have a look in snippet I added with this answer.
To know more about Flexbox you can checkout those links.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://yoksel.github.io/flex-cheatsheet/
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
min-width: 150px;
max-width: 150px;
height: 100%;
background: grey;
padding: 20px;
}
.content {
padding: 20px;
height: 100%;
background: lightgrey;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
</div>
</div>
I believe you're looking for this:
#media (min-width:768px) {
.sidebar {
max-width: 600px; min-width: 600px;
}
}
.sidebar {
background-color: #f5f5f5;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters flex-nowrap">
<div class="col d-none d-md-block">
Main area
</div>
<div class="col sidebar">
Sidebar
</div>
</div>
I wrapped the fixed size rule in a #media query condition only applying on md and up and I revised classes applied to columns accordingly.
Since you're setting the custom width of your sidebar anyway, you don't need col-* classes on your columns.
Using OSX 10.11.2, jquery.mobile-1.4.5.css "JQM"
The code below produces the image on the left. But if I comment out the JQM I get the image on the right. both have some different functionalities which I need to combined:
float the right and left icons on the topBar and resize them.
fixed top and bottom bar not to scroll up or down.
style some boarders like in image 2.
if I use JQM, it cancels the css for 1 and 3, if I comment it out or even put it under the body tag, it cancels 2 and 3. I would like to include JQM for future use in my webApp which later will be converted to work inside a webView.
Could you please suggest a fix. Thanks
.barTop, .barBottom {
text-align: center;
list-style-type: none;
min-width: 320px;
padding: 0;
margin: 0;
}
.barTop li, .barBottom li {
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0;
background-color: #c8c7c9;
}
.menuIconLeft {
float: left;
width: 2em;
}
.menuIconRight {
float: right;
width: 2em;
}
.menuIconCenter {
width: calc(100% - 5em);
}
.barBottom li {
width: 32%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/myStyle.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<section id="firstpage" data-role="page">
<div class="header" data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="barTop">
<li class="menuIconLeft">
<b>☰</b>
</li>
<li class="menuIconCenter">
Activity label
</li>
<li class="menuIconRight">
<b>⋮</b>
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="barBottom">
<li>
<b>NO</b>
</li>
<li>
<b>EXTRA</b>
</li>
<li>
<b>YES</b>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
There are two parts to understand to solve this type of problem. Firstly, CSS prioritises whatever runs later - if you change a div background-color, and then change it again later, the latter change will apply.
Secondly, is the !important tag. By inserting it, you can force a certain aspect to override anything else that may apply to the code, for example;
height: 2em !important;
With any luck, you should be able to use this to solve your problem.