0

I've included the JSFiddle below.You have to shrink the size to about 670px to see the issue. What I am trying to fix are the flexbox items at the bottom of the page where the footer says "call xxx-xxx-xxxx". It is hard to see because the background image isn't loaded on the JSFiddle, but when the screen shrinks, the text "to schedule a consultation" pushes into the white background. Initially I used the line height trick, making it equal to the container height, so it vertically centers my first line of text but pushes the second line 100px down off the footer. What I am going for is to make both lines of text center vertically together instead of 100px apart.

https://jsfiddle.net/4m7pysqb/

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>DLGTreecare - Home</title>
    <link rel="icon" href="images/favicon-16x16.png">
    <link rel="Stylesheet" href="DLGtreecare.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="dlg.js"></script>
    
  </head>
<body>
   
<div class="header">
   
 <div class="heroimagecontainer">
    <img class="heroimage" src="images/heroimage.jpg">
 </div>
 <div class="redbar">  
 </div>
 <div class="orangebar"> 
 </div>

</div>



<div class="wrapper">

<div class="logowrapperdiv">

 <div class="logoarea"> <p class="dlg">DLG    Tree Care </p> <img class="logo" src="images/logotransparent.png">  </div>
 <p class="undertree">Professional Tree Services</p>

</div>


<!-- https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview
https://drive.google.com/uc?export=view&id=1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy
 -->

 <div class= maincontent>
 
 <p class="intro">PROVIDING THE "518" WITH ALL YOUR TREE CARE NEEDS!</p>
 
  <iframe class="videointro" src="https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview" allow="autoplay"></iframe>
  
  <div>  </div>
  <div class="phonebar"> Call <a href="tel:5184079500"> 518-407-9500 </a> for a free estimate!</div>
  
  <div class="messagebuttontext"> Or message us on  
    <a class="messagebutton" href="https://m.me/DLGTreeCare">
        <span style=color:orange>Facebook!</span>
        <i class="fa fa-facebook-messenger fa-1x" aria-hidden="true"></i>
    </a></div>
   
   <div class="clearfix"></div>
   
  </div>
 

    <h2>Services</h2>
    <h6>(Click images to see "before and after")</h6>
 
 <div class="services">
 
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Removal</p><p class="servicedescription ">Removing dead or unwanted trees is sometimes a must, using the proper skills this can be done safely</p>
  <img class="toggleon" src = "images/beforeafter/treeremovalflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Trimming</p><p class="servicedescription ">Having your trees trimmed properly is important and can help maintain healthy future growth</p>
  <img class="toggleon" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Stump Grinding</p><p class="servicedescription">By grinding the stump of the tree we are able to totally remove the stump in order to grow grass or replant something new</p>
  <img class="toggleon" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Hedge Trimming</p><p class="servicedescription ">From big to small, we have the tools and expertise for all your needs</p>
  <img class="toggleon" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Fruit Tree Pruning</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
  <img class="toggleon" src = "images/beforeafter/fruittreeflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Wood & Brush Removal</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
  <img class="toggleon" src = "images/beforeafter/treeremovalflip300x400.png">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Lot Clearing</p><p class="servicedescription">We can turn any wooded lot into an open usable space for the building of Homes, Businesses, etc.</p>
  <img class="toggleon" src = "images/beforeafter/lotclearingflip300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Cabling & Bracing</p><p class="servicedescription">Large branches and/or weak crotches sometimes can split under their own weight, cabling can keep this from happening without damaging the tree</p>
  <img class="toggleon" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Storm Damage</p><p class="servicedescription">We're available 24/7 for any tree related emergencies</p>
  <img class="toggleon" src = "images/beforeafter/stormdamageflip_300x400.jpg">
  </div>
 
 </div>
 
<h2>See more of our work</h2>

<div class="gallery">
    
    <div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized95FB95IMG951628801998990.jpg"></div>
    <div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB95IMG951628860144118.jpg"></div>
    <div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB_IMG_1628860108712.jpg"></div>
    <div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210319_094919.jpg"></div>
    <div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210325_104241.jpg"></div>
    <div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210322_131140.jpg"></div>
    
</div>
 
<div class="flex-container">
<div class="flex-item">Serving the 518 area</div><div class="flex-item">Call <a href="tel:5184079500"> 518-407-9500 </a> to schedule a consultation.</div>
</div>

</div>


</body>
</html>

CSS

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
  /* base red */
  --base-red: 10;
  
  /* base yellow */
  --base-yellow: 60;
 
  /* base green */
  --base-green: 99;

  /*base blue*/
  --base-blue: 200; 
  
  /* colors */
  
  --brown-normal: hsla(17, 42%, 41%, 100%);
  --brown-normal: hsla(17, 42%, 41%, 100%);
  
  --red-light:  hsla(var(--base-red), 100%, 75%, 100%);
  --red-normal: hsla(var(--base-red), 100%, 45%, 100%);
  --red-darker: hsla(var(--base-red), 100%, 35%, 100%);
  
  --yellow-light:  hsla(var(--base-yellow), 50%, 75%, 100%);
  --yellow-normal: hsla(var(--base-yellow), 50%, 50%, 100%);
  --yellow-darker: hsla(var(--base-yellow), 50%, 35%, 100%);
  
  
  --green-light:  hsla(var(--base-green), 50%, 75%, 100%);
  --green-normal: hsla(var(--base-green), 50%, 50%, 100%);
  --green-darker: hsla(var(--base-green), 50%, 35%, 100%);
  
  --blue-light:  hsla(var(--base-blue), 50%, 75%, 100%);
  --blue-normal: hsla(var(--base-blue), 50%, 50%, 100%);
  --blue-darker: hsla(var(--base-blue), 50%, 35%, 100%);
}

@font-face {
  font-family: TreeHuggerMedium-lEqZ;
  src: url(TreeHuggerMedium-lEqZ.ttf);
}


body {
min-height: 100vh;
max-height: 195.625rem;
background-image: url("images/stump.jpg");
background-color: white;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: auto;
}


div.header {
min-width: 320px;
text-align: center;
height: 300px;
}

div.heroimagecontainer {
height: 210px;
width: inherit;
}

img.heroimage {
height: 100%;
width: 100%;
object-fit: cover;
}


div.redbar {
width: inherit;
background-color: var(--red-normal);
height: 20px;
}

div.orangebar {
width: inherit;
background-color: orange;
height: 70px;
}

div.logowrapperdiv {
min-width: 320px;
max-width: 1000px;
position: relative;
height: auto;
margin: auto;
top: -50px;
}

div.logoarea {
border-bottom-style: solid;
border-color: white;
border-width: 5px;
min-width: 320px;
max-width: 525px;
margin: auto;
height: 92px;
color: white;
position: relative;
}


img.logo {
max-width: 36.5%;
top: -188px;
display: block;
left: 17%;
position: relative;
overflow: visible;
z-index: 105;
object-fit: contain;
}

p.dlg {
font-family: Roboto Slab;
position: relative;
max-width: 525px;
min-width: 320px;
font-size: 3.9em;
font-weight: 500;
text-align: center;
white-space: pre;
top: 20px;
}


.undertree {
font-family: Roboto Slab;
font-weight: 500;
max-width: 525px;
color: white;
text-align: center;
height: 50px;
margin: auto;
margin-top: 0;
padding-bottom: 40px;
letter-spacing: 0.10em;
font-size: 2.16em;
position: relative;
top: 0px;
}

.wrapper {
margin: auto;
min-width: 320px;
max-width: 1000px;
background-image: linear-gradient(var(--brown-normal), orange);
padding-top: 50px;
border-radius: 0px 0px 5px 5px;
}

.maincontent {
min-width: 320px;
text-align: center;
height: auto;
color: white;
position: relative;
margin-bottom: 25px;
padding: 15px;
}



.intro {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
color: white;
text-align: center;
padding-bottom: 25px;
min-width: 300px;
max-width: 1000px;
}

.videointro {
min-width: 300px; 
min-height: 225px;
position: relative;
display: block;
border-style: solid;
border-width: 2px;
border-color: white;
border-radius: 5px;
margin: auto;
}

.phonebar { 
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
position: relative;
float: left;
min-width: 295px;
max-width: 550px;
margin: 25px 0px 0px 20px;
font-size: 1.7em;
border: 1px solid white;
padding: 5px;
border-radius: 15px;
}

.phonebar a {
color: orange;
text-decoration: none;
}


.messagebutton {
display: inline-block;
text-align: center;
color: orange;
position: relative;
margin: auto;
text-decoration: none;
}

 
.messagebuttontext {
min-width: 295px;
max-width: 550px;
color: white;
position: relative;
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
display: block;
float: right;
border: 1px solid white;
border-radius: 15px;
margin: 25px 20px 0px 0px;
padding: 5px;
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/*code for photo galley */

h2 {
    font-family: Roboto Slab;
    font-weight: 400;
    text-align: center;
    font-size: 5em;
    color: white;
    margin: 50px auto;
    position: relative;
}

h6 {
    font-size: 2em;
    font-family: Roboto Slab;
    font-weight: 400;
    text-align: center;
    color: white;
    position: relative;
    margin: 10px auto;
}

button {
    appearance: button;
    background-color: white;
    color: red;
    cursor: pointer;
    font-weight: 500;
    border-color: white;
    z-index: 101;
    top: 30px;
    left: 0px;
    position: relative;
    border-radius: 5px;
    height: 25px;
    width: 25px;
    margin: 0 auto;
    border-width: 1px;
    transition: transform .3s linear;
    
}

.buttonrotate {
     transform: rotate(90deg);
}

.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    width: auto;
    height: auto;
    margin: auto;   
}


.servicenode {
    position: relative;
    width: 300px;
    margin: auto;
    margin-bottom: 25px;
}

.servicenode img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 200px;
  object-fit: none;
  border: 1px solid red;
  border-radius: 8px;
  transition: 0.1s object-position ease;
  position: relative;
}


.servicetitle {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.4em;
vertical-align:top;
display:inline-block;   
color: white;
width: 100%;
position: relative;
text-align: center;
margin-bottom: 10px;
}

.servicedescription {
    font-family: Roboto Slab;
    font-weight: 400;
    font-size: 1.2em;
    color: white;
    z-index: 100;
    transition-property: opacity, border-radius; 
    transition-duration: .4s; 
    transition-timing-function: linear;
    opacity: 0;
    margin: auto;
    width: 298px;
    position: absolute;
    display: block;
    background: rgba(0,0,0, 0.6);
    left: 0;
    right: 0;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   pointer-events: none;

}

.servicedescriptionshow {
    position: absolute;
    display: block;
    width: 298px;
    left: 0;
    right: 0;
    border-radius: 8px 8px 0px 0px;
    text-align: center;
    opacity: 1;
}


.toggleon {
object-position: top;
cursor: pointer;
}

.toggleoff {
object-position: bottom;
cursor: pointer;
}


/* Gallery stuff */

.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, auto));
    width: auto;
    height: auto;
    margin: auto;   
}

.gallerynode {
    color: white;
    text-align: center;
    position: relative;
    margin: auto;
    border-width: 1px;
    border-style: solid;
    border-color: white;
    height: 490px;
}
.galleryimg {
    object-fit: cover;
    width: 490px;
    height: 490px;
}

/* footer stuff */

.footer {
    height: 5vh;
    width: 100%;
    background-color: white;
    position: relative;
    margin-top: 100px;
    bottom: 0;
    border-style: solid;
    border-color: red;
    border-width: 3px;
    border-radius: 0px 0px 5px 5px;
}


.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.flex-item {
  -ms-flex-preferred-size: 33%;
  flex-basis: 50%;
  background-color: orange;
  padding: 5px;
  height: 100px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
  line-height: 100px;
}

.flex-item a {
    color: white;
}
/* media queries */

@media screen and (max-width: 1000px) {
    
div.maincontent {
    height: auto;
    }
    
.messagebuttontext {
    float: none;
    margin: 20px auto;
    
    }
    
.phonebar {
    float: none;
    margin: 20px auto;
    }
    
.gallery {
    grid-template-columns: repeat(1, minmax(320px, auto));
}

.flex-item {
    font-size: 1em;
}

}

@media screen and (max-width: 545px) {

div.logoarea {
width: 420px;
}
 
p.dlg {
font-size: 3em;
top: 35px;
}

img.logo {
left: 17%;
top: -130px;
}

.undertree {
font-size: 1.6em;
}
 
}


@media screen and (max-width: 500px) {
    
.gallerynode {
    height: 320px;
}   
    
.galleryimg {
    object-fit: cover;
    width: 320px;
    height: 320px;
    margin: auto;
}
}

@media screen and (max-width: 485px)  {

div.logoarea {
    width: 320px;
}
    
img.logo {
    top: -86px;
    left: 16%
}   
    
p.dlg {
font-size: 2.6em;
top: 42px;
}       
    
}

@media screen and (max-width: 354px) {
p.dlg {
font-size: 2.6em;
top: 42px;
}   

  
.undertree {
font-size: 1.39em;
 }

img.logo {
top: -86px;
}

.maincontent {
    padding: 8px;
    
}

}

JS

$(document).ready(function(){
  
$(".servicenode > img").click(function(){
  $(this).toggleClass('toggleon toggleoff');  
 });
  
  
$(".mybutton").click(function() {
  $(this)
  .siblings(".servicedescription")
  .toggleClass('servicedescriptionshow');
  $(this).toggleClass('buttonrotate');
 });

});

Toph Hughes
  • 101
  • 1
  • 10

0 Answers0