What is the reason behind this issue occurring with this specific WordPress theme?

I've been trying to understand why there is a misalignment on the page when you scroll down on "". The Product Testing and The Sun Trial sections are not lining up correctly. I used a builder to create these boxes, so I'm not sure what could be causing this issue. All the boxes on the page were created in the same way.

Here are the attributes for these "promo boxes": Attributes:

  • Image (upload photo for Promo Box item - can be on right or left side)
  • Title (title for Progress Box item);
  • Content (content for Progress box item);
  • Button Text (type text for the button inside Progress Box item)
  • Button Link (link for the button)
  • Image position (choose between left or right side position for image above)
  • Border (choose if you want to show border on right hand side or not)
  • Open in new window (choose if you want to open link in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

Thank you for your assistance :)

jqueryhtmlcsswordpress

Answer №1

The issue stems from the content alignment of the box located one row above and to the left. Due to the Headline 

<h2>Quotezon Free Bike Insurance Quote</h2>
spanning two rows, the height of the box is larger than the one on the right side (about 9px greater on my laptop). As a result, "Sun Trial" is forced to be displayed on the right side. When the headline is shortened to 
<h2>Quotezon Free Bike</h2>
, "Sun Trial" appears on the left with "Product Testing" moving to the right in the following row.
This display discrepancy may also occur with other elements depending on screen size - for instance, "Coupon XPlorer" on the right in the second row and "Primark" on the left in the next row. To address this, consider adjusting the CSS properties to ensure consistent minimum heights for all boxes.

Answer №2

There seems to be an issue with the box's creation. It appears that all of its html tags have "title" at the end of the open tag for some reason.

<div class="column one-second column_promo_box" title="">
    <div class="promo_box no_border" title="">
        <div class="animate zoomInDown" data-anim-type="zoomInDown" title="">

This snippet is just a small example, but it indicates that something may have gone wrong during generation.

EDIT:

Upon comparing with correctly formatted boxes, it's clear that there are differences in the code, suggesting that these were indeed generated improperly.

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

ReactJS Scripts are throwing an error indicating that the function require is not defined

Just starting out with React and I discovered that we can integrate React by adding the necessary scripts to our main index.html file. I followed all the steps to include the script and even made sure to add Babel since I'm writing my main App in JSX. ...

javascripthtmlreactjs

Tips on utilizing jQuery nth-child to style alternate divs within a parent element and the remaining divs in a different parent element

Need to provide support for IE8 so only CSS is not an option. I'm attempting to color the odd and even elements of each parent div and reset the colors when a new parent div is encountered. Hopefully that explanation makes sense. Here is an example: ...

jquerycss-selectorsjquery-traversing

The folders containing the HTML and CSS files failed to load properly

Okay, hear me out. I've got this code snippet in my CSS file: html { background: url("../img/bg.png") repeat fixed 100%; margin: 0; padding: 0; border: 0; } And here's how my index.php includes the CSS: <link rel="stylesheet ...

phphtmlcss

Numerous Toggle Switches Integrated in CSS Styling

My goal is to create multiple toggle switches on one page, but I'm encountering an issue where creating a new switch ends up controlling the first switch I created. The toggle switch I want to make functions like an on and off switch on an iPhone. Her ...

htmlcsstoggle

Issues with JQuery draggable functionality not functioning as expected

Is there a way to drag bookmarks on a line and have the text above them change to show the percentage from the right edge? Here is a quick snippet that achieves this, along with a demonstration in this fiddle. Check out the code below: HTML <div id=& ...

jqueryhtmlcssdraggable

How can CSS OpenType be used to substitute a specific letter throughout the text with a character from Stylistic Set 1, while ensuring the rest of the letters remain

Our Objective: We aim to swap out the two-story lowercase "g" with the single-story version across our entire website text. https://i.sstatic.net/mqpP9.png Challenge: The Rotunda font we use (Rotunda from TipoType Foundry) includes a Stylistic Set 1 ...

csstypographyopentype

Combining several SVG images into a single file disrupts the text

In my web app, I utilize SVG files to visually map different types of data onto our experimental dataset. Each SVG file corresponds to a specific type of data and is displayed individually on most pages of the site. These maps include tooltips on nodes for ...

javascriptjquerycsssvg

Utilizing AJAX, a PHP script creates an HTML table that allows users to easily perform actions such as deleting, updating

I'm a beginner in the world of ajax and I am eager to utilize it with php in order to develop a table that can be edited by users directly on the webapp interface. Here's my current progress... PHP class genTable{ public function table1(){ ...

javascriptphpjquerymysqlajax

Altering the appearance of a div following the execution of a header redirect

Essentially, I have a SignUp and LogIn form that pops up when activated by a button. See code below: LogIn <!-- Popup LogIn --> <div class="bg-modal"> <div class="modal-content"> <div class="close& ...

javascriptphphtml

Currently, I am working on a project and encountering an issue with html2canvas

const handleDownloadImage = async () => { try { const canvas = await html2canvas(cardRef.current); console.log(cardRef.current); const imageData = canvas.toDataURL("image/png"); setImageUrl(imageData); } catch ( ...

javascripthtmlreactjs

utilize the jQuery method getJSON() for object retrieval

Can anyone help me with my code that looks like the following? <script type="text/javascript"> $(document).ready(function () { var setting = { check: { enable: true }, data: { simpleData: { enable: true } ...

javascriptjqueryjson

What is the solution for fixing the CSS issue in the Woocommerce checkout process?

Looking for guidance on fixing issues with the checkout pages on woocommerce. Specifically, the billing info page background should be white and the payment page boxes need to be larger. Check out this image here for reference Any assistance would be great ...

csswoocommerce

By simply clicking a button, you can input a value into a field without the need for the page to refresh

Can someone please help me figure out how to insert a specific value into an input field without refreshing the page? I have tried the following code but it doesn't seem to work. Basically, when I click the button, I want the value "1234567" to be aut ...

javascriptjqueryhtml

iOS 8 requires the use of a numeric keyboard for entering passwords

Is there a way to ensure that iOS displays a numeric keyboard for my password field? Currently, I am utilizing the following code: <input type="password" pattern="\d*" name="pass"/> This method was effective in iOS7, however, it seems that the ...

htmliosmobilekeyboardios8

The form submission is failing due to a specific AJAX condition not being met

On my form submission page, I am trying to call a function at the time of form submission, including an AJAX request. The form submission should occur or not based on a condition in the AJAX response message. The AJAX message can have two values: 1 and 0, ...

phpjqueryhtmlajax

Submitting Forms in Django with AJAX for Seamless User Experience

As a newcomer to Python, I might be missing an easy fix. I'm attempting to create a registration form using Jquery with Django. I've been following this tutorial When I click the button, I see a success message in the alert, but nothing gets sa ...

javascriptjquerypythonajaxdjango

Unable to insert text into JEditorPane using text/html format

In my class, I am using a JEditorPane to display text that needs to support HTML. When I try to add text to the pane by setting the content type to HTML and then using setText(), nothing appears on the pane. The issue seems to be with setting the content ...

javahtmlswingjeditorpane

The function cannot be applied to d[h] due to a TypeError

Having some trouble with my code here. I'm trying to set up routes to display a gif using CSS animation when the page is loading. The gif shows up initially, but then everything fades out and the gif remains on the page. Additionally, I'm getting ...

javascriptcssangularjs

The 'If' Statement in Wordpress

In my customized WordPress theme, I have successfully created an author.php page that retrieves all member information from the database. I am looking to implement an if statement before fetching the details, which will only display the information if the ...

phpmysqldatabasewordpressfunction

multiple executions of mouseup() within a mousedown() event

$("#canvas").on("mousedown", function(e){ var X1 = (e.pageX - this.offsetLeft) - 8; var Y1 = (e.pageY - this.offsetTop) - 8; $("#canvas").on("mouseup",function(e){ var X2 = (e.pageX - this.offsetLeft) - 8; var Y2 = (e.p ...

javascriptjquerymouseevent