What are some ways I can ensure my divs are fully responsive on all devices

Why are my three transparent divs in the center of the page not functioning properly when resizing the screen to md, sm, and xs? The one on the left is offset to the left. How can I make them adaptive? They are meant to be centered next to each other, but when I resize, the one on the left does not take up the entire row. What am I missing?

<div class="container">
  <h1 class="text-center ">ZeroDegrees</h1>
  <h4 class="text-center">Local Weather Application</h4>
  <div id="loc" class="text-center ">Miami FL US</div>
  <div id="date" class="text-center"></div>
  <div id="icon" class="text-center">ICON</div>
  <div class="desc text-center">
    <h4>Clear Sky</h4>
  </div>

  <div id="data" class="row text-center ">
    <div id="temp" class="col-lg-2 offset-3  col-xs-12 transparent text-center box ">
      Temperature: 89 F
    </div>
    <div id="hum" class="col-lg-2 col-xs-12 transparent box ">Humidity: 50%
    </div>
    <div id="wind" class="col-lg-2 col-xs-3 transparent box">Wind: 5mph
    </div>
  </div>
</div>

Answer №1

<div class="container">
  <h1 class="text-center">ZeroDegrees</h1>
  <h4 class="text-center">Local Weather App</h4>
  <div id="loc" class="text-center">Miami FL US</div>
  <div id="date" class="text-center"></div>
  <div id="icon" class="text-center">ICON</div>
  <div class="desc text-center">
    <h4>Clear Sky</h4>
  </div>
  <div id="data" class="row text-center">
    <div id="temp" class="col-lg-4 offset-3 col-md-4 col-sm-4 col-xs-12 transparent text-center box">
      Temperature: 89 F
    </div>
    <div id="hum" class="col-lg-4 col-md-4 col-sm-4 col-xs-12 transparent box">Humidity: 50%
    </div>
    <div id="wind" class="col-lg-4 col-md-4 col-sm-4 col-xs-12 transparent box">Wind: 5mph
    </div>
  </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

Struggling to show the AJAX response text in the HTML console

I am troubleshooting an issue with my ajax response text, but it keeps coming back as undefined. Here is the code I am using: $(document).ready(function() { var responseData = $.ajax({ type: "GET", url: "https://raw.githubusercontent.com/Theru ...

Unable to pass props to component data using Vue framework

I'm facing an issue with passing props in my component to the same component's data object. For some reason, I'm only receiving null values. Does anyone have any suggestions on how I should approach this problem? It seems like my Vue compone ...

Can the <container> block be positioned beneath the <header> block?

header { background: blue; color: white; width: 100%; } .container { background: green; text-align: center; width: 100%; height: 100px; transform: skew(0, -10deg); color: white; position: relative; top: 55px; } .container .home{ p ...

Completely enlarge this inline-block CSS div scan-line

I am looking to create a unique scan line effect that gradually reveals text from left to right, mimicking the appearance of a cathode-ray burning text into a screen's phosphors. The concept involves sliding across black rows with transparent tips. Y ...

I'm having trouble displaying my background image unless I specifically set the height in pixels or viewport height

I have been working with ReactJS and on my main page container, I am setting a background image like this: .opening-container { background-image: url("../../images/sadaqashdbg.png"); background-position: center; background-size: cover; ba ...

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

Receiving time slots on a bootstrap schedule

I recently developed a calendar using Bootstrap that allows users to select a start date and automatically sets the end date within a 7-day range from the chosen start date. However, I am facing a challenge in enabling users to also pick minutes along with ...

- "Queries about Javascript answered with a drop-down twist

Having some trouble with setting up a straightforward FAQ dropdown feature. Could someone lend a hand and see what might be going wrong? Appreciate your help! CSS #faqs h3 { cursor:pointer; } #faqs h3.active { color:#d74646; } #faqs div { height:0; o ...

Both Fluid and Fixed layouts offer different advantages and disadvantages for website

Is there a way to position two divs side by side, where one div is 75% width and the other is 25% width? Additionally, can we place another div on top with margin:0 auto; to center the content of the page with a width of 986px? Here is an example code sni ...

Having difficulty displaying data in the proper format with two-way binding

In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies i ...

Paragraph opacity adjustments can alter both the text and background opacities

Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...

Ways to incorporate onload animation into a Pie chart with billboard js

I am currently working on implementing a pie chart with animation using billboard js. However, I am facing difficulties in applying the onload animation. Can anyone provide guidance on how to achieve this? For reference, you can view an example of the des ...

What is the best way to make a span's background color stretch to 100% width?

Is there a way to make the background of a span element stretch to the full width of its parent container? Just to Clarify I understand that using divs is an option, but it feels more like a workaround than a genuine solution to the issue. (di ...

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

Adjusting iFrame Height to Fit Content Completely

I am looking to create a website where I can have a banner at the top and display another website below it without needing an additional scroll bar within the page. I have tried using an iframe, but I can't seem to get it to display correctly. I want ...

How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them: <div class="asideContent"> <ul> <li> <p> </p> </li> <li> <p></p> </li> ...

What is the best method in JavaScript to create three different shades of a color?

My sass function generates lighter and darker versions of a base color, here is the code snippet: $colors: ( betpawa-green: #107A3D, lime-green: #8DC63F, yellow: #FBCD00, ); @mixin color-generator { @each $name, $hex in $colors { &-#{$nam ...

The utilization of CSS variables within intricate properties

Imagine having a CSS property called box-shadow: box-shadow: 5px 5px 0 #ccc; What if there is a need to create a variable from the color #ccc? While in SCSS, you could accomplish this with code like: $grey: #ccc; .element { box-shadow: 5px 5px 0 $gre ...

Create a new CSS rule within a class, and remember to save the changes to

Upon opening page 1.html, I utilize JavaScript to dynamically add a background image to the body of the page. To achieve this, I use the following code: document.body.style.backgroundImage = "url(http://www.example.com/image.jpg)"; This code effectively ...

Vue JS encounters difficulties when attempting to lazy load various images from a randomized image URL

I've implemented a code snippet for lazy loading images with different URLs: <img src="https://source.unsplash.com/1600x900/?hotel,booking.com?v=1" loading="lazy" /> <img src="https://source.unsplash.com/1600x900/?hot ...