Having trouble showcasing two unordered lists side by side on a single line

In my Magento Go store, I am showcasing products using CSS only. Currently, the loop is set to display 5 products in a row and then close the <ul> tag. However, if there are more products, a new <ul> element is created. My fixed width only allows for 3 <li> items on each row. The issue is that on the second row, only two items are displayed before the next <ul> moves to the next line. I want all rows to have 3 items displayed.

I have attempted solutions like adding inline-block and vertical align-top to the <ul>, as well as ensuring list items are vertically aligned to the top, using float:left and display:inline-block, but haven't been successful in resolving this issue.

If anyone could provide assistance, I would be extremely grateful. Here is the URL:

Kind Regards, Ahmar

htmlcss

Answer №1

.widget ul.products-grid{
  display:inline !important;
  float:none !important;
}
.widget ul.products-grid:after{display:none !important;}

Answer №2

In Magento, is it possible to configure the number of items displayed on a page? I am not very familiar with magentocommerce, but it seems like this can be adjusted.

It's unfortunate that javascript cannot be included in the code. However, using jQuery could potentially solve the issue:

<script>
var newUl = $('<ul class="products-grid">');
$('.widget-products > ul.products-grid').each(function() { 
       $(this).find('li.item').each(function() { 
            newUl.append($(this))
       });
       $(this).remove();
    });
$('.widget-products').append(newUl);
</script>

Remember, there may be ways to include JavaScript so keep searching for solutions :)

How to Add Custom JavaScript in Magento Go

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

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml

What is the best way to achieve maximum clarity in a div element while adjusting opacity?

Is there a way to have a div with an opacity of 40%, but make the text inside the div show with an opacity of 100%? #box { Background-color:#000; Opacity:40%; } ...

htmlcss

Content within the Iframe is in the process of loading, followed by

Exploring the code below: <iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> Is it a possibility that the ifra ...

javascripthtmliframeonload

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

javascripthtmlevernote

jQuery preventing form submission after returning false

There's a small issue that I need help with. After submitting the form and receiving a false response, it prevents resubmission. For example, if a user forgets to input their name, they will see an error message asking them to do so. However, the u ...

phpjqueryhtmlajax

Redirecting to the homepage of our website automatically

Today I received a new project assignment. The task involves creating a website intro and running it on an HTML page, which I am familiar with how to do. I have successfully completed this part of the project. However, I now need to ensure that once the ...

htmlflash

Verify the presence of a ::after pseudo-element on a scraped webpage

I am facing a dilemma with a checkbox on my website that is described in the following HTML code: html = <div class="checkbox checkbox-success checkbox-block"> <input type="checkbox" data-false-value="'0'&qu ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

When BeautifulSoup is utilized, HTML tags are stripped of their opening and closing components

Encountered a problem while using BeautifulSoup to scrape data from the website www.basketball-reference.com. Although I have used BeautifulSoup successfully on Bballreference before, I am puzzled by what is happening this time around (admittedly, I am sti ...

pythonhtmlparsingweb-scrapingbeautifulsoup

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

javascripthtmlangularionic-frameworkionic2

When using Ruby on Rails, the image_tag method generates two <img> tags within my HTML code

I recently started learning Ruby on Rails and encountered an issue with resizing images using CSS. After replacing an image field with the Ruby image_tag, I noticed extra blank space below the image. Upon inspecting the element, I found two tags for the s ...

ruby-on-railshtml

Reduce the line length for better readability

Looking for a way to make a button with flexible width while allowing text to wrap to 2 lines for minimum button size? Check out the examples below: To keep the button width small, even short words should wrap to 2 lines: My Button If there's a ...

css

I have decided to integrate Laravel with Vite for building CSS and JS. However, when I attempted to run `npm run dev`, it appeared to execute but was accompanied by an error in the background that

Hi there, I'm new to Laravel and I've created a small app that primarily uses CSS and JS scripts. Everything was working fine in my development environment, so I decided to push it to a production server. However, after installation, my code does ...

javascriptcsslaravelnpmvite

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

javascripthtml

Ensure that the text inside the button does not exceed its boundaries (utilizing Bootstrap v4)

My current code snippet appears below. <div class="col-xl-2 col-lg-12"> <button class="btn btn-secondary w-100" value=1>But.</button> </div> <div class="col-xl-4 col-lg-12"> <button cla ...

htmlcsstwitter-bootstrapbootstrap-4

Looking for tips on resolving issues with the bootstrap navigation bar?

Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...

javascripthtmlcssbootstrap-4

Split the cards into 2 columns vertically on smaller screens, positioning the header above both columns

I am having issues with my cards breaking incorrectly on wide screens. I would like to display 4 larger cards followed by 2 columns of smaller cards, all with the correct header above them. Here is the link to my jsfiddle: jsfiddle.net/ad5qa/41tbgk75/ I ...

htmlcsstwitter-bootstrapbootstrap-5

Tips on how to showcase various information in distinct tabs using VueJS

I am currently working on a website project utilizing the VueJS framework and Vuetify template. My goal is to showcase different content under separate tabs, however, I'm encountering an issue where the same content is being displayed in all three tab ...

javascripthtmlvue.jstabsvuetify.js

Translate a portion of a painting by utilizing context.putImageData()

I am attempting to gradually fill a canvas with pieces of the original image. To achieve this, I need each square of the image to be filled in iteratively on the canvas. To optimize performance, my approach involves rendering the original image onto an of ...

javascripthtmlcanvas