[FIXED] How to center text into 2 divs with flexbox

Issue

Hello I have two managed by flexbox, but I do not understand how to put text vertically aligned.

You can see result here: https://www.w3schools.com/code/tryit.asp?filename=GKEFJJF780BU

You can also see a snippet of code here:

.barralanding {
  display: flex;
  flex-direction: row;
    
    /*width:100%;
    display:table;*/
}

.landing-foto {
  background-color: dodgerblue;
  flex: 50%;

    /*width:50%;
    display:table-cell;
    vertical-align:middle;
    background:   url("images/foto-land-dovedormire.jpg") no-repeat center;
    background-size: cover;*/
    height:420px;
}

.landing-testo {
  background-color: #369;
  flex: 50%;

    /*width:50%;
    display:table-cell;
    vertical-align:middle;
    background-color:#f0ca9c;*/
    background-color:#06C;
    
    padding:20px 30px 20px 30px;
    box-sizing:border-box;

}

.landing-testo h4{
    font: normal normal 1.9em 'Poppins', sans-serif;
    font-weight:800;
    color:white;
    text-align:left;
    background:   url("images/rigasottowth-h1.gif") no-repeat bottom left;
    padding-bottom:15px;
    margin:0px;
}
.landing-testo p{
    font: normal normal 1.0em 'Poppins', sans-serif;
    color:white;
    width:80%;
}
.landing-testo p.big{
    font: italic normal 1.2em 'Poppins', sans-serif;
    text-align:center;
}





/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .barralanding {
    flex-direction: column;
  }
  
  .landing-foto {
    order: 1;
  }
  
}

<div class="barralanding">
  <div class="landing-foto">1 lkjh khs alkdjsh alkdh la laksjjhh alskjhv 2</div>
  <div class="landing-testo">2 dskf aksdhh alk alsdkhhadslkjfh slkjfh sslkfjjh dlfkjjhh adslkjh alksjkh alkjjh aadkljjhf ajk1</div>
  
</div>

Do you know how to vertically align the text - at least - in one div?

Many thanks.

Solution

With flex, you can create a .center class to center your content:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

But if you can use grid, it's even simpler:

.center {
  display: grid;
  place-items: center;
}

To fix your problem, you can choose either center method from the above and change your HTML to:

<div class="barralanding">
  <div class="landing-foto center">
    1 lkjh khs alkdjsh alkdh la laksjjhh alskjhv 2
  </div>
  <div class="landing-testo center">
    2 dskf aksdhh alk alsdkhhadslkjfh slkjfh sslkfjjh dlfkjjhh adslkjh
    alksjkh alkjjh aadkljjhf ajk1
  </div>
</div>

.center {
  display: grid;
  place-items: center;
}

.barralanding {
  display: flex;
  flex-direction: row;
}

.landing-foto {
  background-color: dodgerblue;
  flex: 50%;
  height: 420px;
}

.landing-testo {
  background-color: #369;
  flex: 50%;
  background-color: #06c;
  padding: 20px 30px 20px 30px;
  box-sizing: border-box;
}

<div class="barralanding">
  <div class="landing-foto center">
    1 lkjh khs alkdjsh alkdh la laksjjhh alskjhv 2
  </div>
  <div class="landing-testo center">
    2 dskf aksdhh alk alsdkhhadslkjfh slkjfh sslkfjjh dlfkjjhh adslkjh alksjkh alkjjh aadkljjhf ajk1
  </div>
</div>

Answered By - konekoya

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] How to control the number of decimals places for display purpose only using Image function in Ada?

Issue

I have the following code line in Ada,

     Put_Line ("Array of " & Integer'Image (iterations)
        & "          is " & Long_Float'Image (sum) 
        & " Time = " & Duration'Image(milliS) & timescale);  

The number of decimal places in sum is too long for display (not for calculations since long float is needed for sum calculations). I know that Ada has alternative way of displaying decimals using aft and fore without using the Image function but before I switch to alternative I would like to know if Image has options or other technique of displaying decimals. Does Image function has an option to display decimals? Is there a technique to shorten the number of decimal places of the Long_Float for display only?

with Ada.Numerics;
 with Ada.Text_IO; use Ada.Text_IO;

 procedure Images is
 sum                : Standard.Long_Float;
 Pi                 : Long_Float := Ada.Numerics.Pi;

  type Fixed is delta 0.001 range -1.0e6 .. 1.0e6;
  type NewFixed is range -(2 ** 31) .. +(2 ** 31 - 1);
  type Fixed2 is new Long_Float range -1.0e99.. 1.0e99;
  type Fixed3 is new Long_Float range -(2.0e99) .. +(2.0e99);


 begin
 sum:=4.99999950000e14;
 Put_Line ("no fixing number: " & Pi'Image);
 Put_Line (" fixed number: " & Fixed'Image(Fixed (Pi)));
 Put_Line ("no fixing number: " & Long_Float'Image(sum));
 Put_Line (" testing fix: " & Fixed3'Image(Fixed3 (sum)));
 end Images;

Addendum:

1. Note that my variable sum is defined as Standard.Long_Float to agree with other variables used throughout the program.
2. I am adding code to show the culprit of my problem and my attempts at solving the problem. It is based on example provided by Simon Wright with sum number added by me. Looks like all I need to figure out how to insert delta into Fixed3 type since delta defines number of decimals.

Solution

’Image doesn’t have any options, see ARM2012 3.5(35) (also (55.4)).

However, Ada 202x ARM K.2(88) and 4.10(13) suggest an alternative:

with Ada.Numerics;
with Ada.Text_IO; use Ada.Text_IO;
procedure Images is
   Pi : Long_Float := Ada.Numerics.Pi;
   type Fixed is delta 0.001 range -1.0e6 .. 1.0e6;
begin
   Put_Line (Pi'Image);
   Put_Line (Fixed (Pi)'Image);
end Images;

which reports (GNAT CE 2020, FSF GCC 10.1.0)

$ ./images 
 3.14159265358979E+00
 3.142

Answered By - Simon Wright

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to ascending order the following integers with maple (should not display any digit)

Issue

In this exercise you should not display any digit. Display only the minimal output required to establish your result. (a) Place the following integers in ascending order 100^(100); 80^(120); 60^(140); 40^(160)

evalb(-3<-2)

anyone can help what's next?

Solution

It's unclear whether you have to show it by steps, or whether you can simply get Maple to sort the quantities directly.

Consider these three comparisons, which should be enough for you to figure out the ascending order:

evalb( 80^(120) > 100^(100) );

           true

evalb( 60^140 > 80^(120) );

           true

evalb( 40^(160) > 60^140 );

           true

Or, starting with a random rearrangement, you can get Maple to sort them.

restart;

# separate paragraph or execution group
interface(typesetting=extended):

S := [100%^(100), 40%^(160), 60%^(140), 80%^(120) ];

answer := sort(S, (a,b)->value(a)<value(b));

Answered By - acer

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] How to show only posts with certain category in wordpress theme?

Issue

I was wondering if there is a way to change this code to only display posts from certain category created in wordpress. Now it displays every recent post. Let's say I would create "News" category in wordpress and I want this piece of code to display only News posts.

Thanks for help

<?php
        if( have_posts() ){

            while( have_posts() ){

                the_post();
                get_template_part( 'template-parts/content', 'koncert');
                
            }
        }
?>

Solution

You can override the usual query that wordpress uses and create a custom one;

https://developer.wordpress.org/reference/classes/wp_query/

usually though for just displaying a category you can just open the category slug and provided your template has the correct archive page it will display the posts for that category.

If not use something similar to below. You can further refine your search parameters like number of posts and post types as defined in the link above.

    <?php
    
      //refine your query to the category you desire either a slug(example below) or category id
      $args = array(
        'category_name' => 'my_category_slug', 
      );
    
      //create the query using the arguments
      $query = new WP_Query($args);
    
    ?>
    
    //create the loop to show the posts
    <?php if($query->have_posts()): ?>
    
     <?php while($query->have_posts()): $query->the_post(); ?>
    
      <h1><?php the_title(); ?></h1>
    
      <div><?php the_content(); ?></div>
    
     <?php endwhile; ?>
    
    <?php endif; ?>

Answered By - user18595487

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to display some attributes directly on (single) shop page/product page in Woocommerce?

Issue

I'm trying to display some attributes directly on the shop page. The attributes are all collected in the database. To make it easier to show, I made a screenshot so you can get a better idea. the thing is now, with which code I can do that. the attributes, there are always 4, should be display centered under the block with the pictures and the buy button. I would be very happy if we could find a way to do this. Thanks very much

Ok, i've found some code here on stackoverflow... the good news are, i get the results/attributes i want, the bad news are, on the wrong page (shop page instead of shop page single).

this is the code:

add_action('woocommerce_after_shop_loop_item_title', 'display_custom_product_attributes_on_loop', 5 );
function display_custom_product_attributes_on_loop() {
    global $product;

    // Settings: Here below set your product attribute label names
    $attributes_names = array('alter', 'bausteine', 'publicationdate', 'sku');

    $attributes_data  = array(); // Initializing

    // Loop through product attribute settings array
    foreach ( $attributes_names as $attribute_name ) {
        if ( $value = $product->get_attribute($attribute_name) ) {
            $attributes_data[] = $attribute_name . ': ' . $value;
        }
    }

    if ( ! empty($attributes_data) ) {
        echo '<div class="items" style="color: red;"><p>' . implode( '<br>', $attributes_data ) . '</p></div>';
    }
}

this code shows me the attributes and the results on the shoppage, but i need it on the single shop page/product page.

Thank you!

Solution

Change the hook name and then check

add_action('woocommerce_single_product_summary', 'display_custom_product_attributes_on_loop', 5 );

function display_custom_product_attributes_on_loop() { global $product;

// Settings: Here below set your product attribute label names
$attributes_names = array('alter', 'bausteine', 'publicationdate', 'sku');

$attributes_data  = array(); // Initializing

// Loop through product attribute settings array
foreach ( $attributes_names as $attribute_name ) {
    if ( $value = $product->get_attribute($attribute_name) ) {
        $attributes_data[] = $attribute_name . ': ' . $value;
    }
}

if ( ! empty($attributes_data) ) {
    echo '<div class="items" style="color: red;"><p>' . implode( '<br>', $attributes_data ) . '</p></div>';
}

}

Answered By - Keerthi S

Answer Checked By - Robin (PHPFixing Admin)

Read More

[FIXED] How do I place paragraph to the right of a block of images?

Issue

I'm trying to place a small paragraph next to 4 images that are on top of each other.

At the moment the paragraph is below the images.

This is what I want to achieve:

https://ntchwaidumela-thomas.pixpa.com/architecture/container-society

I tried float but the text just moved to the right but stayed at the bottom.

  .column img {
  display: block;
  padding: 20px;
  width: 55%;
  height: auto;
}

.column {
  margin-left: 70px;
  display: inline-block;
  margin-bottom: 40px;
}

.para {
  display: inline-block;
  width: 55%;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(47, 46, 46, 0.70);

<div class="row">
  <div class="column">
    <img id="img1" src="architecture/img1.jpg">
    <img id="img2" src="architecture/img2.jpg">
    <img id="img3" src="architecture/img3.jpg">
    <img id="img4" src="architecture/img4.jpg">
  </div>
  <div class="para">
    <p class="para"> text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text tetx</p>
  </div>

Solution

make the row class display:flex and height:100vh

.row{
  display:flex;
  height:100vh;
}
.column img {
  display: block;
  padding: 20px;
  width: 80%;
  height: auto;
}

.column {
  height:100vh;
  overflow-y: scroll;
  margin-left: 70px;
  display: inline-block;
  margin-bottom: 40px;
  width: 60%;
}

.para {
  display: inline-block;
  width: 55%;
  font-size: 18px;
  color: rgba(47, 46, 46, 0.70); 
  letter-spacing: 3px;
  line-height: 60px;
  text-align: center;
  
}

<div class="row">
  <div class="column">
    <img id="img1" src="https://picsum.photos/200">
    <img id="img2" src="https://picsum.photos/200">
    <img id="img3" src="https://picsum.photos/200">
    <img id="img4" src="https://picsum.photos/200">
  </div>
  <div class="para">
    <p class="para"> text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text  text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text   text text text text text text text text text text text text tetx</p>
  </div>

Answered By - Dhaifallah

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] Displays the total number of products in Wordpress

Issue

How do I get Wordpress to display the result (number of all products in the shop) exactly where I want it to be. So far I have inserted the code (see below) into functions.php and the result is also displayed, but top left on all pages... I only need to display this in a special page. something like that: today we have a total of XXX products in our database.

Thanks for your support!!

My question refers to this post and i was prompted to ask a new question. Displays the total number of products

This is the code:

'posts_per_page' => -1 );
$products = new WP_Query( $args );
echo $products->found_posts;

Solution

This depends as how your theme is coded but one thing you could do is to the same thing but in a Shortcode, if you add something like this in your functions.php

function total_products_func(){
    $args = array( 
      'post_type' => 'product', 
      'post_status' => 'publish', 
      'posts_per_page' => -1 
    );
    $products = new WP_Query( $args );
    return "Today we have a total of " . $products->found_posts . "products in our database";
}
add_shortcode( 'total_products', 'total_products_func' );

Then in the content of the page you want to show the message just add

[total_products]

This should display the text with the total count of products

Answered By - Pol

Read More

[FIXED] Symfony - FormType - set field display:none by default

Issue

in my formType on Symfony I try to hide a default field.

So I did like this:

        ->add('amountReduction', NumberType::class, [
            "required" => false,
            "label" => "Montant de la réduction",
            "attr" => [
                "style" => "width: 200px; display: none;"
            ],
        ])

The problem is that the label is still visible. I would like to display: none; the whole field by default.

The goal is then that in the template, I can make a $(".field").show() which will display the label and the entire field

Thanks for your help

Solution

Use the row_attr option.

->add('amountReduction', NumberType::class, [
            "required" => false,
            "label" => "Montant de la réduction",
            "row_attr" => [
                "class" => "d-none"
            ],
        ])

Answered By - Frank B

Read More