0

I’m currently working on a weather app, but when I was doing the design, I ran into a problem with the space around a large character. In the image below, I’ve centered the section with the degree and tree containers, but the character has an enormous container, and because of that, they don’t appear to be centered. What I want is for the container to fit the font.

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap");

* {
  background-color: #e8e8e8;
  font-family: "Space Grotesk", serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
}

main {
  margin: 80px 85px;
  border: red 1px solid;
  flex: 1;
  position: relative;
}

.first-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.first-section .cityName {
  font-size: 168pt;
  font-weight: 00;
}

.first-section input {
  width: 400px;
  height: 60px;
  border-radius: 20px;
  top: 60px;
  right: 0;
  position: absolute;
  text-align: center;
  font-size: 20pt;
  font-weight: lighter;
}

.second-section {
  display: flex;
  justify-content: space-between;
  bottom: 0px;
  position: absolute;
  width: 100%;
  border: solid 1px rgb(57, 23, 179);
  align-items: center;
}

.second-section .square-wrapper {
  display: flex;
  gap: 80px;
}

.second-section .square-wrapper .square {
  height: 300px;
  width: 150px;
  border-radius: 20px;
  border: solid 1px blue;
}

.second-section .p-wrapper p {
  font-size: 300pt;
  font-weight: 500;
}
<main>

  <div class="section-wrapper">
    <section class="first-section">
      <!--CityName-->`your text`
      <div class="cityName">Brazil</div>
      <!--Input-->
      <input type="text" placeholder="Search"></input>
    </section>

    <section class="second-section">
      <!--squares-->
      <div class="square-wrapper">
        <div class="square">Rain</div>
        <div class="square">Moon</div>
        <div class="square">Wind</div>
      </div>
      <!--Degree-->
      <div class="p-wrapper">
        <p>12°</p>
      </div>
    </section>
  </div>

</main>

I tried removing the margin for the main container because I want to position the 3 divs and the degree a little bit lower due to the oversized container around the degree. However, the ideal solution would be for the container to fit the character perfectly.

Improve this question
2
  • Can you please limit your code to just enough to demonstrate the issue. Recall though that characters are not necessarily centered in their glyph "box" so what you seem to be asking for may not be possible. Commented Feb 22 at 21:01
  • 1
    You may need to choose your font very carefully. Have a look into how fonts are designed and remember most sit characters on a baseline which is not the bottom of each character’s ‘container’ (to allow for example for descenders) and there may be space above e.g. for ascenders etc etc. See en.wikipedia.org/wiki/Typeface_anatomy for an introduction. Commented Feb 22 at 21:31
Related questions
6167
How to disable text selection highlighting
2279
Vertically align text next to an image?
3080
How do I modify the URL without reloading the page?
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.