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

Html – How do I stop my header from shrinking and the text from being cut off when the window is resized?

My header section and text look fine on computer dimensions and tablets but when the window is resized to the width of an iPhone, the section becomes substantially smaller to where the text then goes into the other section and is cut off by the right margin. I have tried creating a section for it and styling it that way but then it entirely covers the navbar. My other sections do not run into this issue and I am not sure what I am neglecting to do.

header {
  height: 100vh;
  max-width: 100vw;
  position: relative;
  top: 5rem;
  display: grid;
  place-items: center;
  z-index: 0;
  background-color: #fff;
}

header .container {
  display: grid;
  grid-template-columns: 30rem auto 17rem;
  align-items: center;
  max-height: 100%;
  margin-top: -3rem;
}

header .container .info p {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 1rem 0 2rem;
}

header .container .info h1 {
  color: gray;
}

header .container .info .cta {
  display: flex;
  align-items: center;
}
<header>
<div class="container">
  <div class="info">
    <h1>Basketball Today</h1>
  </div>
</div>
</header>
Tags:

2

Answers


  1. 0

    It appears that the problem may be with the grid-template-columns property in the .container class based on the code you provided. For devices with smaller screens, like iPhones, the fixed widths provided in 30rem, auto, and 17rem may not be responsive enough.

    You might think about using CSS media queries to change the container’s style and size to make the header section more responsive to various screen sizes. An illustration of how you could change your code is as follows:

    header {
  height: 100vh;
  max-width: 100vw;
  position: relative;
  top: 5rem;
  display: grid;
  place-items: center;
  z-index: 0;
  background-color: #fff;
}

header .container {
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  max-height: 100%;
  margin-top: -3rem;
}

header .container .info p {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 1rem 0 2rem;
}

header .container .info h1 {
  color: gray;
}

header .container .info .cta {
  display: flex;
  align-items: center;
}

header .container .info .cta h3 {
  color: var(--color-light-gray);
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  header .container {
    grid-template-columns: auto;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
  }

  header .container .info p {
    font-size: 1rem;
  }
}

    In the source code above, I changed the fixed widths of the grid-template-columns in the .container class to auto, allowing the columns to change width according on the content. Additionally, I increased the font size and changed the layout to accommodate displays with a maximum width of 768 pixels, which are common of iPhones.

    You should be able to make the header section more responsive and stop the text from being cut off on smaller devices by using media queries and altering the layout dependent on screen size. You are allowed to modify the media query’s values and styling to suit your unique requirements.

    Login or Signup to reply.
  2. 0

    To prevent your header from shrinking and the text from being cut off when the window is resized, you can use CSS properties to control the behavior of your header element. Here are a few approaches you can consider:

    1: Set a Minimum Width
    You can specify a minimum width for your header element using the min-width property. This ensures that the header retains a certain width even when the window is resized smaller. For example:

    header {
        min-width: 800px;
       }

    Adjust the 800px value to your desired minimum width.

    2: Use Overflow
    By setting the overflow property to auto or scroll, you allow the header to display horizontal scrollbars when the content exceeds the available width. This way, the text won’t be cut off, and users can scroll horizontally to view the entire content. For example:

    header {
  overflow: auto;
}

    3: Implement Responsive Design
    Consider applying responsive design techniques to make your header and its content adapt to different screen sizes. This involves using CSS media queries and adjusting the layout and styling based on the available space. For example, you can use CSS flexbox or grid to create a flexible and responsive header. Here’s an example using flexbox:

    header {
  display: flex;
  flex-wrap: wrap;
}

header .logo {
  flex: 0 0 300px; /* Set a fixed width for the logo */
}

header .menu {
  flex: 1; /* Allow the menu to grow and shrink as needed */
}

    In this example, the logo has a fixed width, while the menu expands to fill the remaining space. As the window is resized, the header elements adjust accordingly.

    4: Consider Using a Responsive Framework
    If you find it challenging to implement responsive behavior manually, you can consider using a responsive CSS framework like Bootstrap or Foundation. These frameworks provide pre-built components and responsive grid systems that handle resizing and layout adjustments for you.

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

Back To Top
Search