Dynamic Hero Banner

As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn't stay close to the background image when the screen size is small (less than 576px).

I want the text to follow the background image as the screen size changes. Here is the code I'm using:

html {
  … // CSS properties
}

body {
  … // CSS properties
}

.site-wrapper {
  … // CSS properties
}

.container {
  … // CSS properties
}
…
<html>

<head>
  <title>Ansty FC Home Page</title>
  <link rel="stylesheet" type="text/css" href="Home.css">
  ... // other links and stylesheets
</head>

<body>
  <div class="site-wrapper">
    ... // navigation bar and content
  </div>
</body>

</html>

Answer №1

Please take a look at the commented code in the CSS section

html {
  background-color: ffff00;
  height: 100%;
}

body {
  background-color: transparent !important;
  font-family: 'nunito' !important;
  height: 100%;
}

.site-wrapper {
  background-color: 0000ff;
  min-height: 100%;
  width: 80%;
  margin: 0% auto;
}

.container {
  background-color: 0000ff;
  margin-bottom: 0%;
}

.navbar {
  height: auto;
  margin: auto;
  max-width: 95%;
}

.navbarcenter {
  margin: auto;
}

nav .navbar-nav li {
  justify-content: space-between !important;
  display: inline-block;
  float: none;
}

nav .navbar-nav li a {
  color: ffff00 !important;
  font-size: 1.5rem;
}

.navbar .navbar-brand {
  color: ffff00 !important;
  font-weight: bold;
  font-size: 1.5rem;
}

html body .container .jumbotron {
  min-width: 90%;
  height: 85%;
  background-image: url(https://imgur.com/wzo1pmU.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 3%;
  background-color: 0000ff;
}

.responsive {
  color: 0000ff;
}

.responsive-small {
  color: 0000ff;
  margin-bottom: 0%;
}

@media(max-width:568px) {
  .navbar {
    margin-bottom: 5%;
  }
  html body .container .jumbotron {
    background-image: url(https://imgur.com/QYDb3BF.jpg);
    height: 45%;
    padding-bottom: 0%;
    margin-bottom: 0%;
  }
  .responsive {
    color: ffff00;
    width: 90%;
    margin: 0 auto;
    font-size: 1rem;
    text-align: center;
    padding-top: 0%;
  }
  .responsive-small {
    color: ffff00;
    width: 90%;
    margin: 0 auto;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 2.5%;
  }
}

@media (max-width: 767px) {
  html body .container .jumbotron {
    max-height: 55%;
    min-width: 100%;
  }
  p {
    font-size: 0.75rem;
  }
  p.lead {
    font-size: 1rem;
    margin-bottom: 0%;
  }
}

@media (min-width: 768px) {
  .container {
    padding-bottom: 1.7%;
  }
  html body .container .jumbotron {
    min-width: 60%;
    max-height: 65%;
  }
  p.lead {
    margin-bottom: 1.5%;
  }
}

@media ...

/* Drop this rules from your code to echo the same effect for smaller screens */
/* 
   @media(max-width:568px) {
     p { // to show text
       color: transparent;
     }
     html body .container .jumbotron {
       background-size: contain; // to apply styles the same as for other resolutions
     } 
   }
*/
<html>

<head>
  <title>Ansty FC Home Page</title>
  <link rel="stylesheet" type="text/css" href="Home.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
</head>

<body>
  <div class="site-wrapper">
    <nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top">
      <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block"> <!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block d-lg-none d-inline-block" href="#">Ansty FC</a>
        <div class="w-100 text-right">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        </div>
      </div>
      <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
        <ul class="navbar-nav ml-auto flex-nowrap">
          <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item nav-active">Training</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Committee</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Kit</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <div class="jumbotron mx-auto col-sm-12 col-md-12 col-lg-10">
        <p class="lead">Ansty Sports and Social FC, Setting the Mid Sussex League alight with flair, passion and glory. </p>
        <p>Divisions 1, and 4 South in the Mid Sussex Football League.</p>
      </div>
    </div>
    <p class="responsive">Ansty Sports and Social FC, Setting the Mid Sussex League alight with flair, passion and glory. </p>
    <p class="responsive-small">Divisions 1, and 4 South in the Mid Sussex Football League.</p>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for passing variables through onclick to JavaScript file

My task involves querying a database and implementing a filter based on country selection from a map. After writing the JavaScript and PHP code, everything seems to work fine except for one issue - passing a name with an onclick function to initiate the qu ...

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

I attempted to use jQuery to render a partial view within my main view, but for some reason, the partial view does not show up at runtime

In the controller, there are actions defined: public ActionResult AdminRoles(int? selectedValue) { if (!LogedUser.InRole(Functions.User, Roles.View)) return RedirectToAction("Login"); return View(db.Users.Where(u => u.I ...

Column that adjusts to different screen sizes

In the realm of responsive web design, what methods are suggested to achieve the specified CSS display? My main requirement is to have a maximum of three columns. The content should be divided evenly among these three columns. I prefer using SCSS and wel ...

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...

Ways to adjust width and height for mobile devices on a website with HTML and CSS

My resume is currently uploaded to a website and looks great on desktop. However, when viewed on mobile, the width shrinks and the height extends, causing text overflow and an overall terrible appearance. I'm looking for a solution that will display m ...

Arrange three images and three text lists in a horizontal layout with responsiveness

Struggling with a HTML/CSS challenge here! I'm attempting to vertically align 3 images and text in the pattern of image, text, image, text, image, text. Everything looks great on my 13" MacBook, but once I start resizing the window, chaos ensues. Any ...

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

Modify the css with JQUERY when there are no rows inside the tbody section

Is it possible to change the css using jquery if there are no rows in the table body? I have attempted this but my current approach is not working. I tried adding an alert within the if statement, but the alert did not appear. My goal is to hide the table ...

Easily validate your email with this straightforward form. Completely puzzled

Today's challenge is tackling the email validation form issue. While searching for a solution, I stumbled upon an interesting code snippet: http://jsfiddle.net/jquery4u/5rPmV/ dyingOverHere(); The code seems to work flawlessly in the demo provided. ...

Trouble with Displaying 3rd Level JQuery Dropdown Menu

Currently working on implementing a 3 level dropdown feature. I have been using a third-party responsive menu in Opencart and it's been working well. You can see a demo of it here: Unfortunately, Opencart does not natively support 3 level categories, ...

Problem with displaying images and videos in a lightbox gallery

Currently, I am encountering an issue with the lightbox feature on my website. When trying to play a video, there seems to be a layer (div tag) blocking it, preventing me from playing or stopping the video. This problem occurs when clicking on an image fir ...

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

Is there a glitch causing the Owl carousel to malfunction?

I am struggling to implement a fullwidth owl carousel slider on my webpage, but I'm facing issues with getting it to function properly. I suspect there might be a conflict with the current template that I'm using. Here is the step-by-step proce ...

Loading of local resources is restricted in the Apache web server

I am encountering an issue with my Apache web server on a Raspberry Pi. I need to display graphs using the MPLD3 libraries, which are loaded from the server's folder. When I run my index.php page, I receive a Not allowed to load local resources error ...

Changing the element tag and flipping escape characters in html entities

My control over the string source is limited, as I can only use html(). However, I am in need of cleaning up the chaos within the source, The goal is to remove all instances of <div class="page"></div>, while retaining its content. The challen ...

Angular dynamically filling in a table with incomplete object data

I am currently working on a scientific project that involves displaying large amounts of data in tables. The experiments I'm working with have timestamps that follow this format: interface TimeData { time: string; data: {SD: string, SEM: string ...

Generating an HTML table by retrieving information from a database with the help of PHP

I have been working on a project that involves extracting data from a SQL database using PHP and then creating an HTML table based on that data. This table is designed to list the items I am selling, along with their costs, weights, and other relevant deta ...

Alert: The index named "namaunit" is not defined

As a beginner in programming, I am facing an issue where my code is not working for a particular input form. Oddly enough, the same code works perfectly fine for another input form with similar structure. It's puzzling to me why it's not function ...