Is there anyway to fit content right under a websites logo?-CodePudding

I am currently stuck on creating similar results to picture 1. I am specifically trying to mimic the spacing between the logo and the title/desc text.

Picture 1:

I have sized the logo to be 140px X 140px, but I cannot figure out how to override it and make my text closer without changing the pixel dimensions. I also cannot figure out how to take the OG logo and resize it in photoshop. https://imgur.com/a/NjnN7NG

html

<html  lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>cozyfiles</title>
    <link
      rel="stylesheet"
      href="styles/styles.css"
    />
  </head>
  <body>
    <div >
      <a href="#Default" id="logo"
        ><img src="images/logo.png"
      /></a>
      <!-- <img
        id="logo"
        src="images/logo.png"
        alt="A logo
      of cozyfiles"
      /> -->
      <p >
        cozyfiles
      </p>
      <p >
        cozyfiles music group. |
        @cozyfiles
      </p>
    </div>
    <!-- <div>
      <img
        id="logo"
        src="images/logo.png"
        alt="A logo of cozyfiles"
      />
      <p >
        cozyfiles
      </p>
      <p >
        cozyfiles music group. |
        @cozyfiles
      </p>
    </div> -->
    <h1 >cozyfiles.</h1>
  </body>
</html>```

CSS

    .title {
  width: 200px;
  height: 75px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;

  padding: 8px;
  /* padding-top: ;
  padding-left: ;
  padding-right: ;
  padding-bottom: ; */

  border: 10px solid black;
  border-top-style: groove;
  border-top-color: blue;
  border-top-width: 15px;

  /* border-left-style: ;
  border-left-color: ;
  border-left-width: ;

  border-right-style: ;
  border-right-color: ;
  border-right-width: ;

  border-bottom-style: ;
  border-bottom-color: ;
  border-bottom-width: ; */

  text-align: center;
}

#logo {
  width: 30%;
  height: 40%;
}

.html {
  box-sizing: border-box;
}

.site_title {
  padding-left: 40px;
  margin-bottom: 1px;
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

.site_desc {
  padding-left: 40px;
  margin-top: 1px;
  font-size: 20px;
}

#logo,
div,
.site_title,
.site_desc {
  display: flex;
  flex-direction: column;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

CodePudding user response：

Try changing the top margin in css, if you have tried that already then am I able to see the css code

element {
  margin-top: 0px;
}

CodePudding user response：

you can add margin-top: 4px; in site_title class. you can increase or decrease the margin-top value according to space

.title {
  width: 200px;
  height: 75px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;

  padding: 8px;
  /* padding-top: ;
  padding-left: ;
  padding-right: ;
  padding-bottom: ; */

  border: 10px solid black;
  border-top-style: groove;
  border-top-color: blue;
  border-top-width: 15px;

  /* border-left-style: ;
  border-left-color: ;
  border-left-width: ;

  border-right-style: ;
  border-right-color: ;
  border-right-width: ;

  border-bottom-style: ;
  border-bottom-color: ;
  border-bottom-width: ; */

  text-align: center;
}

#logo {
  width: 90px;
  height: 90px;
}

.html {
  box-sizing: border-box;
}

.site_title {
  margin-top: 4px;
  padding-left: 40px;
  margin-bottom: 1px;
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

.site_desc {
  padding-left: 40px;
  margin-top: 1px;
  font-size: 20px;
}

#logo,
div,
.site_title,
.site_desc {
  display: flex;
  flex-direction: column;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

<html  lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>cozyfiles</title>
    <link
      rel="stylesheet"
      href="styles/styles.css"
    />
  </head>
  <body>
    <div >
      <a href="#Default" id="logo"
        ><img src="images/logo.png"
      /></a>
      <!-- <img
        id="logo"
        src="images/logo.png"
        alt="A logo
      of cozyfiles"
      /> -->
      <p >
        cozyfiles
      </p>
      <p >
        cozyfiles music group. |
        @cozyfiles
      </p>
    </div>
    <!-- <div>
      <img
        id="logo"
        src="images/logo.png"
        alt="A logo of cozyfiles"
      />
      <p >
        cozyfiles
      </p>
      <p >
        cozyfiles music group. |
        @cozyfiles
      </p>
    </div> -->
    <h1 >cozyfiles.</h1>
  </body>
</html>

CodePudding user response：

You can use padding-top for the site_title class to increase the gap between the logo and the title.

.title {
  width: 200px;
  height: 75px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: 10px solid black;
  border-top-style: groove;
  border-top-color: blue;
  border-top-width: 15px;
  text-align: center;
}

#logo {
  width: 90px;
  height: 90px;
}

.html {
  box-sizing: border-box;
}

.site_title {
  margin-top: 4px;
  padding-left: 40px;
  margin-bottom: 1px;
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
}

.site_desc {
  padding-left: 40px;
  padding-top:4px;
  font-size: 20px;
}

#logo,
div,
.site_title,
.site_desc {
  display: flex;
  flex-direction: column;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

<html  lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>cozyfiles</title>
    <link
      rel="stylesheet"
      href="styles/styles.css"
    />
  </head>
  <body>
    <div >
      <a href="#Default" id="logo"
        ><img src="images/logo.png"
      /></a>
      <!-- <img
        id="logo"
        src="images/logo.png"
        alt="A logo
      of cozyfiles"
      /> -->
      <p >
        cozyfiles
      </p>
      <p >
        cozyfiles music group. |
        @cozyfiles
      </p>
    </div>
    <!-- <div>
      <img
        id="logo"
        src="images/logo.png"
        alt="A logo of cozyfiles"
      />
      <p >
        cozyfiles
      </p>
      <p >
        cozyfiles music group. |
        @cozyfiles
      </p>
    </div> -->
    <h1 >cozyfiles.</h1>
  </body>
</html>