What is the best way to place text on a banner and ensure it adjusts to different screen sizes?

Question

What is the best way to place text on a banner and ensure it adjusts to different screen sizes?

One issue I am facing is that the "h1" text is not appearing as intended, and upon resizing the screen, the "p" text shifts down the page and no longer aligns with the image.

Below is the HTML code snippet:

<div id="home_header">
        <img src="resources/assets/home_header.png" alt="youth futures header">
        <h1>Hi</h1>
        <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p>

</div>

Here is the associated CSS code:

h1 {
font-family: "quicksand-bold";
font-size:214px;
line-height:244px;
color:#ffffff;
margin:0;
width: auto;
text-align:center;
}

.textstyle2 {
font-family:"quicksand-bold";
font-size:38px;
line-height:43px;
color:#9ec54d !important;
}

html twitter-bootstrap css

Answer 1

Answer №1

Your CSS Styles

.hero {
      width:960px;
      margin:1rem auto;
      position: relative;
    }

    .text {
      background:rgba(255,255,255,0.5);
      position: absolute;
      top:50%;
      left:0;
      padding:1rem;
      transform:translateY(-50%);
    }

Here is your HTML Markup

<div class="hero">
  <img src="http://lorempixel.com/output/city-q-c-960-480-4.jpg" alt="" />
  <div class="text">
   <h1>Hello</h1>
        <p class="textstyle2">14 COZY BEDS. AGES 12-17.<br/>YOUR TEMPORARY ABODE :)</p>
  </div>
</div>

Answer 2

Your CSS Styles

.hero {
      width:960px;
      margin:1rem auto;
      position: relative;
    }

    .text {
      background:rgba(255,255,255,0.5);
      position: absolute;
      top:50%;
      left:0;
      padding:1rem;
      transform:translateY(-50%);
    }

Here is your HTML Markup

<div class="hero">
  <img src="http://lorempixel.com/output/city-q-c-960-480-4.jpg" alt="" />
  <div class="text">
   <h1>Hello</h1>
        <p class="textstyle2">14 COZY BEDS. AGES 12-17.<br/>YOUR TEMPORARY ABODE :)</p>
  </div>
</div>

Answer 3

Answer №2

#home_header{position: relative;}

Adjust the position of your container in relation to other elements, and then position the elements within it using

img, h1, p {
     position: absolute;
}

Your div should now have the same height as your image. Next, fine-tune the positioning of your elements based on the container element #home_header. For example, if you want the paragraph 10px above the bottom of the image:

p {bottom: 10px;}

If you'd like the h1 at the top of the image with a 10px margin:

h1 {top: 10px;}

To keep them aligned together, create another container element for h1 and p and adjust its position relative to #home_header

<div class="banner_text">
    <h1>...</h1>
    <p>...</p>
</div>

To center the text

.banner_text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 4

#home_header{position: relative;}

Adjust the position of your container in relation to other elements, and then position the elements within it using

img, h1, p {
     position: absolute;
}

Your div should now have the same height as your image. Next, fine-tune the positioning of your elements based on the container element #home_header. For example, if you want the paragraph 10px above the bottom of the image:

p {bottom: 10px;}

If you'd like the h1 at the top of the image with a 10px margin:

h1 {top: 10px;}

To keep them aligned together, create another container element for h1 and p and adjust its position relative to #home_header

<div class="banner_text">
    <h1>...</h1>
    <p>...</p>
</div>

To center the text

.banner_text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

What is the best way to place text on a banner and ensure it adjusts to different screen sizes?

Answer №1

Answer №2

Similar questions

I am looking to retrieve the value from a combobox and pass it to my search form

What is the best way to adjust the size of an icon in material UI?

What is the process for importing a table from a website into Python using HTML?

Adjust SVG size to fit parent container/division

Is it possible to remove content from a Content Editable container?

Revealing and concealing adjacent elements within a specified class

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Creating and implementing a HTML template from scratch, devoid of any frameworks

Stop the external animation on the SVG

Click once to change the element, but it will remain changed and will not revert back no matter how many times you

Is there a way to ensure that spans are inline with a div?

Discovering the root cause of why a particular CSS style is not being implemented correctly

How to extract text from an HTML file using Bash programming

Is it possible to alter the Bootstrap CDN in Django?

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

Tips for reliably resizing slider images with varying widths

Combine jQuery and CSS to create a scrollable and extended fixed header

Have you tried incorporating Nostramap Javascript into your vue.js projects?

What is the best search engine for static HTML sites that are free from branding and advertisements?

The lack of responsiveness in the column flex-direction