Adjusting the Size of a Static Banner

I have a quick question. I've been trying to create a fixed banner that will scale when the page is resized, but I'm having some trouble with the phrasing in Google search. My issue is that when using a percentage width for the large container, the banner within it does not resize properly and ends up extending longer than the main container.

CSS:

.contMain {
        width:80%;
        position: top
        padding-top: 0;
        border-top: 0;
        margin: 0 auto;
        background-color: #F1EDCC;
     }
.contMain-banner {
         position:fixed;
         width: inherit;
         background: #87AADF;
}

HTML:

<div class="contMain">
    <div class="contMain-banner">
        <h1 class="contMain-title">Some Title</h1>
          {{> MeteorTemplate}}
    </div>
</div>

The only CSS at a higher level is for the .body tag where a background color is set. This project is built with MeteorJS. Cheers!

javascripthtmlcsswebmeteor

Answer №1

Give this a go - visit the codepen here

CSS

body {
height:auto;
width:100%;
}
.containerMain {
    height:200px;
    width:90%;
    padding:0;
    margin: 0 auto;
    background-color: #555555;
 }
.containerMain-banner {
     position:relative;
     width: inherit;
     height:auto;
     background: #e7e7e7;
}
span {
color:#000;
position:absolute;
top:175px;
}

HTML

<body>
 <div class="containerMain">
  <div class="containerMain-banner">
      <h1 class="containerMain-title">Main Banner Content</h1>
        {{> MeteorTemplate}}
  </div>
    <span>This is the main container</span>
 </div>
</body>

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

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

Is it better to process data in a React app using Express or handle it directly on the front end with React?

Hey there, I need some advice on how to create a league table for my application. The JSON data structure is set up like this: I'm considering whether to calculate each player's league data on the front-end using React by looping through the fixt ...

javascriptjsonnode.jsreactjsexpress

Guide on utilizing Chrome Push Notifications on an HTTP website

I'm looking to incorporate Chrome push notifications (GCM) on my HTTP site. I've read that it's typically only for HTTPS sites, but is there a workaround or sample code available for integrating push notifications on an HTTP site? I'm ...

javascriptgoogle-chromegoogle-chrome-extensiongoogle-cloud-messagingweb-push

Eliminate JavaScript that blocks rendering:

Currently, I am working on optimizing my website's speed and aiming for a perfect 100/100 score on PageSpeed Insights. The website in question is www.chrispdesign.com. Despite my efforts to relocate the code and make necessary adjustments, I have bee ...

javascriptjquerycssajaxwordpress

Is there a way to stop a setTimeout function in React before it is triggered?

In my application, I have set up a functionality where pressing a button starts the clock countdown. If no action is taken within 23 seconds (23000), the state changes to "this.state.user". This part is working correctly. However, if you click on the elem ...

javascriptreactjssettimeout

Automatically remove the entered data

Let's say I have a text input field with the initial value of "insert text here" coded like this: <input type="text" value="insert text here" /> What I want is for the text inside the input field to disappear automatically when the user clicks ...

htmlcssforms

Google Maps integrated AWS server

While utilizing an AWS server for my application, I have encountered a difficulty with Google Maps. When running my application using localhost, Google Maps functions perfectly fine. However, when attempting to run the application using an IP address, it f ...

javascriptphpangularjsnode.jsgoogle-maps

Cookie settings are not functioning properly in Chrome when attempting to access two different websites

Having an issue with the Set-Cookie functionality not functioning properly in Chrome, although untested in other browsers. Previously, it was working fine but recently stopped working. I operate two websites with separate domain names, and it is essential ...

javascriptpythondjangocookies

The performance of Three.js is directly influenced by the quantity of objects present

Just completed a project in WebGL using Javascript and the 3D library known as three.js Unfortunately, the performance of the project is less than impressive - slow from the start with occasional moments of adequacy. In this game, there are: 1 car, 6 ora ...

javascriptthree.js

a problem with images overflowing in CSS

I am currently working on setting up a personal blog for myself, but I have encountered an issue with the overflow property. On my home page, I have a div that contains text and images for reviews. When users click on the "read more" button, the full parag ...

htmlcss

Avoiding unnecessary re-renders in your application by utilizing the useRef hook when working with

To prevent the component from re-rendering every time the input value changes, I am trying to implement useRef instead of useState. With useState, the entire component re-renders with each key press. This is the usual approach, but it causes the entire co ...

javascriptreactjsreact-hooksuse-stateuse-ref

When executing npm run dev, an UnhandledPromiseRejectionWarning is triggered

I'm encountering an UnhandledPromiseRejectionWarning error when running npm run dev on my Vagrant machine, and I'm struggling to identify the root cause. The console output suggests that a promise is not being properly completed with the catch() ...

javascriptnode.jsnpmvuejs2

What is a method to display a list in javascript without using a rendering engine?

Seeking to avoid any render engine or framework except for express. Our goal is to display any list retrieved from a database query without relying on a render engine. What code can be used as a substitute for a render engine when working with data lists ...

htmlnode.jsexpress

Image Switching Hover Bug

HTML: <div id="logo"></div> <div id="coming-soon"></div> JavaScript: $(document).ready(function(){ $("#logo").hover( function(){ $("#logo").fadeTo(300, 0); $("#coming-soon").fadeTo(300, 1.0 ...

javascriptjqueryhover

I'm struggling to solve a straightforward jQuery sliding issue

I am struggling to make text slide from right to left on my website. I want the text to appear only when the page loads or refreshes, and then slide off when a link is clicked, revealing new text. Can anyone help me figure this out? http://jsfiddle.net/XA ...

javascriptjqueryhtmlcss

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

I have designed a popup registration form using the Bootstrap modal class. To ensure form validation, I have integrated some jQuery validation engine functionality. Additionally, I customized the appearance by adding a box shadow, adjusting the background ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using ServiceWorker with React and Typescript

If you are working on a javascript-based React project, adding a Service Worker is simply a matter of updating serviceWorker.unregister() to serviceWorker.register() in index.jsx. Here is an example project structure: - src |- index.jsx |- serviceWo ...

javascriptreactjstypescriptprogressive-web-appsservice-worker

CodeIgniter - Utilizing quotes within a form

Consider a scenario where the database has a field named NAME which contains text with both single and double quotes: TEST1 "TEST2" 'TEST3' Now, if you want to edit this value using the following code in a form: <label for="name">Ful ...

phphtmlformscodeigniter

Having issues with implementing CSS3 animations on my webpage

I'm having trouble implementing a bouncing mouse animation on my website. The code works perfectly on another site, but on mine, it's not functioning at all. Here is the CSS code: .mouse { display: block; margin: 0 auto; text-alig ...

csscss-animations