For this site, the footer area jumped up the page http://lainjurylaw.wpengine.com/. It's supposed to look like this: https://sandiegolawcenter.net/. All I did was change the hero image and the footer now moved up to right underneath top area.
I tried doing a clear:both, but that didn't help.
HTML:
<div id="full-width-footer">
<div class="container">
<div class="footer">
<div class="footer-left">
<div itemtype="http://schema.org/Attorney" itemscope="">
<span class="ozols" itemprop="name">San Diego Criminal Law Center</span>
<div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
<span itemprop="streetAddress">1230 Columbia Street Suite 565A</span><br/>
<span itemprop="addressLocality">San Diego</span>
,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">92101</span>
</div>
<span itemprop="telephone">(619) 525-7006</span>
</div>
Los Angeles Accident Law Center © 2017. All Rights Reserved.
</div>
<div class="footer-right">
CSS:
#full-width-footer {
border-top: 6px solid #248bbe;
padding-bottom: 120px;
background: #2a2a2a none repeat scroll 0 0;
}
The problem is you've not cleared the columns div, your current code:
<div class="columns">
<div class="content">
... your content ...
</div>
<div class="sidebar">
... your content ...
</div>
</div>
just add <div style="clear:both"></div> after the sidebar div and it works fine:
<div class="columns">
<div class="content">
... your content ...
</div>
<div class="sidebar">
... your content ...
</div>
<div style="clear:both"></div>
</div>
Fix your fotter at the bottom of the page.
#full-width-footer {
border-top: 6px solid #248bbe;
padding-bottom: 120px;
background: #2a2a2a none repeat scroll 0 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<div id="full-width-footer">
<div class="container">
<div class="footer">
<div class="footer-left">
<div itemtype="http://schema.org/Attorney" itemscope="">
<span class="ozols" itemprop="name">San Diego Criminal Law Center</span>
<div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
<span itemprop="streetAddress">1230 Columbia Street Suite 565A</span><br/>
<span itemprop="addressLocality">San Diego</span>
,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">92101</span>
</div>
<span itemprop="telephone">(619) 525-7006</span>
</div>
Los Angeles Accident Law Center © 2017. All Rights Reserved.
</div>
<div class="footer-right">
Related
In this CodePen, I am trying to get the .icon div to appear the full height of the div it's in. Unfortunately, it looks like it's loading before the text is there so the div has a height of 0 when it loads. How would I get it to load once the text is there and grab that full height? Preferably with no JS if possible.
All help is appreciated!
HTML
.faqSection {
height: 600px;
width: 100vw;
}
.topFaqSection {
margin: 100px 0 40px 10vw;
}
.innerFaqSection {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.leftFaq {
width: 35%;
height: 100%;
/* background-color: violet; */
}
.rightFaq {
width: 35%;
height: 100%;
/* background-color: blanchedalmond; */
}
.singleFaqBlock {
margin: 20px 0 0 0;
}
.questionBlock {
background-color: red;
display: flex;
flex-direction: row;
align-content: flex-start;
}
.icon {
background-color: blue;
width: 50px;
height: 100%;
}
.questionText {
/* display: none; */
background-color: green;
width: 100%;
}
.answerBlock {}
.answerBlock p {
margin: 0 0 0 62px;
}
.hiddenText {
display: none;
}
.notHiddenText {
display: block;
}
<div class="faqSection">
<div class="topFaqSection">
<h1>Questions? Look Here</h1>
<div class="bar blue"></div>
</div>
<div class="innerFaqSection">
<div class="leftFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
How do I earn a return?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
What kind of returns can I expect?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
<div class="space"></div>
<div class="rightFaq">
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
When is the platform releasing?
</h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
Why invest in real estate? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
<div class="singleFaqBlock">
<div class="questionBlock">
<div class="icon">
<div class="circle-plus closed">
<div class="circle">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
</div>
<div class="questionText">
<h3>
I'm a - and interested in raising money through -, what should I do? </h3>
</div>
</div>
<div class="answerBlock">
<p class="hiddenText">
Yes! We would love to answer your question thank you for giving us the opoportunity!!
</p>
</div>
</div>
</div>
</div>
</div>
As I said in a a comment, removing the height: 100% rule should fix it for you. The "why" for it is a bit... unsavory.
Flex children default to "align-self: stretch", so they'll stretch naturally. But when you set a height, it will use that value. The problem is percentage height is calculated from the height actually specified for the parent and .icon's parent (.questionBlock) has no height specified: so .icon gets 100% of 0. If you were to set a height to .questionBlock, .icon would adapt.
From the specs:
The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'.
This is the comment that pointed me into the right direction. Maybe check it out?
I'm new to web development, but hoping someone has a quick answer.
Having troubles with this: https://codepen.io/kktotheing/pen/gewXor
I can't seem to get the "data-index" (2-5) to stay in it's container. If you click on each box you'll see the content breaking.
I feel like this is something pretty simple, but can't figure it out!
Thoughts?
<section id="timeline">
<div class="content js-content" data-index="1">
<div class="article">
<img class="tmln-img left" src="img/after-party.png">
</div>
<div class="article middle">
<h2>Group Activity (optional)</h2>
<h3>
If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot.
</h3>
</div>
<div class="article right">
<p>Nature’s Adventures<br>
Friday<br>
September 14th<br>
11:00 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="2">
<div class="article">
<img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
</div>
<div class="article">
<h2>Welcome Party</h2>
<h3>
Join us on James Island to ring in the weekend.
</h3>
</div>
<div class="article">
<p>Ellis Creek Fish Camp<br>
Friday<br>
September 14th<br>
6:30 PM – 9:30 PM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="3">
<div class="article">
<img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
</div>
<div class="article">
<h2>Welcome Drinks</h2>
<h3>
For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
</h3>
</div>
<div class="article">
<p>East Bay Biergarten<br>
Friday<br>
September 14th<br>
9:30 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="4">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>Ceremony & Reception</h2>
<h3>
Transportation will be provided.
</h3>
</div>
<div class="article">
<p>Middleton Place<br>
Saturday<br>
September 15th<br>
5:00 PM<br><br>
view on map
</p>
</div>
</div>
<div class="content js-content" data-index="5">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>After Party (optional)</h2>
<h3>
For those who want to keep the party going.
</h3>
</div>
<div class="article">
<p>Uptown Social<br>
Saturday<br>
September 15th<br>
11:30 PM<br><br>
view on map
</p>
</div>
</div>
<div class="selector">
Group Activity<br>(optional)
Welcome Party
Welcome Drinks
Ceremony &<br> Reception
After Party<br>(optional)
</div>
If you want your content to have a fixed height, in addition to setting height:300px as you've done, use overflow-y:scroll
To have display:flex on every js-content, in your jQ instead of .show use .css('display','flex') . show() is essentially giving the element the style of display:block. That's why you need to give it a specific display using css()
$content.hide().filter('[data-index="' + index + '"]').css('display','flex');
var $buttons = $('.js-button');
var $content = $('.js-content');
var doContent = function(e) {
e.preventDefault();
var $this = $(e.target);
var index = $this.data('index');
$content.hide().filter('[data-index="' + index + '"]').css('display','flex');
$buttons.removeClass('js-active');
$this.addClass('js-active');
};
$buttons.on('click', doContent);
#timeline {
margin: 0 auto;
width: 70%;
border: 3px solid black;
}
.content {
margin: 0 auto;
display: none;
height: 300px;
background-color: #ffffff;
border: 1px solid #ccc;
overflow-y:scroll;/* added */
}
.content[data-index="1"] {
display: flex;
}
.content[data-index="2"],
.content[data-index="3"],
.content[data-index="4"],
.content[data-index="5"] {
display: none;
}
.article {
border: 2px dashed blue;
padding: 20px;
}
/*.left {
width: 25%;
}*/
.middle {
width: 60%;
}
.right {
width: 25%;
}
.tmln-img {
max-width: 150px;
}
a.tmln-button {
border: 1px solid green;
color: #151515;
padding: 20px;
text-align: center;
text-decoration: none;
}
a.tmln-button.js-active {
text-decoration: none;
background-color: black;
color: white;
}
.selector {
display: flex;
justify-content: space-between;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="timeline">
<div class="content js-content" data-index="1">
<div class="article">
<img class="tmln-img left" src="img/after-party.png">
</div>
<div class="article middle">
<h2>Group Activity (optional)</h2>
<h3>
If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot.
</h3>
</div>
<div class="article right">
<p>Nature’s Adventures<br>
Friday<br>
September 14th<br>
11:00 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="2">
<div class="article">
<img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
</div>
<div class="article">
<h2>Welcome Party</h2>
<h3>
Join us on James Island to ring in the weekend.
</h3>
</div>
<div class="article">
<p>Ellis Creek Fish Camp<br>
Friday<br>
September 14th<br>
6:30 PM – 9:30 PM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="3">
<div class="article">
<img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
</div>
<div class="article">
<h2>Welcome Drinks</h2>
<h3>
For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
</h3>
</div>
<div class="article">
<p>East Bay Biergarten<br>
Friday<br>
September 14th<br>
9:30 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="4">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>Ceremony & Reception</h2>
<h3>
Transportation will be provided.
</h3>
</div>
<div class="article">
<p>Middleton Place<br>
Saturday<br>
September 15th<br>
5:00 PM<br><br>
view on map
</p>
</div>
</div>
<div class="content js-content" data-index="5">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>After Party (optional)</h2>
<h3>
For those who want to keep the party going.
</h3>
</div>
<div class="article">
<p>Uptown Social<br>
Saturday<br>
September 15th<br>
11:30 PM<br><br>
view on map
</p>
</div>
</div>
<div class="selector">
Group Activity<br>(optional)
Welcome Party
Welcome Drinks
Ceremony &<br> Reception
After Party<br>(optional)
</div>
</section>
I am trying to print the contents of a modal but its showing big gaps in the print preview and things that should be hidden.
Despite adding hidden to particular things they still show up in the preview.
There is also a hidden div to prevent swiping on the map when scrolling which is why i thing th first page of the preview looks blank.
#media print {
#overlay, #close-modal-button, #print-button * {
visibility: hidden;
display: none !important;
}
#map-modal * {
visibility: visible;
}
#map-modal, #map-modal {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
overflow: visible!important;
display: block;
}
}
<div id="map-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: true}]" [materializeActions]="modalActions">
<div id="map-modal-content" class="modal-content">
<h4 id="modal-title">Map of the area and directions</h4>
<div class="container center">
<div class="row">
<div id="overlay" class="overlay" onClick="style.pointerEvents='none'">
</div>
<div class="center">
<iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1T1AFckKqP4J38fIJswg8uEr42hyB3R5y&ll=51.06791175093598%2C0.21307320000005348&z=11" allowfullscreen></iframe>
</div>
</div>
<hr>
<p id="modal-text"><b>St Dunstan’s Church, Mayfield TN20 6AB</b><br>Mayfield village is signposted on the A267 and the church is situated in the middle of the village on the High Street.</p>
<div class="row">
<div class="container center">
<div class="col s12">
<img id="map-image" class="center materialboxed" src="./assets/Map1.png">
</div>
</div>
</div>
<p id="modal-text">The car park is sign posted on the right-hand side of the High Street as you are driving up the hill. The easiest way to get to the church from the car park is to walk through the car park for The Middle House as seen on the map. The marked car park in Mayfield is free.</p>
<hr>
<p id="modal-text">The drive from St Dunstan’s Church to the reception at Juddwood Farm is approximately 30 minutes.</p>
<p id="modal-text"><b>Juddwood Farm, Haysden Lane, Tonbridge TN11 8AB </b></p>
<div class="row">
<div class="overlay" onClick="style.pointerEvents='none'">
</div>
<iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll=51.096412867708054%2C0.240690000000086&z=11" allowfullscreen></iframe>
</div>
<div class="row">
<div class="container center">
<div class="col s12">
<img id="map-image" class="materialboxed" src="./assets/Map2.png">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container center">
<a id="print-button" onClick="window.print()" class="black waves-effect waves-light btn z-depth-3" href=""><i class="material-icons right">print</i>Print this page</a>
</div>
</div>
<div class="modal-footer transparent">
<a id="close-modal-button" class="right transparent btn-flat" (click)="closeModal()">Close</a>
</div>
</div>
I've googled around a fair amount but cant see why. Here is a gif of the print preview https://imgur.com/a/Hnfcr
It looks like your declaration #print-button * is looking for a child of #print-button, rather than #print-button itself.
Also, it's unclear why you have duplicated #map-modal, #map-modal { ... Did you intend to select #map-text ?
I got a couple of divs that load content in them, but every content is different, and the read more link at the bottom is pushed along with the content.
How can I get the link to stick to the bottom of the div?
Example:
The html code of one box:
<div class="vertical-item gallery-extended-item with_background text-center" style="height: 330px;">
<div class="item-media">
<div class="media-links">
<a class="abs-link" title="" href="nieuwsbericht-5.html"></a>
</div>
</div>
<div class="item-content">
<h3 class="item-title">
Project test
</h3>
<span class="categories-links">
<a rel="category" href="#" class="theme_button small_button color1">Nieuws</a>
</span>
<br>
<p>Project test opgeleverd - februari 2016</p>
<p>
Lees verder
</p>
</div>
</div>
Use absolute position on the link, he will stay at the same place every time, no matter how long the text above is.
See it here
.bottom { position: absolute; bottom : 100px; left: 0; right: 0; }
Try position:absolute, along with bottom, this will place the element from bottom 20px up.
Below is the updated code <a class="sbottom" href="nieuwsbericht-5.html">Lees verder</a>.
.sbottom {
position: absolute;
bottom: 20px;
}
<div class="vertical-item gallery-extended-item with_background text-center" style="height: 330px;">
<div class="item-media">
<div class="media-links">
<a class="abs-link" title="" href="nieuwsbericht-5.html"></a>
</div>
</div>
<div class="item-content">
<h3 class="item-title">
Project test
</h3>
<span class="categories-links">
<a rel="category" href="#" class="theme_button small_button color1">Nieuws</a>
</span>
<br>
<p>Project test opgeleverd - februari 2016</p>
<p>
<a class="sbottom" href="nieuwsbericht-5.html">Lees verder</a>
</p>
</div>
</div>
Floating left 'li' not working in ipod, android devices. But it works perfect in all major broswers in laptop / destops. Code is here:
<ul class="clsvideos clearfix">
<li>
<div class="home-thumb">
<div class="home-play-container">
<div class="play-button-hover">
<div class="movie-entry yt-uix-hovercard">
<div class="tooltip">
<img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/pF6Yq7DrJKA/1.jpg" border="0" width="140" height="83" title="">
<div class="Tooltipwindow clearfix">
<img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
<div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Education & Travel</span></div>
<span class="clsdescription">Description : </span><p>Abdul Basit reciting Surah Infitar - amazing tajweed! mash'Allah!</p><div class="clearfix"> <span class="clstoolleft">Rating : </span> <div class="clstoolright ratingvalue ratethis1 fivepos1"></div>
<div class="clearfix"><span class="clstoolleft"> Views:</span> <span class="clstoolright">58 </span></div>
</div>
</div>
</div>
</div>
</div>
<div class="show-title-container">
Abdul Basit reciting Surah Infitar
</div>
<span class="video-info"> Education & Travel </span>
<div class="video-info clearfix">
<div class="clsratingvalue"><span class="ratethis1 fivepos1 "></span></div>
<div class="clsvideosviews">58 Views</div>
</div>
</div>
</div></li>
<li>
<div class="home-thumb">
<div class="home-play-container">
<div class="play-button-hover">
<div class="movie-entry yt-uix-hovercard">
<div class="tooltip">
<img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/IYMKQKSV0bY/1.jpg" border="0" width="140" height="83" title="">
<div class="Tooltipwindow clearfix">
<img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
<div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Sports & Gaming</span></div>
<span class="clsdescription">Description : </span><p>How the Bible Led Me to Islam: The Story of a Former Christian Youth Minister - Joshua Evans</p><div class="clearfix"> <span class="clstoolleft">Rating : </span> <div class="clstoolright ratingvalue ratethis1 fourpos1"></div>
<div class="clearfix"><span class="clstoolleft"> Views:</span> <span class="clstoolright">41 </span></div>
</div>
</div>
</div>
</div>
</div>
<div class="show-title-container">
How the Bible Led Me to Islam: The ...
</div>
<span class="video-info"> Sports & Gaming </span>
<div class="video-info clearfix">
<div class="clsratingvalue"><span class="ratethis1 fourpos1 "></span></div>
<div class="clsvideosviews">41 Views</div>
</div>
</div>
</div></li>
Corresponding CSS is:
.clsvideos li:first-child {
width: 140px;
float: left;
padding: 14px 10px 0 0;
display: block;
}
.clsvideos li {
height: 155px;
width: 140px;
padding: 14px 10px 0 9px;
border-right: 1px dotted #CFCFCF;
border-bottom: 1px dotted #CFCFCF;
float: left;
}
Live URL: http://video.muslimbackyard.com/
Note: Open the site in a smartphone and destop. Note the disign issues at Popular Videos, Recent Videos section. You will know where the problem exists.
Awaiting for a solution at the earliest
Actually the problem was, the developer hadn't closed the last 'div' inside 'li' which led to this bug...
"So be careful with front-end code while writing core php". This is what the advise I have to my developer.