CSS Layout help request for ubercart product

By mister pierre on 5 Jul 2015 at 15:22 UTC

I'm looking for what I assume is css help on displaying ubercart attribute options horizontally instead of vertically. Here's some images displaying what I'm looking for. I'm using the option images module to display the thumbnails alongside the radio button options. Pardon the hasty photoshop.

Current layout: Image Here

Desired layout: Image Here

Can anyone assist me?

Thank you!

Comments

A couple of possible

nevets commented 5 July 2015 at 16:00

A couple of possible approaches (if you can provide a link, it is possible to provide more detail)

There is likely an div that serves as a wrapper to the radio checkboxes.

You could either apply css to make the div like display: inline-block or float: left

Here's a link to a test

mister pierre commented 5 July 2015 at 19:17

Here's a link to a test product: http://misterpierrefashion.com/content/test-product

Please let me know any suggestions that occur to you! Thanks!

Adding the following css

nevets commented 5 July 2015 at 20:15

Adding the following css should do the trick

#edit-attributes-75 .form-item {
  display: inline-block;
  width: 220px;
}

The width part is optional but using it would allow them to lineup in columns. The 220px is a guess, it probably needs to be adjusted bases on the longest label.