I created a website using CSS and Bootstrap. I structured it to be pretty simple and I created some custom container layouts.
To create this I website I used z-index in different places, for the background and for the container. In order to create a hierarchy.
However the rendering of the container doesn't seem to follow the assigned z-index. When I scroll to the bottom of the page and stay there for a while (move mouse randomly etc.) and I scroll back up, the main container of the page disappears.
This is the container css:
.show-portfolio .container {
z-index: 5;
background-color: var(--blog-container-color);
margin: 0 auto;
margin-bottom: 0rem;
padding: 2rem 1rem;
position: relative;
/* border-radius: 20px; */
box-shadow: 0 0 1px rgba(var(--blog-shadow-color), 0.175),
0 0 40px rgba(var(--blog-shadow-color), 0.55),
inset 0 0 6px rgba(var(--blog-shadow-color), 0.9);
border: 5px solid var(--secondary-color);
border-top: 30px solid var(--background-color);
}
And this is the background:
.bg-img-repeat {
background-image: url("/img/background_pattern.jpg");
background-repeat: repeat;
background-size: 35px;
z-index: 0;
position:fixed;
width: 100%;
height: 100%;
}
And this is the container html:
<div class="showcase-image-top mt-5 pt-1">
<div class="title-text text-uppercase"> what is <br> kneehat games </div>
</div>
<section class="show-portfolio justify-content-center align-items-center">
<div class="container">
<div class="para">
Hi, <span class="strong"> my name is Nihat</span>, I'm a Computer Scientist and I develop games for fun.
I use <span class="strong"> Kneehat Games </span> as a platform to publish games for iOS and Android and eventually also other stores.
Thanks for visiting my page and I hope you like the games.
<section>
<div class="row justify-content-center align-items-center mt-3">
<div class="col-12 col-sm-10">
<div class="thanks-email-card thanks-email-font text-center mb-4 align-items-center d-flex justify-content-center">
<i class="fas fa-envelope"></i> kneehatgames#gmail.com
</div>
</div>
</div>
</section>
<div class="footnote"> <i class="fas fa-question-circle"></i> Why Kneehat? I came up with this name because it pronounces almost like my name and it is a combination
of two english words: knee and hat.</div>
</div>
</div>
</section>
As we can see in the image below, the container is actually still placed in the same spot but not rendered anymore. This makes me wonder why the container disappears even if the index is still the same.
The container comes back up if I resize the window or deselect any property in the css class.
The website is: kneehatgames
Here is an image showing the problem
Related
I am currently running into an issue with my HTML/CSS (Bootstrap 5.0) code. I am trying to implement a Pinterest style Masonry card gallery using the Bootstrap 5.0 grid system and the Masonry library. The issue I run into is that the content overflows past the background container height. The cards also seem to stack over each other until you resize the window.
Is there a better way to implement a Masonry layout with Bootstrap 5.0 or any issues you can see with my code that would cause this overflow height/stacking issue? Let me know if I can provide any more information or code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<title>Grayson Felt</title>
</head>
<div class="background-image">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid px-4">
<a class="navbar-brand" href="index.html">
<h2 style="color: var(--light-blue)">
<i class="bi bi-postage-heart"></i>
</h2>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="professional.html">Professional</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="whole px-5 p-3 my-3">
<div class ="px-5 p-3 my-3 justify-content-center container-fluid bg-white-trans">
<h1 class="text-center display-3">Gallery</h1>
<div class="container py-5">
<div class="row row-cols-1 row-cols-md-3 g-4" data-masonry='{"percentPosition": true }'>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
</html>
Non-Bootstrap CSS Properties
:root{
--light: #7C766A;
--dark: #4D473E;
--gray: #B8B8B8;
--white: #D9D9D9;
--black: #010400;
--purple: #594AF6;
--blue: #40B2B2;
--green: #AFB116;
--yellow: #D0A000;
--red: #A54738;
}
.background-image{
background-image: url('https://www.teahub.io/photos/full/17-179150_2560x1600-monet-desktop-wallpaper-monet-poppies.jpg');
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
a:link{ color:var(--blue); }
a:visited { color:var(--purple);}
header, .post{
-webkit-box-shadow: 0px 10px 0px 1px var(--dark); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 10px 0px 1px var(--dark); /* Firefox 3.5 - 3.6 */
box-shadow: 0px 10px 0px 1px var(--dark); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
background-color:var(--white);
border-radius: 10px;
padding:40px;
margin:40px;
}
.post-head p{
color:var(--dark);
font-size:15px;
padding-bottom:30px;
}
.post-head h3{
font-size:20px;
color:var(--dark);
}
.post img{
height:200px;
width: 200px;
margin:10px;
}
.sidenav {
-webkit-box-shadow: 0px 10px 0px 1px var(--dark); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 10px 0px 1px var(--dark); /* Firefox 3.5 - 3.6 */
box-shadow: 0px 10px 0px 1px var(--dark); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
border-radius: 10px;
height: 86%;
width: 20%;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: var(--white);
overflow-x: hidden;
padding-top: 20px;
padding-bottom: 20px;
margin:40px;
}
.sidenav p{
margin-left:40px;
}
#media screen and (max-width: 1650px) {
.sidenav{
display:none !important
}
header, .post{
width:75%
}
}
.highlight{
text-decoration:underline 2px;
text-decoration-color:var(--yellow);
}
.rainbow{
background: url(assets/rainbow.JPG) no-repeat center center fixed;
background-size: 100% 100%;
height:5px;
position:fixed;
left:0px;
bottom:0px;
width:100%;
}
/* this is needed to make the content scrollable on larger screens */
#media (min-width: 576px) {
.h-sm-100 {
height: 100%;
}
}
#media (max-width: 600px) {
.whole {
width:100%;
}
}
#media (min-width:600px) {
.whole {
width:90%;
align-content: center;
justify-content: center;
margin: auto;
}
}
Edit:
Here is an image of the overflow/stacking issue:
To just focus on the masonry layout (you have a couple of other height issues) - the issue is actually being caused by the <img> element in each of your cards. Instead of using an <img> maybe consider using a <div> with a background-image. This could cause some issues with the aspect ratio of the image but there is a nice hack for that using padding-top. Here's an example:
<div style='
background-image: url("https://picsum.photos/id/237/200/300");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 0;
padding-top: 150%'></div>
I am trying to display divs side by side on a page. However, if there is only one col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it's using only 50% even if there is only one col-md-6. Is there a way to do this using CSS?
Here is the my HTML and CSS:
<div class="col-md-6 textcontent">
</div>
<div class="col-md-6 service">
</div>
<div class="col-md-6 textcontent">
</div>
CSS
.col-md-6{
width50%;
}
Flexbox is the way to go here. Here is an example:
.wrap {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.item {
flex-grow: 1;
/* For display purposes */
padding: 1rem;
}
.pink {
background-color: pink;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.orange {
background-color: coral;
}
<section class="wrap">
<div class="item pink">
Content 1
</div>
<div class="item blue">
Content 2
</div>
<div class="item green">
Content 3
</div>
</section>
<section class="wrap">
<div class="item orange">
Content Solo
</div>
</section>
https://jsfiddle.net/willihyde/aqrs410u/1/
If you are using the bootstrap, You can use the col-md-12 class to add a full width column. bootstrap grid system is coming as a fraction system and your number will be divide by 12. So if we divide the 6 by 12 the answer is 0.5 and that means 50%. That's why it's adding a 50% width column. So when we add 12 it will divide by 12/12 and the width will be 100%. You can follow the Bootstrap grid system guideline to learn more about the various width ratios and how to make a responsive grid.
<div class="col-md-12 service"></div>
If you are trying to build this by yourself, Define another class with a name and add the width: 100%;
.col-md-12{
width:100%;
}
Then add that class name to your html class attribute
<div class="col-md-12 service"></div>
I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.
I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?
I'm trying to make my two buttons center like the one I do with h2 but failed.
Code:
html:
<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
<div><h2>Please choose one button</h2></div>
<div id="row" class="col-xs-12">
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div>
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div>
</div>
</div>
</div>
css:
#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;}
#kiosk_btn:active{outline: none; text-decoration: none;}
#kiosk_btn:focus{outline: none; text-decoration: none; }
#kiosk_btn:hover{text-decoration: none; background-color: #213140;}
h2{text-align: center;}
JSFIDDLE
To achieve this you could look into the CSS property transform. Which applies a 2D or 3D transformation to an element. This allows you to rotate, scale, move, skew, etc., elements.
In your case you would use transform: translate(X, Y) where X and Y should be replaced with either % values, pixels or em values
I've edited your fiddle to match give you a general idea of what to do to achieve this: fiddle
basically what you do is you add a class to your div surrounding your buttons, in this case .buttons
The buttons class:
.buttons {
-webkit-transform: translate(20%, 50%);
-moz-transform:translate(20%, 50%);
transform:translate(20%, 50%);
}
The edited HTML:
<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
<div><h2>Please choose one button</h2></div>
<div id="row" class="col-xs-12 buttons">
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 1</div>
<div id="kiosk_btn" class="btn btn-default col-xs-3" onclick="">Button 2</div>
</div>
</div>
</div>
Check the updated fiddle.
Add two empty div with col-xs-3. One above two button and one below which fill the width of col-xs-12.
Fiddle uses class for setting button CSS property instead of id
Side Note:
Make sure to use only one id for button or other element.
Use bootstrap inbuilt class text-center for center alignment of heading and for buttons try to use grid offset concept of bootstrap.
Check out the fiddle for your reference.
Your Code contains mulitple Errors:
wrong div nesting
don't use (bootstraps) row and col* on the same element
row is a class in bootstrap, not an id
use ids (#kiosk_btn) only once or make it a class
That put aside, this will get your desired result:
#kiosk_btn{font-size: 3vh; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vh; padding-top:2vh; color:white;}
#kiosk_btn:active{outline: none; text-decoration: none;}
#kiosk_btn:focus{outline: none; text-decoration: none; }
#kiosk_btn:hover{text-decoration: none; background-color: #213140;}
.col-xs-12 {text-align: center;}
<div class="container theme-showcase" role="main">
<div id="innermain" class="col-xs-12">
<div><h2>Please choose one button</h2></div>
<div id="row" class="col-xs-12">
<div id="kiosk_btn" class="btn btn-default" onclick="">Button 1</div>
<div id="kiosk_btn" class="btn btn-default" onclick="">Button 2</div>
</div>
</div>
</div>
Try using the form-inline and text-center classes on a form. It is sort of hacky, but works perfectly as long as the screen is 768px and above, otherwise it will degrade when needed. See a working fiddle here