Joomla website layout using Bootstrap columns set to MD-6 but not contained within a single

I seem to be experiencing an issue with Joomla SP page builder. After creating a row and adding 2 columns MD-6, they are not lining up properly in one row.

Any assistance would be greatly appreciated.

You can view the issue at:

Here is a screenshot of the SP page builder's columns

Possible Solution: I found that by commenting out this line in cocoon.preprocess.js

$('.sppb-row').removeClass('sppb-row');
, the issue was resolved. This is within the Joomla NRG template.

Answer №1

you have to include the class sppb-row

<div class="sppb-container-inner">
  <div class=""> 
   <div class="sppb-col-md-6"></div>
   <div class="sppb-col-md-6"></div>
 </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

FadeOut Television static on Canvas after a period of inactivity

Is there a way to smoothly fade out the TV noise after a specific timeout period? I found this code snippet on Stack Overflow that seems to address a similar issue: var canvas = document.getElementById('canvas'), ctx = canvas.getContext( ...

What is the method for deactivating a hyperlink with CSS?

Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...

Does Jquery AJAX send back raw data or HTML ready for use?

I'm currently developing a mobile app using Jquery Mobile. In order to populate the app with data, I need to make requests to an API and display the information within the app. At this point, I have two possible options: The API returns JSON data ...

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

Maintaining consistent height across all elements in a column while preserving margin: a guide

My query revolves around filling the contents of two columns with different heights within a row. Although the columns themselves are of equal height, the cards inside them are not. +---------------------------+---------------------------+ | +------------- ...

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

The Bootstrap 4 Modal has a one-time activation limit

It seems that I mistakenly created two modals. The issue arises when I open either of them for the first time and then close it, as from that point on, neither modal is able to be opened again by performing the same action that initially worked. https://i ...

I am struggling to assign the height style attribute to a div element

I have created the code below where I am attempting to set a div to 'display: flex' and include two divisions, one with a width of 200px and the other with a width of 100%. <div style="clear:both;display:flex; height: 100%;"> <div ...

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

Issue with Bootstrap 3 header display on Firefox browser

I'm facing an issue with coding the header on my website. The header looks fine in Chrome, but it's displaying incorrectly in Firefox. The problem seems to be with the responsiveness of the header, which was coded using Bootstrap 3. Here are som ...

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

What is the best way to use jQuery to toggle the hidden class on an inner div when a button inside a card is clicked?

How can I implement jQuery functionality to toggle the hidden class on an inner div by clicking a button inside a card? I attempted to create a container div containing multiple cards. The issue arises when I click the button - it only opens the panel, bu ...

What is the best way to use PHP in order to retrieve the element containing the visit ID from the specific row within an HTML table?

I am working on a project that involves populating an HTML table with data from a database. The table includes an approval button for administrators to approve visits and change their status to APPROVED. I am trying to figure out how to select the element ...

Tips on establishing validators for deeply nested form controls within form groups in Angular 6 reactive forms

In my form array (experiencesArray), I have nested nested nested form controls (companyname), as shown below. this.personalFormGroup = this._formBuilder.group({ professionalInfo: this._formBuilder.group({ totalexpyears: ['', Validators.req ...

FancyBox - Is there a "Never show this message again" option available?

I implemented FancyBox on my website to display important information to users. However, I would like to enhance the user experience by adding a button that allows them to set a cookie and prevent the message from popping up for about a month. Since I&apo ...

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

Can a dynamic react component be inserted into a standalone HTML document without the need for file downloads or server support?

I am implementing React for a Single Page Application (SPA) project where users can customize a component's font size, color, etc., and then embed this customized component into their website. I'm looking for a way to bundle the component and pre ...

Transform static borders into mesmerizing animations by changing the solid lines to dotted lines using CSS

I've managed to create a circle animation that is working well, but now I'm looking to switch from solid lines to dotted lines. Can anyone provide guidance on how to accomplish this? Here is the current appearance: #loading { width: 50px; ...

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...