Got a loop going in a grid formation. 3 posts per row, per category. Using bootstrap to create the layout. At full width it's working and how intended, however it's not responsive. Any ideas what I got wrong here?
Full Width
https://www.dropbox.com/s/x77wxxp5gmtdrs9/Screenshot%202017-06-20%2017.28.31.png?dl=0
Reduced Width (not responsive)
https://www.dropbox.com/s/01baalrm3u1fybe/Screenshot%202017-06-20%2017.32.42.png?dl=0
Edited Outputted html and css (written in sass originally).
#blog-section {
padding: 53px 0
}
#blog-section h1,
#blog-section h2,
#blog-section h3,
#blog-section h4,
#blog-section h5,
#blog-section h6,
#blog-section a {
padding: 20px 0 10px 0;
-ms-word-wrap: break-word;
word-wrap: break-word
}
#blog-section h1 {
color: #72b466;
font-size: 30px;
line-height: 35px;
margin-bottom: 23px;
padding-bottom: 22px;
display: block;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
border-bottom: 2px solid #ddd
}
#blog-section h2 {
font-size: 22px;
text-align: center;
line-height: 28px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
margin-bottom: 12px
}
#blog-section h3 {
font-size: 28px;
text-align: center;
line-height: 28px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
margin-bottom: 12px
}
#blog-section .blog-image {
width: 300px;
height: auto
}
#blog-section p {
font-size: 14px;
font-weight: 500px
}
#blog-section .blog-image {
margin: 0 auto
}
#blog-section a {
color: inherit;
text-decoration: none !important
}
#blog-section .shortlink {
color: crimson
}
#blog-section .custom-border {
padding: 10px;
margin-bottom: 20px
}
#blog-section .btn-home {
padding: 20px;
margin-bottom: 20px;
border-radius: 5px
}
#blog-section .btn-list {
padding: 20px;
margin-bottom: 10px;
border-radius: 5px
}
#blog-section .row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
#blog-section .grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, 0.15);
height: 100%;
padding: 10px;
border: 2px solid gray
}
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="blog-section">
<div class="container my-container">
<div class="row row-eq-height">
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/certified-compostable-products/">
<h2>Certified Compostable Products</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image4" /></div>
</a>
<p>
<p> PLEASE NOTE: We ALWAYS recommend that businesses replace disposable products with reusable ones. Waste reduction is the best way to handle your waste, followed by recycling and composting. Is there a way for you to stop using straws
altogether, rather than looking for a compostable straw? Or coffee cup? Or plate? That’s the goal. […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2382" title="Certified Compostable Products">Read More</a></button>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/importance-of-signage/">
<h2>Importance of Signage</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image3" /></div>
</a>
<p>
<p>You may have read the title of this post and thought: “Everyone knows how to recycle, do I really need to put up signs?” Yes you do! It’s very, very important, and it’s the law!. Most people know, or think they know, the basics of recycling,
but when they are standing in front of three […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2372" title="Importance of Signage">Read More</a></button>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/nycs-commercial-recycling-laws/">
<h2>NYC’s Commercial Recycling Laws</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image1" /></div>
</a>
<p>
<p>NYC’s commercial recycling laws are hard to keep up with and key information is often difficult to find. Don’t stress! We’ll help you stay up to date and in compliance. The most recent official notice regarding commercial recycling rules
in NYC was released by the NYC Department of Sanitation on February 5, 2016. Link to […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2356" title="NYC’s Commercial Recycling Laws">Read More</a></button>
</span>
</div>
</div>
</div>
</div>
<!--/.row-->
<div class="clearfix"></div>
</div>
<!--/.container-->
</section>
</html>
Check your image container and your images, I think they're not responsive.
Your .blog-image class has a fixed width and the images within it should have width or max-width set to 100%.
EDIT
Also, if you are trying to use the Bootstrap class for image responsiveness, you should use the class .img-responsive in the img tag, not in its container. And the class name is .img-responsive and not image-responsive.
Have you added responsive meta tag in head section? If not, then add this tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> to head section of your html.
It turns out the problem was with the fixed height border.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
height: 100%;
padding: 10px;
border: 2px solid gray;
}
Instead will make a media query that removes the border on smaller screen sizes.
#media (min-width: 992px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, .15);
height: 100%;
padding: 10px;
border: 2px solid gray;
}
}
Related
I need to make a pdf page where 90% of height will be container div with background with image inside which will fill whole 100% of the container. But it seems it is not possible in mpdf. CSS and html is simple.
<html>
<head>
<style>
#page {
margin-top: 14px !important;
margin-bottom: 14px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
body {
font-family: Sans-Serif !important;
box-sizing: border-box;
}
.section-header {
height: 25px !important;
line-height: 25px !important;
font-size: 20px;
margin: 0 0 7px 0 !important;
padding: 0 !important;
text-align: center;
}
.screenshot-container {
width: 100%;
height: 80%;
max-height: 80% !important; // This does not work
background-color: #f4f7fc;
text-align: center;
line-height: 100%;
border: 1px solid red;
}
.screenshot-container img {
height: auto;
max-height: 80%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="info-container">
<h1>{$campaign['name']}</h1>
<div><b>Odkaz na detail kampane</b><br>
<div><b>Naplánovanie kampane: </b>{$campaign['date_start']->format('d.m.Y')} - {$campaign['date_stop']->format('d.m.Y')}</div>
<div><b>Dĺžka kampane:</b> {$campaign['day_diff']} dní</div>
<div><b>Počet lokalít:</b> {$campaign['location_count']}</div>
<div><b>Počet obrazoviek:</b> {$campaign['device_count']}</div>
<div><b>Počet prehratí:</b> {$campaign['impressions']}</div>
<h2>Celková suma</h2>
<div><b>Celkom bez DPH:</b> {$budget}{$currency}</div>
<div><b>Zľava {$discount_sales_percent}%:</b> {$discount}{$currency}</div>
<div><b>Cena po zľave bez DPH:</b> {$discount_price}{$currency}</div>
</div>
</div>
<pagebreak />
<div class="section-header"> </div>
<div class="screenshot-container">
<img src="var:screenshot" />
</div>
<pagebreak />
...
Here is the screenshot where you can see red border around the container which should be 80% height.
What is wrong with that? It looks like container ignores its max-height.
I am attempting to make a header for a page I'm designing for a university project.
I've been playing around with different bits of code, and the best that I can manage is 3 images, one below another. I cannot, for the life of me, see how I can make them next to each other, in a banner, that will then fit the length of the screen.
Header Code:
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="span4">
<img class="img-responsive" src="https://i.ibb.co/7vJj2z4/logo-small.png" alt="img">
</div>
</div>
<div class="col-md-4">
<div class="span4">
<img class="img-responsive" src="https://i.ibb.co/Mf8HmH7/Jedi-Mind-Reader-Logo-Small.png" alt="img">
</div>
</div>
<div class="col-md-4">
<div class="span4">
<img class="img-responsive" src="https://i.ibb.co/7vJj2z4/logo-small.png" alt="img">
</div>
</div>
</div>
</div>
</div>
</header>
Styling Code
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Orbitron, sans-serif;
}
.header, .footer {
overflow: hidden;
background-color: black;
}
.footer {
color: white;
}
.header {
color: yellow;
}
.header, .footer a {
float: left;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header, .footer a.logo {
font-size: 25px;
font-weight: bold;
}
.header, .footer a:hover {
background-color: black;
color: yellow;
}
.header, .footer a.active {
background-color: black;
color: black;
}
.header-right, .footer-right {
float: right;
}
#media screen and (max-width: 500px) {
.header, .footer a {
float: none;
display: block;
text-align: center;
}
.header-right, .footer-right {
float: none;
}
}
You're trying to apply styles to a class that doesn't exist. You can call just header {} but if you use .header {} then you need to change <header> => <header class="header">
The first two elements inside my flexbox container containing my posts from wordpress float around 10px higher than the rest. They all have the same css. I'm using PHP to get the posts from wordpress. Its only on the top row that it does this. As you can see from the photo the same template and post format is used lower on the page and it does not have this issue. Please help.
I have already tried commenting parts of the code like the read more button or the icons to see if maybe margins or padding inside the post container is doing it but its not. I've tried setting a height on the flexbox container to 930px the exact height to stop it floating - that hasnt worked. This is after setting no margins on the posts but that still hasn't worked - they were previously 5px.
This is the html template for each post inside the post loop that has the standard post format. Each post: standard and image follow the css with the 'standard' in the class names and the quote and video post format follow the classes with 'quote' in them.
<article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">
<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>
<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>
<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>
<div class=" grid-button" id="video-button">
<button><?php _e('Read More');?></button>
</div>
</div>
</header>
</article>
HERE IS THE POST FORMAT TEMPLATE FOR THE VIDEO AND QUOTE POSTS:
<article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">
<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>
<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>
<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>
<div class=" grid-button" id="video-button">
<button><?php _e('Read More');?></button>
</div>
</div>
</header>
</article>
HERE IS INDEX PAGE
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="grid-post-loop-container exhale-posts-container">
<div class="grid-whole-container">
<?php
if(have_posts() ):
echo '<div class="page-limit" data-page="/'. exhale_check_paged()
.'">';
while( have_posts() ): the_post();
get_template_part('template-parts/gridcontent', get_post_format()
);
endwhile;
echo '</div>';
endif;
?>
</div>
</div>
</main>
</div>
HERE IS THE CSS:
.grid-whole-container{
display: inline;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
}
.grid-standard-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
}
.grid-standard-post-container:hover {
}
.grid-standard-title-container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.grid-standard-title {
font-family: coolvetica;
text-transform: uppercase;
color: white;
text-align: center;
letter-spacing: 3px;
text-shadow: 2.5px 3px black;
font-size: 27px;
position: relative;
top: 80px;
}
.grid-standard-date-container {
width: 30%;
margin-left: auto;
margin-right: auto;
}
.grid-standard-date {
letter-spacing: 6px;
color: black;
font-family: coolvetica;
font-size: 13px;
text-align: center;
position: relative;
top: 60px;
}
.grid-button button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
position: relative;
top: 90px;
background: transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-family: coolvetica;
text-transform: uppercase;
color: white;
letter-spacing: 7px;
}
.grid-load-more {
margin-top: 100px;
}
/* INDEX GRID LAYOUT - QUOTE ======================================================================== ============================= */
.grid-quote-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
background-color: #aecfd7;
}
.grid-quote-icon-container {
color: white;
font-size: 60px;
text-align: center;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: -70px;
}
Expected that these divs would all act the same as they all have the same css but top row floats up. Please help.
This is what it looks like.The first two should not float up like that
Hi im working on a page wich allows my viewers on twitch to donate for my stream...
When a user clicks on paypal he gets redirected to paypal and if he clicks on visa it opens the popup
The problem i have now is that the donation ammount alway has the same opacity as the popup....
Popup screenshot
Did someone knows what the problem could be?
My index.php:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- META -->
<meta name="description" content="RyuZockt.at StreamDonations" />
<meta name="keywords" content="stream, livestream, ryuzockt, donation, spende, support" />
<meta name="author" content="RyuZockt">
<meta name="revisit-after" content="3 days" />
<title> RyuZockt.at Donations</title>
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet" type="text/css">
<!-- STYLE -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Font Awesome 4.1.0 -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Theme -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/popup.css" rel="stylesheet">
<!-- /STYLE -->
</head>
<body oncontextmenu="return false;" style="background-image: url(assets/img/bg.jpg);">
<!-- Modal PopUp-->
<div id="myModal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
<p><strong>Diese Zahlungsmethode ist momentan noch nicht verfügbar <img src="assets/img/sad.png"></strong></p>
</div>
</div>
<div class="col-md-12">
<div class="container-md">
<div class="panel cart panel-default">
<div class="panel-heading text-center">
<img class="avatar" src="assets/img/ryu.jpg">
<h1>RyuZockt</h1>
</div>
<div class="panel-body cart-form">
<form method="post" enctype="multipart/form-data" action="startDonation.php">
<!-- Name und Betrag -->
<div class="row">
<!-- Name -->
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Benutzername">
</div>
</div>
<!-- Betrag -->
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" name="betrag" required="required" class="form-control" placeholder="Betrag (frei wählbar)" value="5">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-eur fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<!-- /Name und Betrag -->
<!-- Nachricht -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="8" maxlength="50" type="text" name="msg" class="form-control" placeholder="Nachricht an RyuZockt (max. 50 Zeichen)"></textarea>
</div>
</div>
</div>
<!-- /Nachricht -->
<!-- Spacer -->
<div class="labelled-separator">
<div class="label-wrapper">
<label class="required"> Donaten mit</label>
</div>
</div>
<!-- /Spacer -->
<!-- Pay Buttons -->
<div class="row small-gap">
<!-- PayPal -->
<div class="col-md-6 col-xs-6 payment-mean payment-paypal">
<div class="form-group">
<button type="submit" style="width: 100%;" name="paypal" required="required" class="btn btn-default btn-bump btn-paypal" value="PAYPAL">PayPal</button>
</div>
</div>
<!-- /PayPal -->
<!-- Sofort -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="sofort" type="button" style="width: 100%;" name="mangopay-sofort" required="required" class="btn btn-default btn-bump btn-mangopay-sofort" value="MANGOPAY_SOFORT">MangoPay-Sofort</button>
</div>
</div>
<!-- /Sofort -->
<!-- Paysafe Card -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="psc" type="button" style="width: 100%;" name="mangopay-psc" required="required" class="btn btn-default btn-bump btn-mangopay-psc" value="MANGOPAY_PSC">MangoPay-PSC</button>
</div>
</div>
<!-- /Paysafe Card -->
<!-- Visa-Mastercard -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="visa" type="button" style="width: 100%;" name="mangopay-visa" required="required" class="btn btn-default btn-bump btn-mangopay-visa" value="MANGOPAY_VISA_MASTERCARD">MangoPay-Visa-Mastercard</button>
</div>
</div>
<!-- /Visa-Mastercard -->
</div>
<!-- /Pay Buttons -->
</form>
</div>
</div>
</div>
</div>
<!-- Scripte -->
<script src="assets/js/modal-popup.js"></script>
</body>
</html>
My style.css:
html, body{
min-height: 100%;
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
width: 100%;
}
h1{
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
font-size: 2.6rem;
word-break: break-word;
}
.div{
display: block;
}
.img{
vertical-align: middle;
}
.h1{
font-size: 2.6rem;
margin-top: 0;
margin-bottom: 20px;
}
.form{
display: block;
margin-top: 0em;
}
.form-group{
margin-bottom: 15px;
}
.textarea{
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 12px 6px 12px;
resize: none;
overflow: hidden;
border-bottom: 0;
}
.input-group{
position: relative;
display: table;
border-collapse: separate;
font-family:
}
.input-group-addon{
border-radius: 0;
background-color: #f9f9f9;
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555555;
text-align: center;
border: 1px solid #ccc;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
}
.cart-body .form-control{
font-size: 1.8rem;
line-height: 3rem;
min-height: 45px;
}
.form-control{
display: block;
width: 100%;
padding: 6px 12px;
color: #555555;
background-color: #FFF;
border: 1px solid #ccc;
border-radius: 2px;
height: 40px;
border-width: 1px;
}
textarea {
resize: none;
}
.row{
margin-left: -15px;
margin-right: -15px;
}
.cart{
position: relative;
margin-top: 100px;
border: none;
box-shadow: none;
}
.panel{
margin-bottom: 20px;
background-color: #FFF;
border: 1px solid transparent;
border-radius: 2px;
}
.cart .avatar{
margin-top: -60px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #FFF;
}
.cart-body .panel-body{
padding: 20px;
background-color: #FFF;
box-sizing: border-box;
}
.col-md-12{
width: 100%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.container-md{
width: auto;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
max-width: 500px;
}
.labelled-separator{
border-top: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 40px;
position: relative;
}
.labelled-separator .label-wrapper{
position: absolute;
top: -13px;
width: 100%;
text-align: center;
}
.cart-body .labelled-separator label{
background-color: #f4f4f4;
}
.labelled-separator label{
display: inline-block;
padding: 0 10px;
background: #fff;
}
label{
font-size: 10px;
font-family: sans-serif;
color: #777788;
text-transform: uppercase;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.row.small-gap{
margin-left: -3px;
margin-right: -3px;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.btn-bump{
line-height: 3rem;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
border-width: 2px;
}
.btn-paypal{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/paypal.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-sofort{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-sofort.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-psc{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-psc.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-visa{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-visa.png) no-repeat 50% 50%;
background-size: auto 60%;
}
and at least
my popup style.css
/* Modal PopUp */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 45%;
text-align: center;
}
/* The Close Button */
.close {
float: right;
font-size: 20px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
It looks like the z-index of the input is greater than the z-index of the modal. I removed this line from the code and the donation amount has the same opacity as the background...
change this styling:
.input-group .form-control{
z-index: 2;
}
to this:
.input-group .form-control{
z-index: 0;
}
As mentioned by the other answer the problem is due to the z-index. I would not recommend you changing or generally overwriting the bootstrap code as long as you are not 100% secure in what you do. Better just increase the z-index of your modal like this.
.modal {
/* your other properties */
z-index: 10; /* Sit on top */
}
I am trying to have a "playoff bracket" on a wordpress site page. The brackets will be fed by database and PHP code to populate them with proper opponents and winners and losers each week.
So I am essentially trying to draw the brackets in some fashion on the page. I am working on it here: http://www.jerseybasketballassociation.com/1a-test-logo/
this is not perfect, just working on it; I only have the first two weeks on there…
if you do not know what I mean by "playoff bracket" you can see an example here:
http://printyourbrackets.com/8seeded.html
basically what I have is OK; but it would be much improved if I somehow was able to put some lines between the two weeks so you could see teams 1 and 8; they have lines that show the winner advancing to second week (labeled as team 1)
Does anyone have any ideas on how I would produces those lines using CSS/html?
I will also paste in the HTML and CSS code that puts this on the page:
<style>
#round1_boxa {border: 1px solid gray; padding: 2px; margin-bottom: 27px;}
#round1_boxb {border: 1px solid gray; padding: 2px; margin-bottom: 54px;}
#round2_boxa {border: 1px solid gray; padding: 2px; margin-top: 27px; }
#round2_boxb {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxc {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxd {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round1_cont {width: 150px; float: left;}
#round2_cont {width: 150px; float: left; margin-left: 20px;}
#game_box {margin-bottom: 30px;}
</style>
<div id="round1_cont">
<div id="game_box">
<div id="round1_boxa">
Team 1
</div>
<div id="round1_boxb">
Team 8
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 4
</div>
<div id="round1_boxb">
Team 5
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 3
</div>
<div id="round1_boxb">
Team 6
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 2
</div>
<div id="round1_boxb">
Team 7
</div>
</div>
</div>
<div id="round2_cont">
<div id="round2_boxa">
Team 1
</div>
<div id="round2_boxb">
Team 4
</div>
<div id="round2_boxc">
Team 2
</div>
<div id="round2_boxd">
Team 3
</div>
</div>
So I am trying to see if anyone has any ideas on how to draw those lines that go from box to box to delineate the advancing teams. Thanks so much...
You need to rethink the task and change markup.
<div class="c1">
<div class="team">1</div>
<div class="team">2</div>
<div class="team">3</div>
<div class="team">4</div>
</div>
<div class="c2">
<div class="block first">semi1</div>
<div class="block">semi2</div>
</div>
<div class="c3">
<div class="block">final</div>
</div>
<div class="c4">
<div class="block">winner</div>
</div>
CSS:
* {box-sizing: border-box}
.team {
text-align: right;
line-height: 40px
}
.c1, .c2, .c3, .c4 {
float: left;
width: 100px
}
.c1 .team {
width: 100px;
height: 40px
}
.c2 .block, .c3 .block {
margin-top: 40px;
height: 40px;
width: 100px;
border-top: solid 2px #000;
border-right: solid 2px #000;
border-bottom: solid 2px #000;
text-align: right;
line-height: 40px;
}
.c2 .block.first {
margin-top: 20px;
}
.c3 .block {
height: 80px;
line-height: 80px;
}
.c4 .block {
margin-top: 60px;
text-align: right;
border-bottom: solid 2px #000;
}
Full example here
http://jsfiddle.net/fncxsezn/