Isotope gallery not always working properly - html

I am working on a isotope gallery, and sometimes its not working properly, i needed to refresh the page a few times because i made some changes to the front end, and i saw that the portfolio works different on each refresh.
EDIT: only does this on Chrome.
this is how it should work:
but sometimes it does things like this:
Here's the link to the website, and here is my isotope gallery code:
i left out a few items, since i found out it doesnt matter how much items i put in the gallery.
<!-- section works -->
<section id="section-works" class="section appear clearfix">
<div class="container">
<div class="row">
<nav id="filter" class="col-md-12 text-center">
<ul>
<li>Alles</li>
<li><a href="#" class="btn-theme btn-small" data-filter=".photo" >Foto's</a> </li>
<li>Video's </li>
</ul>
</nav>
<div class="col-md-12">
<div class="row">
<div class="portfolio-items isotopeWrapper clearfix" id="3">
<article class="col-md-4 isotopeItem photo">
<div class="portfolio-item">
<img src="img/portfolio/img1.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info">
<h5>Portfolio name</h5>
<i class="fa fa-expand fa-2x"></i>
</div>
</div>
</div>
</article>
<article class="col-md-4 isotopeItem video">
<div class="portfolio-item">
<img src="img/portfolio/img6.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info">
<h5>Portfolio name</h5>
<a class="fancybox" href="js/jwPlayer5/player.swf? file=http://localhost/plusbus/img/portfolio/videos/files/vid1.mp4" type="video/mp4" title="local video mp4"><i class="fa fa-expand fa-2x"></i></a>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>

Without code it is a bit of a guess. You are using isotope v1.56, not v2, you need to use Isoptope v1 imagesloaded info.
This is how you use it:
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
// options...
});
});
For isotope v2, you would need to load imagesloaded.js separately since it is not included as it is in v1.5

Related

How should I seperate this Footer from the Content?

So I was learning to make a web page using HTML and CSS only.. lss, I can't put the footer under the content somehow. I'm supposed to separate every block from the header, content, and footer. but the footer stays inside the content or is blended with the content.
<header>
<ul class="Tabbar">
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
<li>About</li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_beginner.jpeg" alt="Beginner Cardio" class="gambar1">
<a href="detailbeginnercardio.html">
<div class="desc">
<div class="text">Beginner Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Pullup_1.jpeg" alt="Pull up" class="gambar1">
<a href="detailpullup.html">
<div class="desc">
<div class="text">Pull Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_beginner.jpeg" alt="Beginner Yoga" class="gambar1">
<a href="detailyogabeginner.html">
<div class="desc">
<div class="text">Yoga for Beginners</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_intermediate.jpeg" alt="Intermediate Cardio" class="gambar1">
<a href="detailintercardio.html">
<div class="desc">
<div class="text">Intermediate Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>
I tried on putting it on a different block, and tried to give margins and padding but every time I resize the page the footer moved to the side of the content.
Maybe change the "content" to "main" or "article" or something else. "Content" is not recommended to use. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content

CSS div width issue in wide screens

I am developing a website using a bought template. Everything seems to be perfect. However, I have an issue with a section of the html code where it works fine in normal screen sizes but in extra wide screen size, the div size is reduced to a strip. The images below demonstrate this:
This is how the div is in normal screens
And when the screen is extra wide, for example in devices with more than 15" screen, this is how the div looks like:
My main challenge however is that I really don't know which property is controlling this from the css file. I tried inspecting the code from chrome and the most consistent property is the box-sizing property and the value is set to inherit. Let me share the html code for this section of the div for further clarity.
<section class="gray pt-5 pb-0">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="sec-heading mx-auto">
<h2>What People say About Us</h2>
<p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p>
</div>
</div>
</div>
<div class="row m-0">
<div class="owl-carousel" id="testimonials">
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_property.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Brian Inchedi</h5>
<span class="small-font">Real Estate Agent</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Irene Wambui</h5>
<span class="small-font">Happy Baby Day Care</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus, I received a customer instantly with a better offer than I wanted.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Teddy Kimani</h5>
<span class="small-font">Car Sales Person</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Margaret Wada</h5>
<span class="small-font">Recruiting Agent</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Kindly advise as I am not that good in frontend. The css file is too big to share the code here, but I can get snipets of the sections that are used by the html section. Thank you.
Edit: Adding CSS COde Snippet
So, I have copied the code to JSFiddle and here is the link:
Code snippets on JSFiddle
You can try to specify:
min-width: someValue
and the element won't be smaller than this value;

How can I make bg-header-top visible on mobile?

I'm using a template that uses and I used it to implement a multi-language select. Problem is: when i switch to mobile view the top-header disappears and only the navbar stays. Does anyone have an idea how i can keep the top-header? Template uses Bootstrap 3
<body>
<div class="box-layout">
<header class="header-style-1">
<div class="bg-header-top">
<div class="container">
<div class="row">
<div class="header-top">
<div class="row">
<div class="col-md-3">
<img src="../assets/images/index/logo.png" alt="logo" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="header-top-right pull-right">
<ul class="header-contact">
<li>
<i class="flaticon-vibrating-phone"></i>
<div class="h-adress-content">
<h6>Telefon</h6>
<p>XXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<i class="flaticon-placeholder"></i>
<div class="h-adress-content">
<h6>Adresse</h6>
<p>XXXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<div class="h-adress-content">
<p><img src="../assets/images/index/de.png"> DE</p>
<p><img src="../assets/images/index/pl.png"> PL</p>
</div>
<!-- .h-adress-content -->
</li> `

Blocks are floating on each other. Bootstrap

Good day. Tell me please. Taught django, and took the template html, css, js. There is used bootstrap. Few adapted it for myself. He worked on a 17 '' monitor. Actually, when the 21 'monitor began to look, the blocks ran over each other. Besides, on 15'6, through the phone everything is in order. Tried to attribute in addition to col-sm as col-lg - the result did not. Tell me, please, how can I solve this problem.
It should be - https://i.stack.imgur.com/usEMI.png
How it happened - https://i.stack.imgur.com/UvUfX.png
Right-sidebar code:
<div class="col-md-9 col-lg-9">
<div class="col-md-12 col-lg-12 page-body">
<div class="row">
<div class="sub-title">
<h2>Some Notes</h2>
<i class="icon-envelope"></i>
</div>
<div class="col-md-12 col-lg-12 content-page">
<div class="col-md-12 col-lg-12 blog-post">
<div class="post-title">
<h1>джанго код</h1>
</div>
<div class="post-info">
<span>джанго код / by джанго код</span>
</div>
<p style="word-break: break-all"> джанго код</p>
<span>Read More</span>
</div>
<div class="col-md-12 col-lg-12 text-center">
Load
<div id="post-end-message"></div>
</div>
</div>
</div>
Left-sidebar code:
<div id="main">
<!-- about(left sidebar) -->
<div class ="col-md-3 col-lg-3">
<div class="about-fixed">
<div class="my-pic">
<img src="{% static 'images/pic/av-pic.png' %}" alt="av-pic">
</div>
<div class="my-detail">
<div class="white-spacing">
<h1></h1>
<span>Learning Web Development</span>
</div>
<ul class="social-icon">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-vk"></i></li>
</ul>
</div>
P.S. Sorry for english.

Footer will not go to bottom, showing over content

https://jsfiddle.net/z4of8fvy/
I know my code is somewhat sloppy but I am still learning. I have run it through a validator to see if I had a missing but I didn't find one. Any help would be appreciated.
If there are any other things that you guys can point out I would appreciate that as well.
It keeps asking me for more details but I don't know what else I can say. I do know that at one point the footer was working with me keeping it position: sticky and bottom:0 but when I added more content that's when the problem appeared. That is when I tried to play with it a bit and probably ruined it even more.
<div id="topBar" class="container-fluid">
<div class="row">
<div id="logo" class="col-xs-6">
<a id="homelink" href="https://smithstreetmediagroup.com">
<h1>SMG <br> Studios </h1>
</a>
</div>
<div id= "menu" class = "col-xs-6">
<a class="topBar" href="mess.html"><h4>Me$$ aka M.T.M </h4></a>
<a class="topBar" href="services.html"><h4>Services </h4></a>
<a class="topBar" href="campaigns.html"><h4>Campaigns </h4></a>
<a class="topBar" href="jeybundy.html"><h4>Jey Bundy </h4></a>
<a class="topBar" href="store.html"><h4>Store </h4></a>
<a class="topBar" href="contact.html"><h4>Contact </h4></a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="studioHome" class = "col-xs-4 mainOne">
<h1> Studio Services </h1>
<h1 class="buttons"> Read More </h1>
</div>
<div id="jbHome" class = "col-xs-4 mainOne">
<h1> Jey Bundy </h1>
<h1 class="buttons"> Read More </h1>
</div>
<div id="mtmHome" class = "col-xs-4 mainOne">
<h1> Me$$ aka M.T.M </h1>
<h1 class="buttons"> Read More </h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 mainTwo">
<h1>Our Mission</h1>
<p>
Smith media groups consist of a team of polite professionals that provide high quality and affordable service. We consider our customers family so we take pride in making our customers feel as comfortable and satisfied as possible. We offer a vast variety of services such as photoshoots, music videos, parties, wedding videos/photos, real estate photos, music production & duplication, ect. If you have any questions give us a call or use our contact form and we will give you a call. Our Vison, Your Success</p>
</div>
<div class="col-xs-6 mainTwo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/5iSNm5c6dBs?rel=0" frameborder="0" ></iframe>
</div>
</div>
</div>
<div class="container">
<div class = "row">
<div class = "col-xs-12">
<div id="slideshow">
<div class="slideImg">
<img src="battleflyer.jpg" />
</div>
<div class="slideImg">
<img src="bluesmoke.jpg" />
</div>
<div class="slideImg">
<img src="streetview.jpg" />
</div>
<div class="slideImg">
<img src="trackboard.jpg" />
</div>
</div>
</div>
</div>
</div>
<footer>
<div class = "container-fluid">
<div class = "row" id="bottomBar">
<div class = "col-xs-4">
<i class="fa fa-facebook-official" aria-hidden="true"> Facebook</i>
<i class="fa fa-instagram" aria-hidden="true"> Instagram</i>
</div>
<div class = "col-xs-4">
</div>
<div id="designer" class = "col-xs-4">
<h6>Designed by Xavier Velez</h6>
</div>
</div>
</div>
</footer>
It's actually very simple these days. One line of code.
min-height: 100vh;
https://codepen.io/rhroyston/pen/gXXMmr