Separating text into rows with CSS styling

Question

Separating text into rows with CSS styling

My wordpress/woocommerce website has a plethora of product options. In the cart, these options are currently displayed as a continuous text, which can be challenging to read. I am wondering if it is possible to use CSS to structure these options into neat rows, making them more organized and easier to navigate.

I am looking for a convenient solution, preferably using CSS, but I am open to other suggestions as well.

Please add the following product to your cart LINK. The "Add to Cart" button is labeled as "LÄGG TILL I KUNDVAGN" in my language. Then proceed to the CART.

In the cart, under the title and next to the product image, you will see the type of option in regular text, followed by a colon and the chosen option in bold text. For example, the first two options might appear as: "Width: 5 (480 mm) Height: 5 (480 mm)".

However, I would like these options to be displayed in separate rows, like this:

Width: 5 (480 mm)

Height: 5 (480 mm)

And so on.

Is there an easy way to achieve this with CSS or any other method? Your help is greatly appreciated!

html css wordpress woocommerce

Answer 1

Answer №1

to have all the items stacked together, use

.variety{ 
 display: flex;
 flex-direction: column;
}

Answer 2

to have all the items stacked together, use

.variety{ 
 display: flex;
 flex-direction: column;
}

Answer 3

Answer №2

The solution to this problem involves utilizing the power of flexbox. Implement the following CSS code to effectively address the issue at hand:

.tm-cell {  /*Alternatively, you can modify your selector*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Answer 4

The solution to this problem involves utilizing the power of flexbox. Implement the following CSS code to effectively address the issue at hand:

.tm-cell {  /*Alternatively, you can modify your selector*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Answer 5

Answer №3

When examining the HTML code, you will notice that the div encompassing the entries is defined as:

<div data-uniqid="58ede56aeca6c6.03775072" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-6 cpf-type-select prod-height-div">

The width of its class is initially set to 50%, but you can adjust it to 100% using this CSS snippet:

.tm-extra-product-options .col-6, 
.tm-extra-product-options .tm-cell.col-6, 
.tc-cell.tc-col-6, .tc-col-6 {
    width: 100% !important;
}

Answer 6

When examining the HTML code, you will notice that the div encompassing the entries is defined as:

<div data-uniqid="58ede56aeca6c6.03775072" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-6 cpf-type-select prod-height-div">

The width of its class is initially set to 50%, but you can adjust it to 100% using this CSS snippet:

.tm-extra-product-options .col-6, 
.tm-extra-product-options .tm-cell.col-6, 
.tc-cell.tc-col-6, .tc-col-6 {
    width: 100% !important;
}

Separating text into rows with CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

How to toggle the display of a div by its id using index in Javascript

What key element is not included in this code?

Conceal a single column on mobile devices using Bootstrap 4

Issues with ASP.net CSS not functioning properly in Internet Explorer, although it works fine in Firefox, Edge, and

"Eliminate specific time increments like days, hours, and minutes when the timer reaches zero in a jQuery countdown

Can you include text within the border of a table?

JavaScript problem with hovering action causing additional buttons to appear

Using HTML5 canvas to design a customizable measuring tool

Learn how to prevent a button from being clicked until a different button is activated using jQuery

Encountered an error 'Unexpected token ;' while attempting to include a PHP variable in a jQuery AJAX call

How can one get rid of a sudden strong beginning?

What is the proper way to include a forward slash at the end of my web addresses?

The Challenge of Styling Scrollbars with CSS

Display information from a .js file onto an HTML webpage

Adjust the size of the logo as the user scrolls

Retrieve the value of the second checkbox depending on the selection made in the first checkbox within a .jqGrid

What is the best way to retrieve the ids of child divs that are directly beneath a single parent div?

Is there a way to automatically open an expand/collapse section when linking to it?

Why isn't my background image appearing on the screen?

What is the process for selecting a radio button using Selenium WebDriver?