Creating a weather format user interface in HTML can be accomplished by following a few

I am currently utilizing the open weather API to showcase weather data, however, I am facing difficulties in arranging the data in a format similar to the one shown below.

Example output:

I attempted to present the data in the following structure:

       <div class='row'>
          <div class='col-md-3'> 
             <p> Wednesday </p>
             <p> ... </p>
          </div>
          <div class='col-md-3'> 
             <p> Thursday </p>
             <p> ... </p>
          </div>
       </div>

However, the layout is appearing stacked on top of each other instead of side by side on mobile screens. How can I resolve this issue?

htmlcssbootstrap-4

Answer №1

If you want to achieve this layout, you can utilize CSS grid. This solution should help you with your issue. 

h5 {
  color: grey;
  text-transform: uppercase;
}

.grid-content {
  display: grid;
  grid-template-columns: repeat(7 , minmax(32px, 1fr));
  gap: 2px;
  place-content: center;
}
.grid-content div {
  padding: 10px;
  background: #ddd;
  text-align: center;
}
<h5>Daily</h5>
<div class="grid-content>
  <div>
    <h5>MOn</h5>
  </div>
  <div>
    <h5>Tue</h5>
  </div>
  <div>
    <h5>Wed</h5>
  </div>
  <div>
    <h5>MOn</h5>
  </div>
  <div>
    <h5>THR</h5>
  </div>
  <div>
    <h5>FRI</h5>
  </div>
  <div>
    <h5>SAT</h5>
  </div>
</div>

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

Adjust the color of static hyperlinks based on the background color

Is there a way to dynamically change the color of my fixed side links based on the background color when scrolling? I attempted to use CSS mixed-blend-mode: difference, but it does not provide the level of control I need. Therefore, I am looking to achieve ...

javascripthtmljquerycss

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflowhttps://i.sstatic.net/dhllv.png I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb ...

htmlcssangular

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

JavaScript file to run with npm start: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; ReactDOM.render( <R ...

javascripthtmlreactjsexpressjsx

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

Ways to align various paragraphs within a single Bootstrap row

Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout. <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4 ...

htmlcsstwitter-bootstrap

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

position property in div element disrupts slider functionality

I've been working on incorporating a simple slider into my website and stumbled upon this example on jsfiddle My goal is to have the slider positioned "relative" within my site, but when I change the CSS to position: relative;, the slider no longer ...

javascriptjqueryhtml

Certain visual elements fail to display properly within the web browser

I have a website with 5 pages (e.g. page1.html, page2.html, etc.), each having its own .css stylesheet. Oddly, some pages display images correctly while others do not. It seems like the issue might be with the specific pages or files, as using the same ima ...

htmlcss

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Being new to Bootstrap, I have taken the time to explore What is Bootstrap? as well as http://getbootstrap.com/. From what I understand so far, Bootstrap is a CSS framework that aids in creating responsive designs that can adapt to various devices. Essent ...

javascripthtmlcsstwitter-bootstrap

How can you ensure a line stays fixed to the bottom of a box regardless of the text size in SCSS and HTML?

I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is: .active-tab:after { content: ''; display: inline-block; height: 4px; width: 100px; right: -7px; background-color: ...

htmlcsssass

Provide a value for a secondary select option parameter

I need to retrieve the university ID for use in another select option, which will display my college list under a specific university from a MySQL database. However, I am struggling to find the right approach. I want to pass fetch.university_id as a parame ...

htmlmysqlangularjsservletsionic-framework

Is there a way to extract content from an HTML <span id> using Python, Selenium, and BeautifulSoup?

I've been working on a project to create a web scraping tool using Python, Selenium, beautifulSoup, and pandas to generate a .csv report. Unfortunately, I'm facing an issue with extracting the "data-date" text from the HTML snippet below. Specif ...

pythonhtmlpandasseleniumbeautifulsoup

Switch up the animation based on the state in AngularJS

In my AngularJS application, I have implemented CSS animations for transitioning between states. The animations involve sliding content from left to right with specific timings and transforms. .content.ng-enter, .content.ng-leave { -webkit-animation-t ...

javascriptcssangularjsanimation

execute a function upon selecting a radio button

Below is the HTML code that includes two radio buttons. The default checked button is the "lease" option. <input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type ...

javascriptjqueryhtmljquery-events

Swapping out a <DIV> element following a specified duration

Looking to swap out DIV-A with DIV-B on a landing page after 10 seconds. After some research, it seems like JQUERY is the best option, but I'm unsure about how to proceed. Most solutions involve cycling through DIVs or replacing them on a button clic ...

jqueryhtmlreplace

Angular offers a simple solution for adding events to all "p", "span", and "h1" elements easily

I am attempting to implement a "double click" event on all text HTML elements (p, span, h1, h2, etc.) across all pages in order to open a popup. I believe there should be a more efficient way than adding (dblclick)="function()" to each individual element. ...

htmlangularevents

How to eliminate margins in Django's easy_pdf module

For generating PDF from HTML, I utilize easy_pdf in conjunction with xhtml2pdf. Below is a brief example: In view.py from easy_pdf.rendering import render_to_pdf_response context = dict({'user_company': 'test'}) template_name = "pdf ...

pythoncssdjangopython-3.xdjango-templates

The br tag in HTML cannot be utilized in conjunction with JavaScript

I am currently working on a project involving HTML and JavaScript. I have a "textarea" where data is inserted into the database upon pressing the "Enter key." However, I am encountering two issues: Currently unable to save data like "Lorem Ipsum" (the ...

javascripthtmljquery

Make Jekyll process HTML files even without front matter by using the Knitr tool to add front matter to the HTML files

I am currently utilizing RMarkdown in combination with knitr to produce various HTML documents. After uploading these documents to GitHub, Jekyll is utilized for rendering the files onto GitHub pages. My objective is straightforward: I want the index.html ...

htmlr-markdownjekyllknitr

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas