CSS flexgrid styling - javascript

I am just trying to get the grid row to look the way I want and I have a large CSS and can't seem to get the column with three rows of the text right. There's the photo to indicate where the obvious entry should read from.
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,
code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body {
background-image: url(https://i.imgur.com/sCfeeeY.png) ;
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.row {
flex: 2 auto;
grid-column: 1 30em;
display: flex;
margin: auto;
}
.active {
margin: 1em;
}
.fullwebpage .section {
display: grid;
grid-gap: .4rem;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
/* grid-template-columns: repeat(auto-fit, minmax(40em, ifr)); */
grid-column: 1;
flex: 0 1 28em;
}
.box {
display: flex;
align-items:center;
grid-column: 4;
flex: 3 auto;
width: 100%;
padding-top:1.5em;
padding-left: 2em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
/* padding-left: 3em; */
margin-right: 3em;
}
.sectionfirst {
margin-left: 5em;
/*margin-right:2em;
height:39em; */
padding-top: 1em;
}
.head_bg {
padding-top:1.5em;
padding-left: 2em;
}
.section_bg .head_bg a:active {
color: black;
}
.header {
padding-left: 2em;
padding-right:3em;
}
.logo {
margin-left: 3em;
margin-right: 2em;
}
.links {
padding-bottom:1em;
}
.links li a {
color: white;
}
.footer a:active {
color: white;
}
.promo_slogan_mid {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
}
.promo_slogan_mid p {
font-size: 1vw;
font-weight: normal;
}
.promo_slogan {
font-weight: bold;
font-size: 3vw;
align-items: center;
word-wrap: break-word;
}
.promo_slogan p {
font-size: 1vw;
font-weight: normal;
}
.nav_menu {
float: left;
/* margin-left: 0em;*/
margin-right: 1.5em;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.nav_menu a {
margin: .3em 1.3em;
}
.updateinput#gsbutton {
float: right;
text-decoration: none;
/* display: inline-block; */
z-index: 1;
}
.gsbutton:hover .gsbutton:active {
border: none;
outline: none;
}
.wrap {
display: inline-flex;
width:100%;
margin-top:1em;
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.footerbanner {
display: flex;
justify-content: space-between;
}
.container1 {
width: 100%;
display: flex;
}
.col-xs {
width:20%;
}
.sectionsecond {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
padding-top: 1em;
/* display: flex;
flex: 3 auto;
grid-row: auto 1;
width: 100%; */
margin: 1em;
height:39em;
margin-right: 3em;
}
.mycolumn_header .row_header {
margin-bottom: 2em;
display: block;
text-align: center;
}
.foot-row h1 {
display: flex;
/* height: 8em; */
padding-top: 2.1em;
padding-bottom: 0em;
margin: 1em 2em;
width: 100%;
z-index:1;
}
.updateinput#email_validate {
text-align: end;
padding-top: 2.1em;
margin: 1em 2em;
}
.updateinput {
font-weight: bold;
font-size: 20px;
padding-bottom: 0em;
}
.topfooterbanner div {
font-weight: bold;
font-size: 20px;
height: 12em;
}
.modal-content {
border-radius: 1rem
}
.modal-content:hover {
box-shadow: 2px 2px 2px black
}
.btn:hover a:active {
border: none;
}
.btn {
text-decoration: none;
}
.fa {
color: #2b84be;
font-size: 90px;
padding: 30px 0px
}
.form {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(to bottom right, rgb(10, 153, 209), rgb(5, 76, 122));
text-align: center;
font-size: 16px;
}
.b1 {
background-color: #2b84be;
box-shadow: 0px 4px #337095;
font-size: 17px
}
.r3 {
color: #c1c1c1;
font-weight: 500
}
.topfooterbanner {
text-decoration: none;
width: 100%;
}
.row_header h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row {
/* padding-top: 2.6em; */
text-align: end;
background-color: #F97419;
display: flex;
}
.foot-row::before {
position: absolute;
width: 100%;
}
.statementnews {
width: 300px;
height: 300px;
padding-top: 1em;
padding-left: 30px;
box-shadow: 0 0 10px;
border-radius: 10px;
margin: 10px;
overflow: hidden;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left: 1em;
margin-right: 1em;
background-color: #f0f0f0;
}
.statementnews:hover {
transform: rotate(360deg);
}
.col {
min-width:15vw;
min-height: 60vh;
}
.mycolumn2 {
display: flex;
flex: 4 auto;
grid-row: 1 2;
width: 100%;
padding-left: 4em;
margin: 1em;
}
.sectionthird#gsbutton_3 {
align-items: center;
}
.sectionthird {
padding-top: 8em;
display: flex;
/* grid-row: auto 3; */
}
.col-md-6#sidebar1 {
width:60%;
padding-top: 0em;
padding-left: 0em;
padding-right: 0em;
align-items: center;
}
.middle_id_img {
padding-left:1em;
}
.col-md-4 {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
/* font-size: 1vw; */
/* font-weight: normal; */
}
.col-md-6 {
height: 8em;
width: 45%;
display: flex;
/* justify-content: space-between; */
margin-left: 2em;
/* padding-left: 5em; */
padding-top: 2em;
}
.table-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.table-row#content {
height: 14em;
}
.mycolumn_header {
font-weight: bold;
font-size: 45px;
}
.sectionthird {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
}
.mycolumn#userresponse {
font-size: 8em;
font-weight: bold;
}
.mycolumn#content_gsbutton {
font-size: .4em;
align-items: center;
margin-bottom: 0;
}
.mycolumn {
height: 8em;
align-items:center;
text-align: start;
display: table-cell;
margin-left: 2em;
padding-left: 1em;
padding-top: 2em;
}
#sidebar {
height: 9em;
box-shadow: -.4em 1em #888888;
width:30%;
}
#align_bottom {
padding-top: 10em;
padding-left: 40em;
margin: 0;
font-size: 1vh;
font-family: Verdana;
font-weight: normal;
}
.footer_column ul {
padding-top: 1em;
display: block;
text-align: center;
}
.gsbutton_footer {
position: center;
}
.footer_column {
display: inline-block;
width: 100%;
color: white;
font-size: 1.7vh;
font-family: Verdana;
font-weight: bold;
padding-left: 19em;
margin: 0em 1em;
}
.sectiontopfooter {
margin-top: 15em;
}
.sectionfooter {
width: 100%;
display: flex;
background-color: black;
}
.sectionfooter li {
padding-top: 1em;
vertical-align: bottom;
}
.wrap-row#middle_id_img {
width: 20%;
}
.wrap-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.wrap-row#sidebar_col {
display: grid;
grid-template-columns: 3;
padding-top: 8em;
}
.wrap-row#box-md-3 {
padding-top: 8em;
width: 100%;
display: flex;
}
<section class="sectionsecond">
<div class="wrap-row">
<div class="box" id="box-md-3">
<div class="col-md-6 " id="table-element1">
<div class="promo_slogan_mid" id="sidebar_col">
<h1> What’s different about Manage?</h1>
<br>
<p>Manage provides all the functionality your team needs, without the complexity. Our software is tailor-made for modern digital product teams.</p>
</div>
</div>
<div class="col-xs" id="middle_id_img">
<img src="https://i.imgur.com/99FIu0U.png" alt="">
</div>
<div class="col-md-6 col-md-4 promo_slogan" id="feedback_slogan">
<h2>Track company-wide progress</h2>
<p class="text_slogan">See how your day-to-day tasks fit into the wider vision. Go from
tracking progress at the milestone level all the way done to the
smallest of details. Never lose sight of the bigger picture again.</p>
<br>
<h2>Advanced built-in reports</h2>
<p class="text_slogan">Set internal delivery estimates and track progress toward company
goals. Our customizable dashboard helps you build out the reports
you need to keep key stakeholders informed.</p>
<br>
<h2> Everything you need in one place</h2>
<p class="text_slogan"> Stop jumping from one service to another to communicate, store files,
track tasks and share documents. Manage offers an all-in-one team
productivity solution.</p>
</div>
</div>
</div>
</section>
I'd really like to have the transition animation from CSS slide the row onload() but I can't seem to get that

Related

I can't fix my bottom menu in any way on Chrome (while on FIrefox works perfectly)

I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});

You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>

When I scale down the page, the box for the class "rcorners2" goes off the page at some parts. How do I fix this so it scales down smoothly?

The expected result is for the box to scale
down and fit into the center of the page
without going off the side of the page.
However, the actual result is that it goes off
the side of the page when I scale down to some
sizes. I don't really want to add in another
screen size because I feel that the ones I have
already should be adequate. Can anyone help
with a solution for this issue, thanks.
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width,
initial-scale=1.0">
<title>Student Hacks</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/pencil.png">
</head>
<body class="grid">
<header>
<img class="logo" href="index.html" src="img/student-hacks-logo.png" alt="Logo">
</header>
<div class="menu" id="menu-toggle"></div>
<nav id="menu-nav">
<a class="home" href="index.html">HOME</a>
<a class="money" href="money.html">MONEY</a>
<a class="study" href="study.html">STUDY</a>
<a class="faqs" href="faqs.html">FAQs</a>
</nav>
<main>
<div class="container">
<img src="img/moneysaving.jpg" alt="image of money">
<div class="text">Money Tips & Tricks</div>
</div>
<div class="animation"></div>
<h2 class="heading">Ways To Save Money</h2>
<hr class="index-hr-1">
<h3>Evening Shopping!</h3>
<p class="rcorners2">Shop in the evenings, this way
there will be a lot more discounted items. There are
sometimes dedicated shopping isles for discounted
items.</p>
<h3>Student Discounts!</h3>
<p class="rcorners2">UniDays and NUS are great ways
to save money. They provide student discount cards
that are compatible with many stores and restaurants.</p>
<h3>Travel Cards!</h3>
<p class="rcorners2">Purchase a 16-25 railcard to travel for
discounted prices. If you have a 123 Student Bank Account
with santander, you get the card for free!</p>
<h3>Budget, Budget, Budget!</h3>
<p class="rcorners2">When you receive your student loan,
start budgeting it out on essentials. Budget food, books,
rent,bills, etc. This lets you know where all your money
is going.</p>
</main>
<footer class="footer">
<p class="footer-writing">Student Hacks© 2018</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
css:
body {
margin: 0;
padding: 0;
width: 100%;
font-family: "Courier New", Courier,
monospace;
font-weight: normal;
font-size: 1rem;
color: black;
}
html {
margin: 0;
padding: 0;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"content"
"footer";
}
header {
grid-area: header;
background: #e5e5e5;
height: 100px;
}
.logo {
width: 350px;
height: 90px;
margin: auto;
display: block;
}
nav {
grid-area: menu;
justify-content: center;
flex-direction: row;
}
nav a {
padding: 0;
color: black;
background: #bfbfbf;
text-decoration: none;
transition: all 0.5s;
width: 100%;
text-align: center;
float: right;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.home {
height: 3vh;
}
.money {
height: 3vh;
}
.study {
height: 3vh;
}
.faqs {
height: 3vh;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
background-color: #e5e5e5;
}
h3 {
text-align: center;
}
.container img {
width: 100%;
height: 200px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
footer {
grid-area: footer;
background-color: #CDCDCD;
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
.footer-writing {
text-align: center;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
text-align: center;
}
.heading {
text-align: center;
font-size: 3rem;
}
.faq-hr-1 {
/* border: dashed 1.5px;
width: 35%;
margin-bottom: 75px;
margin-top: 35px; */
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
.index-hr-1 {
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 12px 12px -10px #8c8b8b inset;
}
.about-us-text {
text-align: center;
font-size: 1.2rem;
margin-left: 25px;
margin-right: 25px;
}
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.wiki-label {
text-align: center;
font-size: 1em;
margin-left: 10%;
}
.submit-btn {
margin-left: 2%;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
margin-left: 20%;
margin-right: 40%;
padding: 20px;
width: 200px;
height: 115px;
font-size: 0.9rem;
text-align: center;
}
#media screen and (min-width: 500px) {
/* applies to screens wider than 499px */
body {
background: #e5e5e5;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
nav {
display: flex;
flex-direction: row;
line-height: 1.5em;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.logo {
width: 400px;
height: 150px;
}
.container img {
width: 100%;
height: 400px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
header {
height: 150px;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 20%;
width: 400px;
height: 145px;
font-size: 1.2rem;
text-align: center;
font-weight: bold;
}
/* DESKTOP STYLES */
#media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */
body {
background: white;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 40%;
width: 800px;
height: 70px;
font-size: 1.2rem;
text-align: center;
}
.container img {
width: 100%;
height: 600px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}

I see you are using media queries, this is great. However you have a typo. You opened the media queries but never closed them.
example:
#media screen and (min-width: 1000px) {
body {
background: white;
}
**}**
don't forget to close your media queries.
Also inspect in the browser where these errors are happening and you could always add more Media queries to remedy the situation. good luck!

Adjusting desktop display for responsive site navigation with topnav and event listeners

I've been working on this for almost the entire day. I'm almost there. Just need the finishing touches that I don't know how to implement.
My navigation should look like this:
This is how the desktop version should look:
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
As you can see, all page titles are horizontal and evenly spaced.
I now have this code:
body,
html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
#media only screen and (max-width: 500px) {
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
nav.active {
display: block;
}
}
.logo {
height: 8vh;
max-width: 80vw;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 4vh;
display: block;
object-fit: contain;
}
img {
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
button {
display: none;
}
#media (max-width: 500px) {
nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active {
display: inline;
}
button {
display: block;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button>☰</button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>
</header>
<script>
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
</script>
The button now appears and is functional on mobile.
Fixes:
1) Show the page names horizontally on desktop.
2) Allow the button to toggle between ☰ and ✘
May be able to implement using: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> just now sure how to though.
3) Format the drop-down so that the text is within its own box on top of the page and right aligned.
I've reached a dead end. I'm just not sure how to fully make this work. Any suggestions may help. You can also edit my code as an answer to get it fully functional if possible.
Thanks in advance :)
Update 1
menu = document.querySelector('nav');
document.querySelector('i')
.addEventListener('click', e => {
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
})
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
nav{
display: flex;
width: 100%;
justify-content: space-evenly;
margin-right: auto;
text-align: right;
}
nav a{
display:block;
padding: 10px;
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
i{
display: none !important;
}
#media (max-width: 500px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
font-family: 'Roboto', serif;
font-size: 2.5vw;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
nav.active{
display: block;
}
i{
display: block!important;
margin:5px;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>
I'm most of the way there now. I've got the switching icons and most of the functionality. There's just a slight issue with text size when resizing the browser window.

body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: left;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
button {
display: none;
}
nav {
display: flex;
flex: 1;
justify-content: space-evenly;
}
#media (max-width: 500px) {
nav {
position: relative;
text-align: left;
padding:10px;
display: none;
}
nav.active {
display: inline;
}
button {
display: block;
position: absolute;
top: -27px;
right: 10px;
width: 25px;
height: 25px;
}
button:before {
font-family: FontAwesome;
content: "\f0c9";
}
.header-container {
flex-flow: row wrap;
}
.logo-container, .navigation-container {
width: 100%;
}
.navigation-container {
justify-content: flex-end;
padding-right: 10px;
position:relative;
}
.navigation-container.active {
}
.navigation-container.active button:before {
font-family: FontAwesome;
content: "\f00d";
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<button></button>
<nav>
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</nav>
</div>
</div>
</div>
<script>
let container = document.querySelector('.navigation-container');
let menu = document.querySelector('nav');
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active');
container.classList.toggle('active')
})
</script>
</body>
</html>
https://jsfiddle.net/Sampath_Madhuranga/1cdu745t/39/
This works for you. I have added new styles for mobile and updated layout.
Try my code. Thanks.

Responsive Web Design: Works in Responsive Mode But Not While Shrinking

First of all, I am not sure whether it's a small ERROR or a strange problem. I am working on a WebPage Design (Front End, No Back End) using HTML5, CSS and some Javascript.
The problem I am having is with Responsiveness. I am using Mozilla Firefox to test the webpage's Responsiveness (Responsive Mode).
PROBLEM: While viewing in Firefox's Responsive Mode, The responsiveness of WebPage Works Just Fine. But, If I try to test it by shrinking the Browser Window, There is no responsiveness at all.
I am unable to figure out what the problem is. And I am using CSS Media Queries For Responsiveness.
Some Code Has Been Given Below.
Check Out The WebPage Here: http://www.ammini.edu.in/fetera
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
nav .title {
width: 100%;
text-align: center;
padding: 10px;
}
nav ul {
width: 100%;
text-align: center;
padding: 10px;
font-size: 14px;
}
#del-countdown {
display: none;
}
#boxes {
width: 100%;
}
#boxes .container {
width: 90%;
height: auto;
}
#boxes .box {
width: 100%;
height: auto;
text-align: center;
padding: 15px 0px;
/* border-bottom: solid white 2px; */
}
#boxes .box h3{
width: 100%;
height: auto;
text-align: center;
}
#boxes .box p{
width: 100%;
height: auto;
text-align: center;
overflow: hidden;
}
#patrons {
background-color: #333333;
font-family: Georgia, sans-serif;
}
#patrons .container {
width: 90%;
}
#patrons .box {
width: 100%;
text-align: center;
height: auto;
padding: 15px 0px;
color: aliceblue;
}
#patrons .box img {
width: 25%;
height: auto;
text-align: center;
/* border-radius: 50%; */
}
#patrons a {
font-weight: 550;
font-size: 18px;
text-align: justify;
text-decoration: none;
color: aqua;
}
#patrons .box p {
font-family: Georgia, sans-serif;
font-weight: 550;
font-size: 18px;
text-align: center;
}
.logo {
display: block;
width: 80%;
height: auto;
}
.events {
display: grid;
grid-template-columns: 1fr;
}
}
#media only screen
and (min-device-width : 480px)
and (max-device-width : 768px) {
nav .title {
width: 100%;
text-align: center;
padding: 10px;
}
nav ul {
width: 100%;
text-align: center;
padding: 10px;
font-size: 14px;
}
#del-countdown {
display: none;
}
#boxes {
width: 100%;
}
#boxes .container {
width: 90%;
height: auto;
}
#boxes .box {
width: 100%;
height: auto;
text-align: center;
padding: 15px 0px;
/* border-bottom: solid white 2px; */
}
#boxes .box h3{
width: 100%;
height: auto;
text-align: center;
}
#boxes .box p{
width: 100%;
height: auto;
text-align: center;
overflow: hidden;
}
#patrons {
background-color: #333333;
font-family: Georgia, sans-serif;
}
#patrons .container {
width: 90%;
}
#patrons .box {
width: 100%;
text-align: center;
height: auto;
padding: 15px 0px;
color: aliceblue;
}
#patrons .box img {
width: 25%;
height: auto;
text-align: center;
/* border-radius: 50%; */
}
#patrons a {
font-weight: 550;
font-size: 18px;
text-align: justify;
text-decoration: none;
color: aqua;
}
#patrons .box p {
font-family: Georgia, sans-serif;
font-weight: 550;
font-size: 18px;
text-align: center;
}
.events {
display: grid;
grid-template-columns: 1fr ;
}
}
<section id="patron_div" class="section section-dark">
<h1 class="title_patron">PATRONS</h1>
<section id="patrons">
<div class="container">
<div class="box" id="box1">
<img src="./img/principal.png">
<h3>PATRON</h3>
<p> Dr.Shashi Dharan<br> Principal, Ammini College of Engineering</p>
</div>
<div class="box" id="box2">
<img src="./img/madhu.png">
<h3>CHIEF PATRON</h3>
<p>Mr. K G Madhu<br> Chairman, Ammini College of Engineering</p>
</div>
<div class="box" id="box3">
<img src="./img/hod.png">
<h3>FEST CO-ORDINATOR</h3>
<p>Mr. Pradeesh A.R<br> Head of Department, Mechanical Engineering</p>
</div>
</div>
</section>
</section>

I got the Answer After a long Search.
The problem is I have set the media query to MAX-DEVICE-WIDTH rather than targeting the size of window which is MAX-WIDTH.

How to make top line shorter than bottom line (within div)

I have an unordered list which contains 3 list items (represented in my example as 3 green boxes). Each box has an image and 3 divs (title,location,price). I'm only concerned with each box's title div.
If the title is long enough so that it produces 2 lines, I want the top line to always be shorter than the bottom line. My demo site seen here shows boxes 1 & 2 with the wrong setup, and box #3 shows the correct setup.
I'm having trouble... this may require js to determine line length and then set the bottom line to be longer. Screen resolution will likely play a role but can't I make the lines consistent across different screen sizes?
Here is one of the list items, I'm interested in the div "titlebox":
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is longer than this line</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</li>
Any help is great, thanks!!
Screenshot attached too:

Here is a JS solution that might work for you in most instances (I say most instances because text characters can have varying widths). It basically splits your sentences into 2 lines with a dynamically inserted <br> tag. Comments in the code:
$(".titlebox").each(function(){
var len = $(this).text().length,
words = $(this).text().split(" "),
line1 = [],
line2 = [],
html = "";
// iterate through each word in the title
$.each(words, function(i,word){
// if line 1's current length plus the length of this word
// is less than half the total characters, add word to line 1
// else add to line 2
// (check index of word to maintain order)
if((line1.join(" ")+" "+word).length < (len/2) && (i == line1.length)){
line1.push(word);
} else {
line2.push(word);
}
});
// concatenate the results with a '<br>' separating the lines
html = line1.join(" ")+"<br>"+line2.join(" ");
// replace the .titlebox content with this new html string
$(this).html(html);
});

html
{
width: 100%;
height: 40%;
}
body
{
background-color: #FFFFFF;
overflow-y: scroll;
overflow-x: hidden;
}
/* JavaScript disabled */
html.no-js .list__item
{
width: 100%;
float: none;
}
html.no-js .list__item img
{
max-width: 9.375rem; /* 150 */
float: right;
margin-left: 1.25rem; /* 20 */
}
#supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 25%;
float: left;
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
nav {
border: 1px solid #ccc;
border-right: none;
border-left-color: #006600;
width: 100%;
margin-bottom: 20px;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #030303;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background: #9cb369;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul li {
flex-grow: 1;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
.whywelove img{
margin-top: 1%;
height: auto;
width: 50%;
}
.font3 {
margin-top: 2%;
color: #030;
font-family: "Times New Roman", Times;
font-size: 8vh;
}
.font4 {
font-size: 3.5vh;
font-weight: bolder;
font-family: "Times New Roman", Times;
color: #002B00;
line-height:25px;
margin-top: -0.5%;
margin-bottom: 2%
}
.vignette {
width: 90%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
}
.vignette2 {
width: 800px;
margin-top:3%;
margin-left:auto;
margin-right:auto;
box-shadow: 75px 75px 50px #defeec inset,-75px -75px 50px #FFFF inset;
height: 600px;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
width: 100%;
max-width: 76rem;
font-size: 0.875rem; /* 14 */
line-height: 1.375rem; /* 22 */
margin: 0 auto;
padding: 0.625rem; /* 10 */
}
.container,
.container a
{
color: #cfd7db;
}
.container a:hover
{
color: #fff;
}
h1
{
font-size: 2.5rem; /* 40 */
font-weight: 300;
line-height: 2.875rem; /* 46 */
text-align: center;
margin-bottom: 2.5rem; /* 40 */
}
a.divLink {
text-decoration: none;
}
.list
{
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list__item
{
width: 32%;
float: left; /* 10 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 0.625em;
padding-bottom: 0.825em;
margin-left:1%;
margin-right:0%;
position:relative;
line-height:40px;
}
.list__item .caption {
position: absolute;
width: 20%;
height: 10%;
top: 30%;
left: 32%;
font-size: 3.3em;
font-weight:bold;
color: red;
}
.list__item__inner
{
width: 100%;
color: #474d51;
background-color: #DEFEEC;
border: 1px groove #F8F8F8;
overflow: hidden;
margin-left:2%;
margin-right:2%;
-webkit-box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */
box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */
}
.list__item figcaption
{
padding: 1.25rem; /* 20 */
}
.img-shadow {
position: relative;
max-width: 100%;
float: left;
}
.img-shadow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 80px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 80px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 80px rgba(0,0,0,.6);
}
.img-shadow img {
float: left;
}
.titlebox{
width: 80%;
height: 10%;
display: inline-block;
font-size: 4.2vh;
font-family: Garamond;
color: #002000;
text-align: center;
line-height: 35px;
font-weight:bold;
margin-top: 5%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
background-color:grey;
}
.locationbox{
width: 80%;
display: inline-block;
font-size: 3.7vh;
text-align: center;
font-weight:bold;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
font-family: Garamond;
color: #002000;
font-style: italic;
}
.pricebox{
width: 80%;
font-size: 4.2vh;
text-align: center;
font-family: Garamond;
font-weight:bold;
color: #002000;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
}
.footer
{
text-align: center;
margin: 2.5rem 0.625rem 0; /* 40 10 */
}
.footer a
{
border-bottom: 1px solid #cfd7db;
}
#media screen and (max-width: 1950px){
.list__item
{
width: 32%;
}
.container
{
padding: 0; /* 10 */
}
.titlebox{font-size:28px;}
.locationbox{font-size:28px;}
.pricebox{font-size:28px;}
}
#media screen and (max-width: 1700px){
.list__item
{
width: 32%;
}
.vignette {
width: 92%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
padding: -10em; /* 10 */
}
.titlebox{font-size:27px;}
.locationbox{font-size:27px;}
.pricebox{font-size:27px;}
}
#media screen and (max-width: 1440px){
.list__item
{
width: 32%;
}
.container
{
padding: 2.2em /* 10 */
}
.titlebox{font-size:27px;}
.locationbox{font-size:27px;}
.pricebox{font-size:27px;}
nav {
border: 1px solid #ccc;
border-right: none;
border-left-color: #006600;
width: 100%;
margin-bottom: 20px;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #030303;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background: #9cb369;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul li {
flex-grow: 1;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
}
#media screen and (max-width: 64em ) /* 1024 */
{
.list__item
{
margin-right:2%;
margin-left:-1%;
}
.titlebox{font-size:24px;}
.locationbox{font-size:24px;}
.pricebox{font-size:24px;}
.list__item .caption {
font-size: 2em;
}
body
{
padding: 2.5rem 0; /* 40 */
}
.list__item
{
width: 30%; /* 1 item per row */
float: none;
}
#supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 30%;
}
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
#media screen and ( max-width: 50em ) /* 800 */
{
.vignette {
height: 400px;
}
.titlebox{font-size:23px;}
.locationbox{font-size:23px;}
.pricebox{font-size:23px;}
.list__item
{
width: 70%; /* 1 items per row */
}
}
#media screen and ( max-width: 40em ) /* 640 */
{
.vignette {
width: 80%
height: 300px;
}
.titlebox{font-size:21px;line-height:25px;}
.locationbox{font-size:21px;}
.pricebox{font-size:21px;line-height:25px;}
.list__item
{
width: 70%;/* 1 items per row */
}
}
<div class="container" role="main">
<ul class="list">
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is <BR/> shorter than this :)</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/c/ce/James_Wadsworth_Rossetter_House_Front_1.jpg)"></p>
<div class="titlebox">Thisssss Lineeeeee is longer too</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.mytickerz.com/wp-content/uploads/prairie-style-house-plans-2.jpg)"></p>
<div class="titlebox">This line is shorter likeeeeeeeee it should be</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
</ul>
</div>
I'm not really sure if there is any way to limit the top line width. The only way I can think of, is to add a <br/> tag in a place where you would like to break down the title and then just set the text-align: center; for the .titlebox.
<div class="titlebox">This line is <br/> longer than this line</div>

Categories

Resources