Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Stu Cowley
Stu Cowley
26,287 Points

'Real World' Project Problem. Trying to Create a List of Opening Hours

Hi there!

I would post this up on Stackoverflow.com but the answers I have been getting are either too vague, or difficult to understand, so I thought I would just post my question up on Treehouse where the community is much more user friendly.

Basically I'm trying to create a list of inline opening hours of a cafe that I'm building for them, i.e. Monday 9:00am - 5:00pm.

At first I thought that this would be easy, but after nearly a week of trying to get this this to work I just can't seem to get it how I want. It either works great on the mobile and looks terrible on a desktop display, and vice versa.

At first I created a inline list, but it would break terribly at each break point. Then I used a grid system, and then once again it would break, thankfully I understand why it would break.

Now nearing on a week, I am still yet to get this what I thought was going to be a simple inline list to work. Does anyone have any advice/Treehouse course/tutorial, etc on how I can get this working. I might tag Guil Hernandez as he would no doubt have a brilliant idea up his sleeve ;)

Any advice given would be greatly appreciated!

Thanking you in advance

Stu :)

4 Answers

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

How are you wanting to display the list?

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

What about if you display the list items as inline-block?

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

yeah, just display inline-block like Tiffany said, or float left like this:

<ul>
    <li>Mon: 09:00 to 17:00</li>
    <li>Tue: 09:00 to 17:00</li>
    <li>Wed: 09:00 to 17:00</li>
    <li>Thu: 09:00 to 17:00</li>
    <li>Fri: 09:00 to 17:00</li>
</ul>

ul {
    list-style:none;
}

li {
    display:block;
    float:left;
    margin-right:5px;
}
Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey guys,

Thank you for the advice. I have gone about using inline-block but I have had a lot of issues with the layout breaking on mobile devices.

Here is a screen grab of what I'm looking to achieve (apart from the green and yellow dots).

[Screen Shot](alt text

I have had a look through the code for this example and it looks as if it is achieved by using <div> elements.

I'll keep trying to find a fix and searching through Google.

Stu :)