I have a block from 3 elements - minimum value, stock of a product, maximum value.
All i need to do is to find a way to align the stock of the product in the middle between both values.
My guess is that the problem should be somewhere on these lines:
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>
My browser renders the file like this:(screenshot)
Inspect of the element shows this: (screenshot)
Using Flex wrong
even worst
CSS -
.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background: #cb132b;
display:inline-block;
}
.wcl-progress-meter .zero {
display: inline-block;
position: absolute;
top: -100%;
}
.wcl-progress-meter .min {
display: inline-block;
position: absolute;
top: -100%;
}
.wcl-progress-meter .max {
display: inline-block;
position: absolute;
top: -100%;
right: 0;
}
PHP- file where i tried to edit the code
$max_tickets = $product->get_max_tickets();
$tickets_sold = wc_get_stock_html( $product );
<div class="wcl-progress-meter <?php if($product->is_max_tickets_met()) echo 'full' ?>">
<progress max="<?php echo $max_tickets ?>" value="<?php echo $lottery_participants_count ?>" low="<?php echo $min_tickets ?>"></progress></br>
<span class="zero">0</span>
<style>
.inline-parent{text-align:center;}
.inline-block{display:inline-block;margin-right:10px;}
</style>
<div class="max inline-parent">
<div class="inline-block"><?php echo $tickets_sold;?></div>
<div class="inline-block"><?php echo $max_tickets;?></div>
</div>
CSS flexbox will help you achieve this easily.
Check this fiddle
Read about CSS flex
.value-container{
width: 600px;
display: flex;
justify-content: space-between;
}
UPDATE:
Make sure you take out the span from wcl-progress-meter div and put it inside max div
You can also get rid of inline-block class. Refer below Code.
<span class="zero">0</span>
PHP:
<div class="max">
<span class="zero">0</span>
<div><?php echo $tickets_sold;?></div>
<div><?php echo $max_tickets;?></div>
</div>
CSS:
.max{
display: flex;
justify-content: space-between;
}
UPDATE : 2 (Below CSS should work if you remove the absolute position)
.wcl-progress-meter meter::-webkit-meter-suboptimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background: #cb132b;
display:inline-block;
}
.wcl-progress-meter .zero {
/* try removing the CSS */
}
.wcl-progress-meter .min {
/* try removing the CSS */
}
.wcl-progress-meter .max {
display: flex;
justify-content: space-between;
}
I need to change an html image under 500 px resolution.
I have three images as you can see in the code snippet, but under 500 px resolution I need only one image.
I made the media query, all the css code I have there. I've tried to put the image for mobile in a different container which is set the
display: none
at beginning. And when I'm in the media query
#media all and (max-width: 500px){..}
I set it the
display : inline
But it just won't work. It displays nothing.
I've tried to set for the
#experiential_2_img{
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
but it just displays the image that is set for desktop, too.
Can you advise how can I resolve this?
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
.experiental-container-mobile { display: inline;}
/*#experiential_2_img {
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
}*/
<div class="home_thirdrow">
<div class="experiental-header">
<h3>Experiential</h3>
</div>
<div class="experiental-container">
<img id="experiential_1_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-amanda_phillies.jpg"
alt="Amanda_Phillies">
</div>
<div class="experiental-container">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-philadelphia_zoo.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container-mobile" style="display: none; ">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container">
<img id="experiential_3_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="insurance_fraud">
</div>
</div>
On these days it's always better to develope your site with mobile-stylesheet and extending this for desktop.
Reason:
Desktop-View on Moble :puke:
Mobile-View on Desktop :ok:
#media screen and (min-width: 768px) {
#experiential_1_img {
display: inline;
}
#experiential_3_img{
display: inline;
}
#experiential_2_img {
display: inline;
}
.experiental-container-mobile { display: none;}
}
.experiental-container-mobile { display: inline;}
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
I do not know how you have the race of the files, but it has looked that this is correct the link of your css file to the project.
It is possible that in the path of background-image it is necessary to go back in the previous folder and then enter in images.
Example:
background: url ('../ images / experiential-insurance_fraud.jpg'); . The two points to move back a directory.
Earlier I asked question about my profile design, I am said I was not gone use the same design on mobile phone but I've changed my mind, howere i use height:10%; on the banner in the main style but when using #media all and (max-width:1024;){} and having same class but with height:30%; it wont change. I have a different css where I do the same thing but there it works (most of the times).
html:
<?php if($user_visible == 'a'){ ?>
<!--Profile picture, banner, and main information-->
<div class="profile-wrapper">
<?php if(isset($user_avatar)){ echo'<img class="banner" src="/assets/images/banner/'.$user_banner.'" />'; }else{ echo'<img class="banner" src="/assets/images/banner/default.png" />'; }?>
<!--profile picture-->
<?php if(isset($user_avatar)){ echo'<img class="avatar" src="/assets/images/users/'.$user_avatar.'" />'; }else{ echo'<img class="avatar" src="/assets/images/users/default.png" />'; }?>
<!--user information-->
<div class="user-information">
<p><?php echo $user_name; ?><br />
<?php echo $user_firstname; ?> <?php echo $user_lastname; ?></p>
</div>
</div>
css:
/* **************************************************************************************
///////////////////////Main Style////////////////////////////////////////////////////////
************************************************************************************** */
#media all and (min-width:1024px;) {
.avatar {
border: 2px solid #fff;
border-radius:5px;
margin-top:-10%;
margin-left: 5%;
width:15%;
height:auto;
}
.banner {
border: 2px solid #fff;
border-radius:5px;
margin-top: 20px;
height:10%;
width:100%;
}
.profile-wrapper {
margin:0 auto;
width:90%;
}
}
/* **************************************************************************************
///////////////////////Tablet////////////////////////////////////////////////////////////
************************************************************************************** */
#media all and (max-width: 1024px) {
.banner { height:30%; }
}
/* **************************************************************************************
///////////////////////Phone/////////////////////////////////////////////////////////////
************************************************************************************** */
#media all and (max-width: 768px) {
.banner { height:30%; }
}
These are the most universal media queries out there as they will help you to cover most of the different screen sizes decently:
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
So try these media queries for your banner:
#media(min-width:992px){
.banner {
height: 30%;
}
}
#media(min-width:1200px){
.banner {
height: 10%;
}
}
I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can't differentiate between the two as the breakpoint for printing is the same as the breakpoint for mobile (xs)
For example: In the below test html my printed page (or print preview) shows the xs6 columns side by side but the sm6 columns stacked. There isn't a breakpoint between xs and sm.
Surely my printed page is wider than my mobile viewport so shouldn't it use the sm layout?
Am I doing something wrong or is this the way it is? Is there a defined viewport width for printing?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
xs6
</div>
<div class="col-xs-6">
xs6
</div>
</div>
<div class="row">
<div class="col-sm-6">
sm6
</div>
<div class="col-sm-6">
sm6
</div>
</div>
</div>
</body>
</html>
What I did was to manually recreate those columns classes in my print css.
.col-print-1 {width:8%; float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}
Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-print and .hidden-print to hide/show elements only in the print version.
It still needs some work, but that quick patch helped me a lot.
If you want the Bootstrap's grid do not print with col-xs (mobile settings) , and want to use col-sm-?? instead , Based on Fredy31 answer and you don't even need to define col-print-??. simply rewrite all col-md-?? css class definitions inside a: #media print { /* copy and paste from bootstrap.css*/ } like this:
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
}
The Sass version of Fredy31 solution:
#for $i from 1 through 12 {
.col-print-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
For Bootstrap 4 (using SASS)
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
#for $i from 1 through $grid-columns {
#media print {
.col-print#{$infix}-#{$i} {
#include make-col($i, $grid-columns);
}
}
}
}
}
will create
#media print {
.col-print-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; } }
#media print {
.col-print-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; } }
#media print {
.col-print-3 {
flex: 0 0 25%;
max-width: 25%; } }
#media print {
.col-print-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; } }
#media print {
.col-print-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; } }
#media print {
.col-print-6 {
flex: 0 0 50%;
max-width: 50%; } }
#media print {
.col-print-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; } }
#media print {
.col-print-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; } }
#media print {
.col-print-9 {
flex: 0 0 75%;
max-width: 75%; } }
#media print {
.col-print-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; } }
#media print {
.col-print-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; } }
#media print {
.col-print-12 {
flex: 0 0 100%;
max-width: 100%; } }
Your switch styles like this
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
See
#grid-example-mixed or #grid-example-mixed-complete
and may you need to clearfix
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
#grid-responsive-resets
Edit: 04/2019
Since Bootstrap 4.x there are new classes that can be used to set the display behavior when printing. SEE 4.3 Docs
I had a similar problem, for me the easiest solution was to manually modify the width for elements I wanted to appear differently when printed (and I added a specific class -in my case: title-container, details-container for those, along the col-xs-6 etc.).
For example:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
Some stuff
</div>
<div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
Some more stuff
</div>
</div>
</div>
</div>
#media print {
.title-container {
width: 360px;
float: left;
}
.details-container {
width: 300px;
float: right;
}
}
In my case I needed a column to be floated on the right, one to the left, thus the floats...
You could set in your custom css the width also for .col-xs-6 etc. just a quick and dirty solution, but did the job for a page where I needed this...
Instead of recreating with new column names like .col-print-1 , .col-print-2 , write a media query which will be enable while printing the document.
#media print {
.col-md-1,.col-md-2,.col-md-3,.col-md-4,
.col-md-5,.col-md-6,.col-md-7,.col-md-8,
.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
float: left;
}
.col-md-1 {
width: 8%;
}
.col-md-2 {
width: 16%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 42%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58%;
}
.col-md-8 {
width: 66%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83%;
}
.col-md-11 {
width: 92%;
}
.col-md-12 {
width: 100%;
}
}
So by this way we can be able to apply print css styles directly without changing the column names.
The following works great to create grid elements specific for print media. Using Bootstrap 3.
#media print {
.make-grid(print);
}
Then you can use all the grid col elements with the print keyword. Ex: col-print-6 col-print-offset-2, etc.
Maybe you could use Bootstrap 2. If you are familiar with Bootstrap 2, then you can use it as an alternative, as this offers non responsive CSS. Bootstrap 2 was not mobile first, you had to add an extra style sheet to make your web pages responsive.
Or you can add clearfixes for the mobile part. See http://getbootstrap.com/css/#grid-responsive-resets
And the SASS version of Ehsan Abidi's answer using MiCc83's answer:
#for $i from 1 through 12 {
.col-sm-#{$i} {
width: #{percentage(round($i*8.33)/100)};
float: left;
}
}
I prefer this because I always spec the "sm" size and that most closely approximates a print page in my applications. Then I only need to add something specifically for print when I've got an outlier condition.
If you only have 2 columns, you can try it. I fixed it with the code below.
<div class="row">
<div class="w-50 p-3 float-left">
</div>
<div class="w-50 p-3 float-right">
</div>
</div>
If it's just one line of text in two columns you can use the accepted answer here.
For Bootstrap 4 sass here are some snippets that I applied across several projects. These are making adjustments on:
Grid (follows the LG breakpoint)
Spacers (rewrite all below LG margins/paddings)
Buttons (since background-colors does not work in print preview, switch filled buttons to outline)
Display (rewrite all below LG displays)
Text alignments (rewrite all below LG breakpoint)
#media print {
$grid-breakpoints-print: (lg: 992px); // keep breakpoint that you would like to apply for print
/* Rewrite margins, padding, display & alignment to keep the LG and not the mobile ones */
#each $breakpoint in map-keys($grid-breakpoints-print) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints-print);
// rewrite all displays for your print breakpoint
#each $value in $displays {
.d#{$infix}-#{$value} {
display: $value !important;
#each $v in $displays {
&.d-#{$v} {
display: $value !important;
&.d-print-none,
&.table__sort {
display: none !important;
}
}
}
&.d-print-none {
display: none !important;
}
}
}
// rewrite all spacings for your print breakpoint
#each $prop, $abbrev in (margin: m, padding: p) {
#each $size, $length in $spacers {
.#{$abbrev}#{$infix}-#{$size} {
#{$prop}: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}-#{$s},
&.#{$abbrev}-auto {
#{$prop}: $length !important;
}
}
}
.#{$abbrev}t#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-top: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}t-#{$s},
&.#{$abbrev}y-#{$s},
&.#{$abbrev}t-auto,
&.#{$abbrev}y-auto {
#{$prop}-top: $length !important;
}
}
}
.#{$abbrev}r#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-right: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}r-#{$s},
&.#{$abbrev}x-#{$s},
&.#{$abbrev}r-auto,
&.#{$abbrev}x-auto {
#{$prop}-right: $length !important;
}
}
}
.#{$abbrev}b#{$infix}-#{$size},
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-bottom: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}b-#{$s},
&.#{$abbrev}y-#{$s},
&.#{$abbrev}b-auto,
&.#{$abbrev}y-auto {
#{$prop}-bottom: $length !important;
}
}
}
.#{$abbrev}l#{$infix}-#{$size},
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-left: $length !important;
#each $s, $l in $spacers {
&.#{$abbrev}l-#{$s},
&.#{$abbrev}x-#{$s},
&.#{$abbrev}l-auto,
&.#{$abbrev}x-auto {
#{$prop}-left: $length !important;
}
}
}
}
}
// rewrite all text alignments for your print breakpoint
.text#{$infix}-left {
text-align: left !important;
&.text-left,
&.text-right,
&.text-center {
text-align: left !important;
}
}
.text#{$infix}-right {
text-align: right !important;
&.text-left,
&.text-right,
&.text-center {
text-align: right !important;
}
}
.text#{$infix}-center {
text-align: center !important;
&.text-left,
&.text-right,
&.text-center {
text-align: center !important;
}
}
}
/* Rewrite grid to keep the LG and discard the mobile */
#for $i from 1 through 12 {
.col-lg-#{$i} {
flex: 0 0 #{percentage(round($i*8.33)/100)} !important;
max-width: #{percentage(round($i*8.33)/100)} !important;
#for $k from 1 through 12 {
&.col-xs-#{$k},
&.col-sm-#{$k},
&.col-md-#{$k},
&.col-#{$k} {
flex: 0 0 #{percentage(round($i*8.33)/100)} !important;
max-width: #{percentage(round($i*8.33)/100)} !important;
}
}
}
}
/* Since the print will not fill background-colors you need to transform filled buttons into outline */
#each $color, $value in $theme-colors {
.btn-#{$color} {
color: $value !important;
background-color: $white !important;
}
}
}
Here is a working Fiddle. Keep in mind that only #media print { ... } matters in the fiddle example. Variables from the beginning where copied to have a working fiddle.
Based on Fredy31's answer using Bootstrap's exact widths and removing repetition of float left.
[class^="col-print"] {float:left;}
.col-print-1 {width:8.33333333%;}
.col-print-2 {width:16.66666667%;}
.col-print-3 {width:25%;}
.col-print-4 {width:33.33333333%;}
.col-print-5 {width:41.66666667%;}
.col-print-6 {width:50%;}
.col-print-7 {width:58.33333333%;}
.col-print-8 {width:66.66666667%;}
.col-print-9 {width:75%;}
.col-print-10{width:83.33333333%;}
.col-print-11{width:91.66666667;}
.col-print-12{width:100%;}
I have this page here and the div .menu-content only reaches half the page even on 100% height. I really have no idea why.
Thanks!
<div class = "menu-content">
<div class="wrapper" style = "background-color:white; height:100%; width:750px;">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php global $rd_data; if ($rd_data['rd_error_text']) { ?>
<?php echo $rd_data['rd_error_text']; ?>
<?php } else { ?>
Oops, It looks like an error has occured
<?php } ?>
<?php endif; ?>
</div>
You need to remove height:100%; on .menu-content .wrapper in your CSS code and in the inline style you set on it.
That way it will be set to default height:auto; and the height will be calculated by it's content.
Try this css..
.menu-content {
display: table;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
position: relative;
}
Add html {height: 100%} and it should work.
to solve this you can simply add a div with style = "clear:both;" at the end of your div .menu-content
like this :
<div class="menu-content">
.....................
<div style="clear:both;"></div>
</div>
you have to use css this way. use the overflow:auto property and remove the unnecessary property like z-index and position from class .wrapper.
.menu-content {
background-color: #FFFFFF;
height: 100%;
overflow: auto;
}
.wrapper {
margin: 0 auto;
width: 750px;
}