CSS and HTML Program Overview Layout Design (Grid, Scrollable)

We are currently developing a website for our upcoming event. The website includes a program in the form of a timetable, with events taking place at 3 different locations.

For the desktop version, we want the locations to be displayed at the top and the times on the left. In the mobile version, we need the locations on the left and the times at the top, with horizontal scrolling capability. Additionally, the breaks between events should span across multiple locations.

Does anyone have recommendations for a template that can achieve this layout, preferably using a grid system? Here is a Design Screenshot for reference.

Thank you in advance for any assistance you can provide. We have explored various templates such as this one: Timetable Template, but encountered issues with dragging breaks across multiple blocks due to its reliance on lists.

htmlcssgridscrollabletimetable

Answer №1

To create a layout using CSS grid, you can follow this example:

Location
Event 1
Breakfast
Event 2
Event 3
Break
Event 4
body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  width: 100vw;
  height: 100vh;
}

@media (orientation: landscape) {
  #location {
    grid-area: 1 / 1 / 4 / 13;
    background-color: rgba(40, 174, 181, 0.5);
  }
  /* Add styling for other grid areas */
}

@media (orientation: portrait) {
  #location {
    grid-area: 1 / 1 / 13 / 4;
    background-color: rgba(40, 174, 181, 0.5);
  }
  /* Add styling for other grid areas */
}

You can adjust the media break points by setting specific values like so:

@media (min-width: 48em) { /* Styles for minimum width of 48em */ } @media (min-width: 62em) { /* Styles for minimum width of 62em */ }

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

"Exploring the intricacies of jQuery's timing and cycling

I'm looking to create a brief newsflash feature on my website that will cycle through some text elements by fading them in and out... Here's what I have so far: $('.text01').hide().fadeIn('slow').delay(3000).fadeOut('sl ...

jquerycyclehtmltiming

Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

I have an unordered list with icons styled using Twitter Bootstrap 3. The Carme font from Google Fonts is used for normal text, and works well in that context. However, when I add icons to the unordered list using BS3, the font-family of that particular ...

htmlcsstwitter-bootstrap

Modify the content of the div upon clicking the link or button

Currently, I am working on a website that consists of a content div with the id "content" and a sidebar div with the id "sidebar". My goal is to dynamically update the content within the content div whenever a link or button in the sidebar is clicked, all ...

phpjqueryhtml

Reading a variable within the fileReader onload function in TypeScript

When attempting to upload an image by reading a base64 path using file reader, I initially encountered issues with variable updates outside of the FileReader onload function. Here is the original code snippet: const reader: FileReader = new FileReader(); ...

htmlangulartypescriptfilereader

Innovative form elements for enhanced user interaction

I've been utilizing the jsFiddle below to achieve my desired outcome, but I'm looking to assign a unique ID for each addition. Any suggestions or tips would be greatly appreciated. Thank you! http://jsfiddle.net/nj4N4/7/ <span>Width: < ...

javascriptjqueryhtmlcssdynamic

How can HTML be assigned to a PHP variable without losing its formatting?

My goal is to store HTML in a variable in PHP to help with modularizing my code. $html_block1 = "<div class='item'> <img src='chicago.jpg' alt='Chicago'> <div class='carousel-caption&ap ...

phphtmlvariablesmarkup

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

htmlangularjsionic-framework

When transferring table data to a new component, the alignment of the table data does not match the headers

Looking to create a basic table with separate components for headers and data. Using an ngFor loop to pass data between components: <table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> < ...

javascripthtmlangularhtml-table

Utilizing Blurred Images in the Header

I want to create a blurred background image with text and buttons on top of it, but the blur effect is also affecting the text and buttons. I'm not sure how to keep them separate. header { background: url("street-238458.jpg") no-repeat center; ...

htmlcssbootstrap-4

What is the process for creating this image using HTML and CSS?

Looking to style an image using HTML and CSS. This is what I attempted: <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span> However, the result doesn't ma ...

htmlcss

Placing a button above another element using CSS styled components

I'm attempting to make a button overlap and be positioned in a specific location on top of a search bar. The current appearance is not what I desire, as the button seems to shift back to its original position when adding a :hover element after applyin ...

cssreactjsjsxcss-positionstyled-components

The CSS border-radius feature shapes the corners without affecting the background

When I apply a 15px rounded border to a div, the border appears rounded on the outside but the corners where the border meets the background remain square. Here is an example: http://jsfiddle.net/BQT5F/1/ I tried using the background-clip property to add ...

cssrounded-corners

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

Showcasing JSON data on an HTML site

Having trouble displaying my JSON response on an HTML page using jQuery and AJAX. Here is my code: JSON RESPONSE { "result": [ { "list_id": "3", "state": "yuoio", "zone": null, "name": " T. Oji", "phone": "0828 ...

jqueryhtmljsonajax

Align list items in the center horizontally regardless of the width

I have created this container element: export const Container = styled.section<ContainerProps>` display: flex; justify-content: center; `; The current setup is vertically centering three list items within the container. However, I am now looking ...

javascriptcssreactjsnext.js

What steps can I take to modify this script in order to display one image on top of another?

I am working on a script that creates cross fades for images. However, I have some text images that I would like to appear as fading in on each image transition. This means that when the first image appears, it will pause, then the text image will fade i ...

jqueryhtmlfadein

Navigation list not displaying content on mobile devices as expected

Seeking assistance to resolve an issue with a responsive navigation bar implementation on my blog. Despite the presence of links in the navigational menu at 768px, they are not visible when inspected using Chrome. Here is an image for reference: Please See ...

javascripthtmljquerycssvisual-web-developer-2010

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

Insert more text following the existing content

Is it feasible to include text using pseudo-elements ::after or ::before to a specific word? For example, I am interested in placing a PDF icon consistently beside the word "Download". [PDF] Download Alternatively, are there other methods available? ...

csspseudo-element