Troublesome formatting problem with CSS for beginners

Just joined this platform and I'm excited to post my first question here. Hopefully, I've done it correctly.

I'm currently following a YouTube course on DOM manipulation to create a Javascript stopwatch. You can find the course here.

I'm facing an issue with centering the starter zero's on my stopwatch and I just can't figure out why.

Any help or guidance would be greatly appreciated!

You can see how the tutors' version looks here and compare it with mine here

//My Markup//
<body>
    <div class="container">
      <div id="timer">00:00:00</div>

      <div class="buttons">
        <button id="startStopBtn">
          <i class="fa-solid fa-play" id="play"></i>
        </button>

        <button id="resetBtn">
          <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
        </button>
      </div>
    </div>

//Their Markup://

<div class="container">
        <div id="timer">
            00:00:00
        </div>
        <div class="buttons">
            <button id="startStopBtn">
                <i class="fa-solid fa-play" id="play"></i>
            </button>
            <button id="resetBtn">
                <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
            </button>
        </div>

//MY CSS://

body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-  empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}

button i {
  font-size: 2rem;
  padding: 10px;
  color: #fff;
  width: 50px;
}

#play {
  background-color: green;
}
#pause {
  background-color: orange;
}
#reset {
  background-color: red;
}

//Their CSS//

body {
    height: 100vh;
    background: url(img/project-4.jpg) no-repeat center top / cover;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow:  0 0 3px;
   }
   #timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0px auto;
    padding: 35px;
   }
   .buttons {
    text-align: center;
   }
   button {
    margin: 0 10px;
    border: none;
   }
   button i {
    font-size: 2rem;
    padding: 10px;
    color: #fff;
    width: 50px;
   }
   #play {
    background-color: green;
   }
   #pause {
    background-color: orange;
   }
   #reset {
    background-color: red;
   }
javascripthtmlcss

Answer №1

The issue here lies in the styling of the timer element where a width of 100% and side padding of 35px have been applied simultaneously.

By default, if the box-sizing property is not explicitly set to border-box, the element will follow the content-box model. This means that the overall width of the timer will be 100% (based on its parent, .container), plus an additional 70px due to the padding.

To visualize this, try adding a background color to the timer element.

To resolve this, consider removing the side padding since text-align: center already centers the content effectively without the need for extra padding.

It appears that the tutor's code includes a universal box-sizing rule which sets all elements to border-box. This is commonly seen in stylesheets:

* {
  box-sizing: border-box;
}

This type of rule typically resets the margin as well to ensure consistent layout across different browsers.

If unsure, it's advisable to confirm with the tutor about these settings.

Below is 'your code' incorporating the box-sizing rule along with minor adjustments like removing the dot before button settings in the stylesheet.

Important note: the large font size may cause the time display to overflow outside the container, especially on smaller viewport widths. Consider implementing responsive sizing options such as using vw units for font-size to address this issue.

Lastly, I've corrected the image URL by removing any unnecessary spaces that were causing it to not display properly in the background.

Answer №2

To fix the issue, either delete the width property from #timer or replace it with max-width: 100%; instead of width: 100%;.

Take a look at the code snippet provided below.

body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  max-width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div class="container">
      <div id="timer">00:00:00</div>

      <div class="buttons">
        <button id="startStopBtn">
          <i class="fa-solid fa-play" id="play"></i>
        </button>

        <button id="resetBtn">
          <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
        </button>
      </div>
    </div>
  </body>
</html>

Answer №3

It's possible that your browser has a different default stylesheet compared to the tutor's.

To resolve this issue, I suggest changing the box-sizing property of #timer to border-box. You can learn more about this attribute here. When using content-box, the padding is not included in the element width calculation, causing overflow when set to 100% width.

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 0 3px;
}

#timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0 auto;
    padding: 35px;
    box-sizing: border-box; /* Necessary for including padding in element width */
}
<body>
    <div class="container">
        <div id="timer">00:00:00</div>
    </div>
</body>

Answer №4

Eliminate width:100% from #timer or substitute it with max-width:100%

Having a width of 100% does not allow room for margin.

The margin:0 auto property will only function properly on widths less than 100%.

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

How do I use jQuery to animate a height increase where the added height is applied to the top of the element?

I am facing a simple issue that I need help resolving. The problem involves hidden content that, once expanded, needs to have a height of 99px. When collapsed, the container holding this content section#newsletter is set to be 65px in height. If you want ...

jquerycssheightjquery-animatefixed

I require integrating another element alongside this button

I am trying to create a button component that, when clicked, will display another component along with it. However, I am unsure of how to achieve this. Take a look at the plantioComp return - this is the component that I want the button to trigger. <t ...

javascripthtmlvue.js

"Implementing debouncing functionality with Lodash in an asynchronous context

I've encountered an issue while trying to implement debounce in my application before making an api call. It seems like the await function is being ignored and the function is called without all the necessary values. export default class App extends ...

javascriptreactjslodashdebouncing

How to create a basic onClick event binding in JavaScript with an array?

Check out my JavaScript code snippet below: let links = ["id1", "id2", "id3"]; let container = document.getElementById('container'); links.forEach(function(link){ container.innerHTML += "<a href=\""+link+"\">"+link+"</a>" ...

javascript

What strategies can I use to divide lengthy words in my Django application?

My username on the site is causing overflow outside of the content box, as shown here I tried adding h1, h2, h3, h4, h5, h6 { color: #44444; overflow-wrap: break-word;}, but it didn't work. Here is the code for the profile page: All CSS styles for ...

htmlcssdjango

The list in Jquery UI Autocomplete is not updating correctly

Currently, I am using jQuery UI Autocomplete in conjunction with WebSockets to fetch and display a list of options. Each time a keystroke is detected on the input field (.keyup()), a call is made to retrieve the list. However, I have encountered an issue w ...

javascriptajaxjquery-uiautocompletewebsocket

Failing to establish a state on schedule

Hey there, I'm currently in the process of learning react and have come across a function that I need some assistance with: async function onSubmit(){ try{ const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${value.label} ...

javascriptreactjs

Styling the inner background color of a text input field using CSS

My text field looks great everywhere, except in Opera where it blends into the background color. Is there a way to keep the inside of the text field white only? Setting the background(-color) to white changes the entire square element background, which is ...

cssformsopera

Creating custom shaders for YouTube videos within a Three.js userscript

I want to add a shader effect to YouTube videos. My current approach involves using Three.js to implement a shader on a video. Specifically, I am trying to adapt this example of applying a shader to a video (code available here) into a Tampermonkey usersc ...

javascriptthree.jsshadertampermonkeyuserscripts

How to ensure uniform button sizes in an HTML form by setting them all equal to the size

The code snippet provided below demonstrates a basic form with two submit buttons. <form> <input type="submit" value="< Previous"> <input type="submit" value="Next >"> </form> Depending on the value attribute, the bu ...

cssforms

Using jQuery to create a "read more" feature that shortens lengthy paragraphs based on word count rather than character count

Goal Shorten lengthy text to six words, then display "...show more" Implement a way to collapse the text back after expansion Overview The objective is to truncate the text and provide a link for expanding it with a "read more" option. The cutoff shou ...

javascriptjquery

React JS Task Manager | Extract input value and update state

I am currently working on developing a to do list application that by default receives two objects from a store. However, I am facing difficulty in capturing the user's input for their new "to do" item and storing it in the application state. When I ...

javascriptreactjs

Leveraging Bootstrap 5 for designing personalized tooltips

Using Bootstrap 5, I am currently working on creating a unique custom tooltip. I found the necessary markup in the Bootstrap 5 documentation here. After some research, I discovered that tooltips in Bootstrap 5 are not contained within the calling element, ...

csstwitter-bootstraptwitter-bootstrap-tooltipbootstrap-5

The value of type 'X' cannot be assigned to type 'Y' or 'undefined'

In my code, there is a component that requires a prop with an enum value: export enum AType { some = "SOME", word = "WORD", } const MyComponent = (arg: AType) => {} When I try calling this component like so: <MyComponent ar ...

javascriptreactjstypescript

What is the method to include a CoffeeScript file in my project?

Currently, I am attempting to follow the steps outlined in this CoffeScript tutorial. After opening the terminal and navigating to the directory where simpleMath.coffee is located, I proceeded to run node and entered var SimpleMath = require('./simpl ...

javascriptnode.jscoffeescript

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

csshtmlmasking

No information appearing on the Google Map interface

Currently, I am attempting to integrate a Google Maps feature into my website. Presently, when you click a button, the map displays in the center of the page: function showMap() { $('mapAndButton').setStyle('display', 'block&a ...

javascriptgoogle-maps

Construct a three-dimensional structure using JavaScript and set a standard height

I'm working on developing a 3D form using code and I've encountered an issue. My plan involves storing coordinates in a vector within the same plane, with an added default height to achieve a 3D effect. However, as someone new to programming and ...

javascriptarraysthree.js

Resources for ExpressJS

New to ExpressJS and trying to figure out how to reference images stored in the /public/images/ directory in my /public/stylesheets/styles.css The code snippet below doesn't seem to be working for me: .home-bg { background-image:url('../ima ...

cssnode.jsexpress

Expanding iframe elements

I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...

javascriptcssiframe