Question 264546 in Html Question posted in
Some basic documentation can be found here.

Html – Make the <h3> less wide

As the title says, I want to reduce the width of the <h3>

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Stories - USA</title>
    <link rel="stylesheet" href="../CSS/country.css">
</head>
<body data-country="usa">
    <header>
        <h1>Stories</h1>
        <h3>Argentina</h3>
    </header>
    <main>
      <div id="content-wrapper">
        <div id="get-container">
          <input type="text" id="story-number" placeholder="Enter story number">
          <button id="get" type="button">Get Story</button>
          <button id="getRandom" type="button">Random Story</button>
        </div>
        <div id="story-container">
          <!-- Story content will be displayed here -->
          <div id="generated-text"></div>
          <button id="back" type="button">Back</button>
        </div>
      </div>
    </main>
    <script src="Scripts/argentina.js"></script>
</body>
</html>

CSS

        body {
          font-family: Arial, sans-serif;
          background-color: #f0f0f0;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }

        header {
          background-color: #ff6600;
          color: #fff;
          padding: 20px;
          text-align: center;
        }

        h1 {
          font-size: 28px;
          margin: 0;
        }

        main {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 100vh;
          overflow: hidden;
        }

        #content-wrapper {
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 20px;
          width: 100%;
          max-width: 1000px; /* Adjust this value to fit your screen */
          text-align: center;
          margin: 0 auto;
          overflow-x: hidden;
          max-height: 100%;
        }

        #story-number {
          padding: 10px 16px;
          font-size: 14px;
          border: 1px solid #ccc;
          border-radius: 4px;
          width: 200px;
          height: 30px;
          margin-bottom: 10px;
        }

        #get-container {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        #get,
        #getRandom,
        #clear,
        #back { /* Style for the "Back" button */
          background-color: #ff6600;
          color: #fff;
          border: none;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
          border-radius: 4px;
          transition: background-color 0.3s ease;
          margin-bottom: 10px;
          outline: none;
        }

        #get:hover,
        #getRandom:hover,
        #clear:hover,
        #back:hover { /* Hover effect */
          background-color: #ff9933; /* Change the background color on hover */
        }

        #story-container {
          background-color: #fff;
          text-align: center;
          display: none;
          max-height: 320px; /* Set the maximum height here */
          overflow-y: auto; /* Add this line for the vertical scrollbar */
          padding: 0 20px; /* Add padding to the left and right */
        }

        #generated-text {
          font-size: 18px;
          line-height: 1.5;
          margin-bottom: 10px;
          color: #333;
          text-align: center;
        }

        #generated-text span {
          font-weight: bold;
          color: #000;
          font-size: 20px;
        }

        #back { /* Style for the "Back" button */
          display: none;
          margin: 10px auto;
        }

        @media (min-width: 601px) {
          #content-wrapper {
            max-width: 600px;
          }
        }

        @media (max-width: 600px) {
          #content-wrapper {
            max-width: 90%; /* Adjust width as needed */
            max-height: 80vh; /* Adjust height as needed */
            overflow-y: auto; /* Add vertical scrollbar */
          }
          #story-container {
            max-height: 58vh; /* Adjust the value as needed for your device */
          }
          #get,
          #getRandom,
          #clear,
          #back { /* Style for smaller screens */
            font-size: 10px !important;
            padding: 20px 20px !important;
          }
        }

I want the <h3> to be less in width than the <h1> but I’m not sure how I would go ahead and do that. Been trying different ways but cant get it to look right. I thought I was done with the design but then realized that I wanted a smaller title which says what countrys page I’m on. So if someone could explain how I can make it work I’d be very thankful.

Tags:

2

Answers


  1. 0

    Yes I got You

    See the output in fullscreen

    Try this:

    Just modified below css

        *{
    margin:0;  // to reset default margin for all tags
    }
    header {
    background-color: #ff6600;
    color: #fff;
    padding: 20px;
    text-align: center;
    max-width: 600px;    // <-- added
    margin: 0 auto;      // <-- added
    }
    h3{
    margin:5px 0;   // like that you can adjust height
    }

    *{
margin:0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
overflow: hidden;
}
h3{
 margin:5px 0;
 }
header {
background-color: #ff6600;
color: #fff;
padding: 20px;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
h1 {
font-size: 28px;
margin: 0;
}
main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
#content-wrapper {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
max-width: 1000px; /* Adjust this value to fit your screen */
text-align: center;
margin: 0 auto;
overflow-x: hidden;
max-height: 100%;
}
#story-number {
padding: 10px 16px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
height: 30px;
margin-bottom: 10px;
}
#get-container {
display: flex;
flex-direction: column;
align-items: center;
}
#get,
#getRandom,
#clear,
#back { /* Style for the "Back" button */
background-color: #ff6600;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
margin-bottom: 10px;
outline: none;
}
#get:hover,
#getRandom:hover,
#clear:hover,
#back:hover { /* Hover effect */
background-color: #ff9933; /* Change the background color on hover */
}
#story-container {
background-color: #fff;
text-align: center;
display: none;
max-height: 320px; /* Set the maximum height here */
overflow-y: auto; /* Add this line for the vertical scrollbar */
padding: 0 20px; /* Add padding to the left and right */
}
#generated-text {
font-size: 18px;
line-height: 1.5;
margin-bottom: 10px;
color: #333;
text-align: center;
}
#generated-text span {
font-weight: bold;
color: #000;
font-size: 20px;
}
#back { /* Style for the "Back" button */
display: none;
margin: 10px auto;
}
@media (min-width: 601px) {
#content-wrapper {
max-width: 600px;
}
}
@media (max-width: 600px) {
#content-wrapper {
max-width: 90%; /* Adjust width as needed */
max-height: 80vh; /* Adjust height as needed */
overflow-y: auto; /* Add vertical scrollbar */
}
#story-container {
max-height: 58vh; /* Adjust the value as needed for your device */
}
#get,
#getRandom,
#clear,
#back { /* Style for smaller screens */
font-size: 10px !important;
padding: 20px 20px !important;
}
}
    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Stories - USA</title>
    <link rel="stylesheet" href="../CSS/country.css">
</head>
<body data-country="usa">
    <header>
        <h1>Stories</h1>
        <h3>Argentina</h3>
    </header>
    <main>
      <div id="content-wrapper">
        <div id="get-container">
          <input type="text" id="story-number" placeholder="Enter story number">
          <button id="get" type="button">Get Story</button>
          <button id="getRandom" type="button">Random Story</button>
        </div>
        <div id="story-container">
          <!-- Story content will be displayed here -->
          <div id="generated-text"></div>
          <button id="back" type="button">Back</button>
        </div>
      </div>
    </main>
    <script src="Scripts/argentina.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    try changing the max-width in CSS

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search