Tips to position two shortcode elements next to each other horizontally

I have some code here and I am looking to align the two elements at the bottom, "php echo do_shortcode(wcas-search-form);" and "php do_action('hamzahshop_custom_min_cart');" on the same line horizontally. I am new to this and struggling to figure it out. I have searched extensively but haven't found a solution yet.

        <?php
/**
 * Displays Header
 *
 */

?>
<div class="header-main hamzahshop-custom-header">
<div class="container">
<div class="header-content">
        <div class="row" >
          <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="logo"> 
            <?php
            if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
                      the_custom_logo();
            }else{
            ?>

                <?php if ( is_front_page() && is_home() ) : ?>
                    <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="site-title"><?php bloginfo( 'name' ); ?></a></h1>
                <?php else : ?>
                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php endif; ?>
                <?php $description = get_bloginfo( 'description', 'display' );
                if ( $description || is_customize_preview() ) : ?>
                     <p class="site-description"><?php echo esc_attr($description); ?></p>
                <?php endif; ?>



             <?php }?>
             </div>


          </div>



         <div>
     <?php echo do_shortcode('[wcas-search-form]'); ?>
     <?php do_action('hamzahshop_custom_min_cart');?>


          </div>
        </div>

        </div>



</div>    
</div>    
</div>

Answer №1

To ensure content is displayed side by side horizontally, you can wrap both contents in a span element which is inline in nature. However, if the PHP content contains block-natured tags, you can utilize the display:flex property.

<style>
 .flexBox{ 
    display : flex; 
    justify-content : flex-start; //ensures content flows from left to right
 }
</style>

<div class = "clearfix flexBox" >
 <span><?php echo do_shortcode('[wcas-search-form]'); ?></span>
 <span><?php do_action('hamzahshop_custom_min_cart');?></span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Is there a way to use the outerHTML method on a parent element to append a child element so that the icons appear outside of the targeted element rather than inside it? The current code snippet shows the icons inside the box, but I want them to be placed o ...

What could be causing the malfunction of my Superfish menu in Firefox?

I am currently experimenting with the Superfish jQuery plugin to improve a drop-down menu on my website. Unfortunately, in Firefox browser (v. 21.0), the drop-down menu does not open when hovering over it as expected. However, it works fine in Chrome and O ...

Short-hand syntax for IF/ELSE statements in PHP

I've been struggling for a while now to write a shorthand version of the PHP conditional statement shown below: public static $url = $_SERVER['HTTP_REFERER']; if (false !== strpos($url,'en')) { $currlang = 'en'; } e ...

Display the amount of child pages belonging to the current parent page

I am currently utilizing the code below in WordPress to showcase information pertaining to each child page under a Parent page. It's working perfectly fine. However, what I now need assistance with is displaying the count of child pages on another sec ...

Is it possible for a different website to utilize my PHP script remotely?

I have developed a basic PHP software with a config file that contains database information only, without any sensitive data such as user passwords. In the config file, I declare variables in a typical way ($test = "test";). My concern is whether someone c ...

Is there a way to adjust the transparency of a span element's background without affecting the text itself?

I have some code that needs to be customized. This is my HTML: <div class="text-rotator add-top-half add-bottom-half align-left white-txt medium-txt uppercase highlight-bg"> <div class="rotator-wrap" style="display: block;"> <sp ...

What is the best way to format FormControl for proper spacing?

<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

Basic PHP and JSON

Encountering a frustrating issue with my script. It runs smoothly on both my local server and test server, but when I try it on the Rackspace server, it fails to execute correctly. <?php $path = "http://query.yahooapis.com/v1/public/yql?q="; $path .= ...

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

I've been working on optimizing the mobile layout of my website, and while I have successfully implemented a media query with a different stylesheet for mobile devices, I'm struggling to determine if it's feasible to also load a separate Jav ...

What is the best way to pass an array to PHP and then display it in HTML?

After setting up a form with 3 select tags in my HTML, I attempted to create an array using jQuery and send it to PHP. The goal is to retrieve data from PHP and display it on my HTML page. Below is the code snippet: HTML code <form name="myform"> ...

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

Generating documents in Word or PDF format using PHP and Angular data

My goal is to generate a Word document using PHP for which I found a solution involving the use of headers. header("Content-type: application/vnd.ms-word"); header("Content-Disposition: attachment;Filename=output.doc"); Initially, this method worked well ...

What is the best way to create a hover effect for this text?

When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here. Below, you'll find the HTML and CSS code I've implemented for this effect. ============================== ...

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

Text positioned in a fixed location

How can I ensure that the main content stays on the right side of the sidebar without adding margin-right? Currently, the sidebar is being covered by the body content due to its fixed position. Is there a solution to prevent this issue? .App { displa ...

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

let myVariable = <?php echo json_encode($a[i want to insert the JS variable here]); ?>; Your prompt response would be highly valued. Many thanks in advance. ...

Issues with JQuery onclick function on dropdown menu functionality not behaving as desired

Take a look at some example code here. Here's the HTML: <div> HTML<br> <li> <select id="Status" type="text"> <option value="New">New</option> <option value="Complete">Complete</option& ...