Difficulty with Script Causing Margin Bottom to Fail

Check out my website at this link.

Below is a div I have created:

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 660px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100%;"> 
</div>

Along with some corresponding CSS for that div:

div.home {
    width: 100%;
    margin-bottom: 30px;
    min-width: 100%; height: auto;
}

However, despite the margin-bottom, the brown menu and text below it seem to be experiencing issues:

  1. The distance from the image increases when the browser width is reduced.
  2. Both elements do not adjust responsively as the browser size decreases.

For reference, here is a JSFiddle link: here. Please excuse any errors as I am still learning how to use JSFiddle.

jqueryhtmlcss

Answer №1

How do you feel about this solution: updated jFiddle? I modified the structure by placing the background image within an IMG tag inside the DIV container to fill it out. By adjusting the sizing of the DIV, you can achieve the desired look.

If I am off track with what you are looking for, I apologize for any confusion.

Answer №2

It seems like the issue lies in the fact that the content_container is wider than the menu. To address this, you can modify a specific line on your webpage:

<div id="content_container" style="width: 816px;">

Simply change it to:

<div id="content_container" style="width: 720px;">

This adjustment should improve functionality.

Answer №3

The margin-bottom is not the issue here. The height of the div is fixed at 660px. When the browser window is too narrow for the background-image, it will be resized proportionally to maintain the aspect ratio. This may give the impression that the margin is increasing, but in reality, it is just a part of the div appearing empty. If you are looking to address this issue, one solution could be to dynamically adjust the height of the div based on the window size.

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

"Embrace the power of Bootstrap 3 with a cutting-edge logo,

Looking to design a layout that features a logo on the left and a slogan pane with the navigation bar below it on the right. Check out image #1 for reference. As the screen narrows, the plan is to have the navigation pane move below the logo and slogan. T ...

csstwitter-bootstrap-3navgraphical-logo

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...

javascripthtmlcsshover

Update AngularJS data models using the callback function "on change" from a jQuery plugin

Currently, I am in the process of developing a web application for a touchscreen computer that requires an on-screen keyboard. After searching extensively, I came across this fantastic (or at least the best one I could find) keyboard plugin: https://github ...

javascriptjquerydomangularjson-screen-keyboard

What is the best way to prevent the table from being added again once it has been displayed?

I'm faced with the task of displaying an HTML table in a popup window when a button is clicked, using Bootstrap modal functionality. This scenario is similar to a preview function where user input is displayed in a table when a preview button is click ...

javascripthtml

Utilizing jQuery to manage asynchronous tasks, such as executing AJAX requests, handling promises, and using deferred

Exploring My jQuery Plugins: (function ($, window, document, undefined) { $.fn.loadPageContent = function (url, dataToSend) { url = url || window.location.href; dataToSend = dataToSend ? dataToSend : {}; return $.post(url, data ...

javascriptjqueryajaxpromisedeferred

How can you switch alignment from left to right when the current alignment settings are not functioning as expected in HTML?

I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name ...

htmlcssangularstyles

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

javascripthtmlvue.js

Issue with AngularJS Cross-Origin Resource Sharing (CORS) when making HTTP requests, whereas standard Ajax and jQuery are

I'm currently dealing with a straightforward cross-domain service that is set up to handle Simple CORS requests. When I try to access it using a plain xmlHTTP call or jQuery($.ajax), everything works smoothly. However, when attempting to make the call ...

javascriptjqueryangularjscorsangularjs-http

Uncovering the media:thumbnail in an RSS feed using Scrapy's CSS selector

I am currently working on parsing an RSS feed that includes image URLs. The XML file structure is as follows: <item> <title>Item Title Goes Here</title> <link>https://www.google.com</link> <media:thumbnail url="https:/ ...

pythoncssscrapy

Connect a button to a function in the controller and transmit data from the view to the controller in the Model-View-

Having an issue with jQuery AJAX and binding a button to a controller action. I've set it up like this, but it's not functioning as expected. @model InventoryTest.MyModel @using (Html.BeginForm(new { id = "itemTypeForm" })) { <input type ...

jqueryajaxasp.net-mvcasp.net-mvc-4

What is the process to obtain the child theme URL in WordPress?

Currently, I am working on creating a child theme for my WordPress website. I have successfully uploaded the assets folder which contains both CSS and JavaScript files. This child theme will be completely customized to suit my needs. Within the <head&g ...

javascriptphphtmlcsswordpress

Align the text at the center within a relative div without specifying its size

In the structure of my HTML, I have the following simplified layout: <table> <tr> <td> <div class="PromptContainer"> <span class="Prompt">Prompt text</span> </div> <input type="t ...

htmlcsspositioningcss-positionvariable-length

Error message indicates failure of switch case, resulting in invalid output of

My BMI calculator was working fine until I switched the conditionals to a switch statement for cleaner code. Now, the code is breaking and the result variable isn't being set properly for display. Do you have any ideas on what could be missing here? ...

javascriptjquery

What is the rationale behind using :: before display: inline-block in Angular Material MDC's mat-mdc-form-field-error-wrapper, causing substantial padding?

I recently made the switch from Angular Material to Angular Material MDC in preparation for upgrading to Angular 17 from version 15. However, I've noticed that some styles are now broken. One issue I'm facing is a significant padding between the ...

cssangularangular-materialupgrade

The dimensions of GridStack items specified in pixels for both height and width

I am facing a challenge with my GridStack items, which each contain elements like graphs that need to be re-rendered when the size of the gridstack item (cell) changes. I am attempting to use the change event on GridStack to detect the modified items and t ...

javascriptjquerygridstack

What is the best way to retrieve the previously chosen value from one dropdown and populate it into another dropdown when

I have 3 choices available. When the user selects the third option, a jQuery onchange event is triggered to send the variable to another PHP file for database validation based on the selected id. The challenge lies in how I can also include the variables f ...

javascriptphpjqueryhtmlmysql

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

phpjqueryhtmlajax

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

In the process of creating a dynamic form, the number of textboxes is determined by the situation at hand. Each textbox is assigned an arithmetic formula, which is obtained from a database table. The structure of my form will be as follows: <div ng-ap ...

javascriptjqueryangularjs

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar