Display movie details in a responsive column layout that condenses into a single column

Question

Display movie details in a responsive column layout that condenses into a single column

I'm having trouble displaying movie information on a website due to CSS and HTML issues. My goal is to align the title (Director:, Cast:, etc) with the first item in the list, and have all subsequent items follow below. I initially tried using a definition list but struggled with making it responsive using CSS. Currently, I am using a table, but I am starting to think a regular list might be more suitable.

Here is my sample code. It looks how I want it to when the window is wide enough, but breaks when viewed on mobile devices (specifically, the Cast: columns should become one column).

Any assistance would be greatly appreciated as I have been working on this for several months now.

Below is my HTML:

<div class="movieinfo">
    <table>
      <tr class="spaceUnder">
        <td class="workheader">Director:</td>
        <td>John Carney</td>
      </tr>
      <tr class="spaceUnder">
        <td class="workheader">Writer:</td>
        <td>John Carney</td>
      </tr>
      <tr>
        <td class="workheader">Cast:</td>
        <td>Keira Knightly</td>
        <td class="spacedRight">James Corden</td>
      </tr>
      <tr>
        <td></td>
        <td>Mark Ruffalo</td>
        <td class="spacedRight">CeeLo Green</td>
      </tr>
      <tr>
        <td></td>
        <td>Hailee Steinfeld</td>
        <td class="spacedRight">Catherine Keener</td>
      </tr>
        <td></td>
        <td>Adam Levine</td>
    </table>
</div>

Furthermore, here is my CSS:

.movieinfo {
    color: #333333;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 300;
    padding: 20px;
    background-color: rgba(255,255,255,.7);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
}

html css mobile html-lists html-table

Answer 1

Answer №1

Your table layout could be improved by reevaluating how you are structuring the data, especially when it comes to displaying cast names in separate cells. It's important not to let design preferences dictate how information should be marked up. Consider utilizing appropriate HTML elements like <th> for header cells:

<div class="movieinfo">
    <table>
        <tr class="spaceUnder">
            <th>Director:</th>
            <td>John Carney</td>
        </tr>
        <tr class="spaceUnder">
            <th>Writer:</th>
            <td>John Carney</td>
        </tr>
        <tr>
            <th>Cast:</th>
            <td>
                <ul>
                    <li>Keira Knightly</li>
                    <li>James Corden</li>
                    <li>Mark Ruffalo</li>
                    <li>CeeLo Green</li>
                    <li>Hailee Steinfeld</li>
                    <li>Catherine Keener</li>
                    <li>Adam Levine</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

If you prefer to display the cast in columns, you have two options based on whether you want a vertical or horizontal arrangement. For vertical alignment, consider using columns:

.movieinfo ul {
    -webkit-columns: 3 10em;
    -moz-columns: 3 10em;
    columns: 3 10em;
}

NOTE: When specifying both a width and number in the columns property, the number represents the maximum columns displayed. Adjust column gap with column-gap.

For a more detailed example, see: http://jsfiddle.net/owdz2m0m/

To utilize floats for horizontal placement:

.movieinfo ul > li  {
    float: left;
    width: 10em;
}

NOTE: Limiting columns with floats requires setting the max-width of the parent element (in this case, the ul) to "column width * max number of columns." To limit to 2 columns, use

.movieinfo ul { max-width: 20em; }

For a comprehensive example, visit: http://jsfiddle.net/tr9e8bmv/

Incorporating media queries allows for responsive adjustments based on screen size in either layout approach.

Answer 2

Your table layout could be improved by reevaluating how you are structuring the data, especially when it comes to displaying cast names in separate cells. It's important not to let design preferences dictate how information should be marked up. Consider utilizing appropriate HTML elements like <th> for header cells:

<div class="movieinfo">
    <table>
        <tr class="spaceUnder">
            <th>Director:</th>
            <td>John Carney</td>
        </tr>
        <tr class="spaceUnder">
            <th>Writer:</th>
            <td>John Carney</td>
        </tr>
        <tr>
            <th>Cast:</th>
            <td>
                <ul>
                    <li>Keira Knightly</li>
                    <li>James Corden</li>
                    <li>Mark Ruffalo</li>
                    <li>CeeLo Green</li>
                    <li>Hailee Steinfeld</li>
                    <li>Catherine Keener</li>
                    <li>Adam Levine</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

If you prefer to display the cast in columns, you have two options based on whether you want a vertical or horizontal arrangement. For vertical alignment, consider using columns:

.movieinfo ul {
    -webkit-columns: 3 10em;
    -moz-columns: 3 10em;
    columns: 3 10em;
}

NOTE: When specifying both a width and number in the columns property, the number represents the maximum columns displayed. Adjust column gap with column-gap.

For a more detailed example, see: http://jsfiddle.net/owdz2m0m/

To utilize floats for horizontal placement:

.movieinfo ul > li  {
    float: left;
    width: 10em;
}

NOTE: Limiting columns with floats requires setting the max-width of the parent element (in this case, the ul) to "column width * max number of columns." To limit to 2 columns, use

.movieinfo ul { max-width: 20em; }

For a comprehensive example, visit: http://jsfiddle.net/tr9e8bmv/

Incorporating media queries allows for responsive adjustments based on screen size in either layout approach.

Answer 3

Answer №2

In my opinion, utilizing @media queries is the way to go. Consider implementing something similar to this:

@media only screen and (max-width: 640px){ your style }

Additionally, you could structure your HTML using <dl> and <ul>

Check out the demo here

If you adjust the window size in the demo, you will notice how the layout changes from 2 columns to 1 column. See Screen 1, Screen 2

Answer 4

In my opinion, utilizing @media queries is the way to go. Consider implementing something similar to this:

@media only screen and (max-width: 640px){ your style }

Additionally, you could structure your HTML using <dl> and <ul>

Check out the demo here

If you adjust the window size in the demo, you will notice how the layout changes from 2 columns to 1 column. See Screen 1, Screen 2

Display movie details in a responsive column layout that condenses into a single column

Answer №1

Answer №2

Similar questions

Adding a class to the following DIV and smoothly transitioning the current one out can be achieved using a dynamic number of items in multiple instances

Learn how to retrieve the current input value from a repeating form using Jquery

Issue with overflow-auto not displaying scroll bar

Determine the exact scroll position needed to reveal the element when scrolling in reverse

Tips on halting the current animation and modifying styles upon hovering

Remove the background color from a semi-transparent circular CSS div when it is being dragged

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

Can using $.ajax to submit a form be considered contradictory?

In Safari, an animated link does not respond to pointer-events, making it unclickable

Elevation on Tab button from the upper side

Steps to transfer the content of a label when the onclick event occurs

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

How can I add divs to an HTML page with a Javascript animated background?

Leverage AJAX variables directly within the HTML page

Space in the middle of a body and a div

Transitioning React Hover Navbar Design

Avoid page refreshing when retrieving data using PHP and AJAX

Use a JavaScript function on identical IDs

What is the best way to eliminate the bottom border of an input field?

I came across a wlwmanifest.xml file while browsing through the source directory of my website