I am relatively new to MDL and I am trying to understand how to position cards within or next to a piece of text I have. I am very close but I have tried lots of different ways and I don't seem to be getting the outcome I am looking for.
I would like the text to be on the left (which I am happy with at the moment where it is positioned) and two wide MDL cards on the right one on top of the other, in line with the text.
So far I have:
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
Home
Wall
<a class="active" href="shop.html">Shop</a>
Blog
FAQ
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20">
</div>
</div>
<p>
<table>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div></table>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">woolyBox ltd.</h1>
<ul class="mdl-mega-footer__link-list">
<li>About</li>
<li>Shop</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<ul class="mdl-mega-footer__link-list">
<li>Privacy & Terms</li>
</ul>
</div>
</p></div>
</body>
and CSS:
html, body {
height: 100%;
min-height: 100%;
background-color: #ffffff;
font-family: 'Courier New', Courier, monospace;
}
body {
background: #fafafa;
position: relative;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
font-family: 'Courier New', Courier, monospace;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: right;
font-family: 'Courier New', Courier, monospace;
}
.header {
overflow: hidden;
background-color: #ffffff;
}
.header a {
float: left;
color: grey;
text-align: center;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
color: black;
}
.header a.active {
color: #f4d442;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.content {
padding: 16px;
}
.boxed{
width: 50vw;
height: 60vh;
box-align: left;
text-align: justify;
padding: 5%;
background-color: #fff;
margin: 5%;
margin-left: 5%;
}
/* .image {
} */
.boxed-1 {
width: 25%;
height: 100%;
text-align: justify;
padding-top: 10%;
background-color: #fff;
margin: 0 auto;
margin-left: 5%;
margin-right: 80%;
}
.container-wrapper{text-align:center;}
.container-1,
.container-2,
.container-3{width:475px; height:400px; display:inline-block; margin-left:10px; font-family: 'Courier New', Courier, monospace;}
.container-1{background:grey; margin-left:0;}
.container-2{background:grey;}
.container-3{background:grey;}
#media all and (max-width: 650px) {
.container-1{
width:100%;
display:block;
margin:0;
}
.container-2{
width:100%;
display:block;
margin:0;
}
.container-3{
width:100%;
display:block;
margin:0;
}
}
.card-img-top {
height: 200px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.card {
margin: 0 auto;
float: none;
margin-bottom: 5px;
}
.card-text {
color: grey;
text-align: justify;
padding: 5px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
line-height: 25px;
}
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.demo-card-square.mdl-card:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.demo-card-square > .mdl-card__title {
color: #fff;
background: #03a9f4;
}
.demo-card-square > .mdl-card__accent {
background: #ff9800;
}
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
Is anyone able to point me in the correct direction as to where I am going wrong?
There are a variety of ways to get the layout you are looking for. A simple one for what you are after is to use flexbox. Below is a minimal example of a Material Design Lite layout with a header, main content, and a footer that includes the text and card positioning you describe.
You will see that the main html element is set to display: flex, and align-items: center which displays its child elements side by side and vertically aligned in the middle (you can experiment with different align-items options if you are looking for some other vertical alignment). The cards are wrapped in a div so that they are displayed stacked alongside the text (rather than both side by side).
.mdl-layout__content main {
padding: 16px;
display: flex;
align-items: center;
}
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite layout example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Logo</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__content">
<main>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
et pretium dui ante ac lectus.
</div>
<div class="cards">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<!-- close cards -->
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
<!-- close mdl-layout__content -->
</div>
<!-- close mdl-layout -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
In your own html, it looks like you are using p tags as breaks in some places without closing the tag (there is a br tag that is more appropriate for what you intend, but I would recommend against this as you can get what you are looking for by setting appropriate margin and/or padding values in your css). You also forgot to close your footer tag. You can use a html validator to help you clean up syntax issues like these.
Related
I did set the height of .accordion__content manually like 8.2rem to give a soft slide effect. If I set it to something like auto or min-height, it's not soft.
Is there a better way than manually setting the height like below? without javascript.
html {
font-size: 62.5%;
}
h5,
p {
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
body {
margin: 0;
padding: 0;
background: black;
}
.target {
display: block;
top: 0;
left: 0;
position: fixed;
}
.open-accordion {
display: block;
}
.close-accordion {
display: none;
}
span:target ~ .open-accordion {
display: none;
}
span:target ~ .close-accordion {
display: block;
}
.accordion {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.accordion__li {
width: 45rem;
background: white;
border-radius: 0.4rem;
padding: 2rem;
}
.accordion__li a > div {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.accordion__li a > div div {
display: flex;
align-items: center;
}
.accordion__num {
font-size: 1.8rem;
margin-right: 1.3rem;
}
.accordion__title {
font-size: 1.6rem;
}
.accordion__li i {
font-size: 1.3rem;
position: relative;
top: 0.1rem;
right: 0.5rem;
}
/* When accordion is open */
.accordion__content {
font-size: 1.6rem;
line-height: 1.5;
height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.accordion__li:first-of-type span:target ~ .accordion__content {
height: 8.2rem;
padding-top: 1rem;
}
.accordion__li:nth-of-type(2) span:target ~ .accordion__content,
.accordion__li:nth-of-type(3) span:target ~ .accordion__content {
height: 13rem;
padding-top: 1rem;
}
<ul class="accordion">
<span class="target" id="accordion"></span>
<li class="accordion__li">
<span class="target" id="accordion1"></span>
<a href="#accordion1" class="open-accordion" title="open">
<div>
<div>
<span class="accordion__num">01</span>
<h5 class="accordion__title">
Non consectetur a erat nam at lectus urna duis?
</h5>
</div>
<i class="fas fa-chevron-down"></i>
</div>
</a>
<a href="#accordion" class="close-accordion" title="close">
<div>
<div>
<span class="accordion__num">01</span>
<h5 class="accordion__title">
Non consectetur a erat nam at lectus urna duis?
</h5>
</div>
<i class="fas fa-chevron-up"></i>
</div>
</a>
<p class="accordion__content">
Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id
volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna
fringilla urna porttitor rhoncus dolor purus non.
</p>
</li>
<li class="accordion__li">
<span class="target" id="accordion2"></span>
<a href="#accordion2" class="open-accordion" title="open">
<div>
<div>
<span class="accordion__num">02</span>
<h5 class="accordion__title">
Feugiat scelerisque varius morbi enim nunc?
</h5>
</div>
<i class="fas fa-chevron-down"></i>
</div>
</a>
<a href="#accordion" class="close-accordion" title="close">
<div>
<div>
<span class="accordion__num">02</span>
<h5 class="accordion__title">
Feugiat scelerisque varius morbi enim nunc?
</h5>
</div>
<i class="fas fa-chevron-up"></i>
</div>
</a>
<p class="accordion__content">
Dolor sit amet consectetur adipiscing elit pellentesque habitant
morbi. Id interdum velit laoreet id donec ultrices. Fringilla
phasellus faucibus scelerisque eleifend donec pretium. Est
pellentesque elit ullamcorper dignissim. Mauris ultrices eros in
cursus turpis massa tincidunt dui.
</p>
</li>
<li class="accordion__li">
<span class="target" id="accordion3"></span>
<a href="#accordion3" class="open-accordion" title="open">
<div>
<div>
<span class="accordion__num">03</span>
<h5 class="accordion__title">
Dolor sit amet consectetur adipiscing elit?
</h5>
</div>
<i class="fas fa-chevron-down"></i>
</div>
</a>
<a href="#accordion" class="close-accordion" title="close">
<div>
<div>
<span class="accordion__num">03</span>
<h5 class="accordion__title">
Dolor sit amet consectetur adipiscing elit?
</h5>
</div>
<i class="fas fa-chevron-up"></i>
</div>
</a>
<p class="accordion__content">
Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis
orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra
diam sit amet nisl suscipit. Rutrum tellus pellentesque eu
tincidunt. Lectus urna duis convallis convallis tellus. Urna
molestie at elementum eu facilisis sed odio morbi quis
</p>
</li>
</ul>
<script src="https://kit.fontawesome.com/70e0dc75f1.js" crossorigin="anonymous"></script>
Please try this:
height: max-content;
This set height of element based on its content.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/max-content
I am working on a website. I am a little rusty when it comes to CSS. I am trying to get the same effect as this page https://prp.fm/. I want the header to be over the hero section with a transparent background. The header does not need to be sticky, but I am unable to get the header to overlay over the header.
I tried adding background-attachment:fixed in the .hero-section CSS, but it would just fix the image to the page and not scroll with the page. That I do NOT want. I want the hero section to be behind the header and scroll with the page.
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>
Just reduce an opacity on the header and increase the font-weight of the contents which are in the header like the following
.main {
padding-top: 0 !important;
}
.header-section {
background: #212121;
padding: 0 33px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
opacity: .3; /* added */
position: relative:
}
.hero-section {
height: 962px;
background-image: url(../img/chart-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-top: 0px;
z-index: 100;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<header class="header-section" id="header">
<div class="header-warp">
<!-- Site Logo -->
<a href="home.html" class="site-logo">
<img src="img/logo.png" alt="">
</a>
<!-- responsive -->
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<div class="main">
<section class="hero-section">
</section>
<div id="inner">
<section class="some-section">
<div class="container">
<div class="section-title text-center">
<h2>Tile</h2>
</div>
<div class="row about-box">
<div class="col-lg-6">
<img src="img/pic1.jpg" alt="">
</div>
<div class="col-lg-6">
<div class="ab-content">
<h4>A short History</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
</div>
</div>
</div>
</div>
</section>
</div>
I am a back-end developer and so im not very familiar with front-end developing. recently due to absence of front end designer, i am designing a website in which i'm facing a problem.
this is a non-responsive website who looks fine in desktop, but in mobile the layout shows more than 100%, i'm attaching screenshots
#charset "utf-8";
/* CSS Document */
.top-all {
margin: 0 auto;
width: 900px;
position: relative;
margin-top: 5px;
}
.top-header {
height: 120px;
background-color: #1A1318;
margin-bottom: -2px;
margin-left: 1px;
margin-right: 1px;
position: relative;
}
.main-body {
margin: 0 auto;
width: 900px;
background-color: #ffffe6;
position: relative;
height: auto;
}
.header {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.logo-container {
height: 100px;
width: 180px;
background-color: #E4E4E4;
float: right;
margin-right: 40px;
margin-top: 5px;
}
.container {
width: 100%;
background-color: #E8E8E8;
}
.main-left {
width: 60%;
display: inline-block;
background-color: #ffffe6;
}
.main-right {
display: inline-block;
float: right;
width: 36%;
}
.news {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
ul {
list-style-type: square;
}
ul li {
color:#00001a;
margin-top: 9px;
}
.announcement {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
.quick-inquiry {
height: 400px;
border: 1px solid #d5ff80;
border-radius: 8px;
background-color: white;
}
h1 {
color: #ffffff;
font-size: 60px;
font-weight: bold;
font-family: "Lucida Console", Courier, monospace;
padding: 30px;
margin-left: 30px;
}
h3 {
font-size: 24px;
text-align: CENTER;
color: white;
}
h4 {
font-size: 18px;
font-family: arial;
margin-right: 6px;
margin-left: 6px;
}
h5 {
color: #ffffff;
font-size: 30px;
}
h6 {
color: white;
font-size: 24px;
margin-left: 8px;
}
.h6 {
padding-top: 1px;
background-image: linear-gradient( #ffff66,#999900, #ffff66);
height: 48px;
width: 400px;
}
h7 {
font-size: 26px;
color: white;
margin-left: 8px;
}
.h7 {
padding-top: 3px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
height: 50px;
}
h8{
font-size: 20px;
color: white;
margin-left: 8px;
}
.h8{
padding: 4px;
background-color: #006633;
background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
height: 40px;
width: 120px;
}
p{
font-size: 16px;
margin-left: 5px;
}
.p {
background-color: #ffffff;
border: 1px solid #b3b3ff;
margin-bottom: 10px;
border-radius: 8px;
}
.h3 {
background-color: black;
height: 68px;
margin-right: 7px;
margin-left: 7px;
padding-top: 1px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
}
marquee {
border-top : 4px solid #ffff00;
border-bottom : 4px solid #ffff00;
height: 70px;
background-color: #0EB177;
}
.footer {
height: 200px;
background-color: #150F0F;
margin-bottom: 20px;
}
body {
font-family: Arial;
color: #535151;
background-color: #e6ffff;
padding: 0px;
max-width: 100%;
min-width: 99%;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-all">
<div class="top-header">
<div class="logo-container">
<img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
</div>
<h1>Patliputra ITI</h1>
</div>
<div class="navbar">
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
News
Gallery
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
<div class="main-body">
<div class="header">
<h4> "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
<div class="container">
<h2>Welcome to Patliputra ITI</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to
="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
<div class="main-left">
<div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
</div>
<div class="main-right">
<div class="news">
<div class="h3"><h3>Latest News</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
<li>News 4</li>
<li>News 5</li>
<li>News 6</li>
<li>News 7</li>
<li>News 8</li>
<li>News 9</li>
<li>News 10</li>
</ul>
</div>
<div class="announcement">
<div class="h3"><h3>Latest Announcement</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
<div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
desktop view of the site
mobile view of the site
There's a couple of things you need to change:
Remove the inline-styles on the images in the slider
add a media query for mobile view
Remove the display: inline-block; float: right; on the news and the main-right container.
Remove the marquee tag, it's deprecated.
As already mentioned by someone else, change all the fixed widths to max-widths.
Since you are also including bootstrap, I would make use of their grid system and classes for your layout and basic styling, otherwise remove it.
#charset "utf-8";
/* CSS Document */
.top-all {
margin: 0 auto;
max-width: 900px;
position: relative;
margin-top: 5px;
}
.top-header {
height: 120px;
background-color: #1A1318;
margin-bottom: -2px;
margin-left: 1px;
margin-right: 1px;
position: relative;
}
.main-body {
margin: 0 auto;
max-width: 900px;
background-color: #ffffe6;
position: relative;
height: auto;
}
.header {
height: auto;
margin-bottom: 20px;
}
.logo-container {
height: 100px;
width: 180px;
background-color: #E4E4E4;
float: right;
margin-right: 40px;
margin-top: 5px;
}
.container {
background-color: #E8E8E8;
}
.main-left {
width: 60%;
display: inline-block;
background-color: #ffffe6;
}
.main-right {
display: inline-block;
float: right;
width: 36%;
}
.news {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
ul {
list-style-type: square;
}
ul li {
color:#00001a;
margin-top: 9px;
}
.announcement {
border: 1px solid #d5ff80;
margin-bottom: 10px;
border-radius: 8px;
background-color: #f0f5f5;
}
.quick-inquiry {
height: 400px;
border: 1px solid #d5ff80;
border-radius: 8px;
background-color: white;
}
h1 {
color: #ffffff;
font-size: 60px;
font-weight: bold;
font-family: "Lucida Console", Courier, monospace;
padding: 30px;
margin-left: 30px;
}
h3 {
font-size: 24px;
text-align: CENTER;
color: white;
}
h4 {
font-size: 18px;
font-family: arial;
margin-right: 6px;
margin-left: 6px;
}
h5 {
color: #ffffff;
font-size: 30px;
}
h6 {
color: white;
font-size: 24px;
margin-left: 8px;
}
.h6 {
padding-top: 1px;
background-image: linear-gradient( #ffff66,#999900, #ffff66);
height: 48px;
width: 400px;
}
h7 {
font-size: 26px;
color: white;
margin-left: 8px;
}
.h7 {
padding-top: 3px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
height: 50px;
}
h8{
font-size: 20px;
color: white;
margin-left: 8px;
}
.h8{
padding: 4px;
background-color: #006633;
background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
height: 40px;
width: 120px;
}
p{
font-size: 16px;
margin-left: 5px;
}
.p {
background-color: #ffffff;
border: 1px solid #b3b3ff;
margin-bottom: 10px;
border-radius: 8px;
}
.h3 {
background-color: black;
height: 68px;
margin-right: 7px;
margin-left: 7px;
padding-top: 1px;
background-image: linear-gradient(#706B6B,#000000,#706B6B);
}
marquee {
border-top : 4px solid #ffff00;
border-bottom : 4px solid #ffff00;
height: 70px;
background-color: #0EB177;
}
.footer {
height: 200px;
background-color: #150F0F;
margin-bottom: 20px;
}
body {
font-family: Arial;
color: #535151;
background-color: #e6ffff;
padding: 0px;
position: relative;
}
#media screen and (max-width: 650px) {
.main-left {
background-color: #ffffe6;
display: block;
width: auto;
}
.main-right {
float: none;
width: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Patliputra ITI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-all">
<div class="top-header">
<div class="logo-container">
<img src="images/main_logo.png" style="height: 100px; width: 180px;" alt="logo">
</div>
<h1>Patliputra ITI</h1>
</div>
<div class="navbar">
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
News
Gallery
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</div>
</div>
<div class="main-body">
<div class="header">
<h4> "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain."</h4>
<div class="container">
<h2>Welcome to Patliputra ITI</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to
="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.static-collegedunia.com/public/college_data/images/appImage/19709_BBSBCE_APP.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://wallpaperaccess.com/full/1209519.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://www.pixelstalk.net/wp-content/uploads/2016/10/College-Wallpapers-HD-1920x1080.jpg" alt="New York">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
<div class="item">
<img src="https://adrian.edu/uploads/galleries/TerraceWP.jpg" alt="New York">
<div class="carousel-caption">
<h3>Patliputra ITI</h3>
<p>Patliputra ITI</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<marquee width="100%" direction="left" height="100px">
<h5>The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h5>
</marquee>
<div class="main-left">
<div class="h6"><h6>Why Patliputra ITI?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Our Mission And Vision</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6> How to get Admission?</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h6"><h6>Eligibility</h6></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus. Proin fermentum mauris a lacus pellentesque interdum. Vestibulum sollicitudin augue ac dolor eleifend, mattis pretium eros auctor. Aliquam pharetra laoreet leo a accumsan. Pellentesque non mattis nisi. Vivamus quis congue risus.</p></div>
<div class="h7"><h7>Admission process</h7></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="h8"><h8>Process 1</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 2</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
<div class="h8"><h8>Process 3</h8></div><div class="p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mi a odio maximus rutrum eget in justo. In in est metus. Duis efficitur dui euismod suscipit elementum. Nam gravida nisi metus, pretium aliquam justo porta non. Quisque semper fermentum sem at maximus.</p></div>
</div>
<div class="main-right">
<div class="news">
<div class="h3"><h3>Latest News</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h4>
<ul class="ul_news">
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
<li>News 4</li>
<li>News 5</li>
<li>News 6</li>
<li>News 7</li>
<li>News 8</li>
<li>News 9</li>
<li>News 10</li>
</ul>
</div>
<div class="announcement">
<div class="h3"><h3>Latest Announcement</h3></div>
<h4>Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always fre</h4></div>
<div class="quick-inquiry">
<div class="h3"><h3>Quick-Inquiry</h3></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
I've been having an issue with fixing some text on two of my pages. I have a box on the left with some text in it, and two MDL cards on the right containing dialogues.
My issue is that as soon as I put a fixed position term in the CSS for the text, my cards overlap it and realign to the left. I tried to contain them but that didn't seem to be any help, maybe I did something incorrectly.
I like the way it looks as it is just now, but I would like the MDL cards to scroll independently. Again, probably an easy fix and something I've overlooked but heres what I have so far:
<div class="mdl-layout__content">
<main>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
et pretium dui ante ac lectus.
</div>
<div class="cards">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text"></h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">View Product</button>
<dialog id="dialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Product 1</h3>
<div class="mdl-dialog__content">
<p>
This is an example of the Material Design Lite dialog component.
Please use responsibly.
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button">Close</button>
</div>
</dialog>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text"></h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-button--raised mdl-js-button dialog-button-1">View Product</button>
<dialog id="dialog-1" class="mdl-dialog">
<h3 class="mdl-dialog__title">Product 2</h3>
<div class="mdl-dialog__content">
<p>
This is an example of the Material Design Lite dialog component.
Please use responsibly.
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button">Close</button>
</div>
</dialog>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
CSS:
.boxed-1{
width: 40%;
height: auto;
text-align: justify;
display: flex;
/* position: fixed; */
vertical-align: center;
padding: 15px;
margin: 20px;
background-color: #fff;
font-family: 'Courier New', Courier, monospace;
}
.mdl-layout__content main {
display: flex;
align-items: right;
}
.demo-card-wide.mdl-card {
width: 100%;
/* margin-left: 90%; */
font-family: 'Courier New', Courier, monospace;
/* position: relative; */
}
.demo-card-wide > .mdl-card__title {
color: #cccccc;
height: 430px;
background: url('images/placeholder.jpg') 0px;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
Your .boxed-1 and .cards elements are holding the space for the left and right sections of your flex layout, so changing .boxed-1 to position: fixed breaks the layout. Simple fix without changing your current approach too much would be to wrap your text in another div and set it to position: fixed, so .boxed-1 still holds the space you want in your flex layout and the new div prevents the text from scrolling. You will need some additional css to ensure the new div doesn't overlap the other elements.
Example HTML:
<main>
<div class="boxed-1">
<div class="fixed">
Lorem ipsum...
</div>
</div>
<div class="cards">
<!-- cards html -->
</div>
</main>
Example CSS:
main {
display: flex;
}
.boxed-1 {
width: 30vw;
background-color: #fff;
font-family: 'Courier New', Courier, monospace;
text-align: justify;
}
.cards {
width: 70vw;
}
.fixed {
position: fixed;
top: 20px;
left: 20px;
width: calc(30vw - 40px);
}
I am using a banner image which will resize depending on the width of the screen. I want the other content which overlays the image and also appears under the image to reduce it's top margin as the image changes size. How should I do this?
header {
background-color: #02a5da;
text-align: center;
color: #f7f7f7;
position: absolute;
width: 100%;
top: 0;
font-size: 12px;
}
#media only screen and (max-width: 959px) {
.tpLogin {
visibility: hidden;
}
}
.navBar {
background-color: #02a5da;
text-align: center;
position: absolute;
top: 0;
height: 45px;
}
.navLink {
padding-top: 13px;
padding-bottom: 9px;
}
/*Home*/
.tpLogin {
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
border: 1px solid black;
width: 80%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.8);
}
#media only screen and (min-width: 960px) {
.tpLogin {
margin-top: 150px;
}
.homeInfo {
margin-top: 200px;
}
}
#username,
#password {
max-width: 80%;
margin-bottom: 20px;
border: 2px solid black;
padding: 5px 10px;
}
#btnSubmit {
width: 40%;
padding: 5px 20px;
background-color: #404040;
color: #f7f7f7;
}
.login {
margin-bottom: 20px;
}
.banner {
width: 100%;
height: auto;
position: absolute;
z-index: -1;
margin-top: -105px;
}
.homeIcons {
font-size: 40px;
}
.homeInfo {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.homeInfoHeading {
font-size: 26px;
}
.homeInfoText {
padding-bottom: 50px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
#media only screen and (max-width: 767px) {
.textSplit {
border-bottom: 4px solid #02a5da;
}
.iconPadding {
margin-top: 40px;
}
}
.last {
margin-bottom: 50px;
}
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navBar pure-u-5-5">
<div class="pure-g">
<div class="pure-u-6-24"></div>
<a class="active pure-u-3-24 navLink" href='index.html'>
<div class="navText">Home</div>
</a>
<a class="pure-u-3-24 navLink" href='about.html'>
<div class="navText">About Me</div>
</a>
<a class="pure-u-3-24 navLink" href='service.html'>
<div class="navText">Service</div>
</a>
<a class="pure-u-3-24 navLink" href='contact.html'>
<div class="navText">Contact</div>
</a>
<div class="pure-u-6-24"></div>
</div>
</div>
<img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />
<div class="tpLogin">
<h2>Already a Member?</h2>
<form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
<div class="validation">
</div>
<input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
<input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
<input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
</form>
<h3>How do I become a member?</h3>
</div>
<div class="homeInfo pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-bullhorn homeIcons"></i>
<h2 class="homeInfoHeading">Service</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-cogs homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Software</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3 last">
<i class="fas fa-check-circle homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Goal</h2>
<p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
</div>
</body>
</html>
I have created a JS Fiddle so you can see what I mean. https://jsfiddle.net/xp7b8k8p/7/
You need to make it so you do not absolutely position your image. Absolute positioning shouldn't really be used for layout purposes - it's for when you want to remove something from the natural flow of the document (eg the login box).
With that in mind, I have changed your styles:
#media only screen and (max-width: 959px) {
.tpLogin {
visibility: hidden;
}
}
.navBar {
background-color: #02a5da;
text-align: center;
height: 45px;
}
.navLink {
padding-top: 13px;
padding-bottom: 9px;
}
/*Home*/
.tpLogin {
text-align: center;
border: 1px solid black;
width: 80%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#username,
#password {
max-width: 80%;
margin-bottom: 20px;
border: 2px solid black;
padding: 5px 10px;
}
#btnSubmit {
width: 40%;
padding: 5px 20px;
background-color: #404040;
color: #f7f7f7;
}
.login {
margin-bottom: 20px;
}
.banner {
width: 100%;
height: auto;
}
.banner-wrapper {
position:relative;
}
.homeIcons {
font-size: 40px;
}
.homeInfo {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.homeInfoHeading {
font-size: 26px;
}
.homeInfoText {
padding-bottom: 50px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.last {
margin-bottom: 50px;
}
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navBar pure-u-5-5">
<div class="pure-g">
<div class="pure-u-6-24"></div>
<a class="active pure-u-3-24 navLink" href='index.html'>
<div class="navText">Home</div>
</a>
<a class="pure-u-3-24 navLink" href='about.html'>
<div class="navText">About Me</div>
</a>
<a class="pure-u-3-24 navLink" href='service.html'>
<div class="navText">Service</div>
</a>
<a class="pure-u-3-24 navLink" href='contact.html'>
<div class="navText">Contact</div>
</a>
<div class="pure-u-6-24"></div>
</div>
</div>
<div class="banner-wrapper">
<img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />
<div class="tpLogin">
<h2>Already a Member?</h2>
<form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
<div class="validation">
</div>
<input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
<input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
<input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
</form>
<h3>How do I become a member?</h3>
</div>
</div>
<div class="homeInfo pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-bullhorn homeIcons"></i>
<h2 class="homeInfoHeading">Service</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<i class="fas fa-cogs homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Software</h2>
<p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
<div class="pure-u-1 pure-u-md-1-3 last">
<i class="fas fa-check-circle homeIcons iconPadding"></i>
<h2 class="homeInfoHeading">Goal</h2>
<p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
</div>
</div>
</body>
</html>