The image overlay in the div remains fixed in a large screen size but does not stack when the screen size

Sorry for the not-so-great title, I'm still learning the terminology.

I have a situation where a div is covering part of a background image when the screen is wide. However, on smaller screens, I want that div to move below the background image instead of continuing to cover it up—just like in this example:

https://codepen.io/Ywehc/pen/KQqQeN

<div class="container-fluid" style="width:cover">
    <img src="https://images.unsplash.com/photo-1490641525855-f5ffa411459d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85bad8135a13687bbd2ac661023e8dc4&auto=format&fit=crop&w=1189&q=80" style="width:100%">
  <div class="overlaid-div" style="background-color: blue; height: 15em; width: 20em; margin-left:50%; margin-top: -100px; position: relative">
  </div>
  <div class="randomelement" style="width: 30em; height:10em; background-color: black">
  </div>
</div>

Basically, I want the overlay to stay for large screens but stack the divs vertically as the screen gets smaller so that the blue div doesn't cover anymore.

Thanks so much!

htmlcssbootstrap-4

Answer №1

To achieve this effect, simply include a single media query in your code (make sure to adjust the break-point width as needed).

@media only screen and (max-width: 700px) {
  .overlaid-div {
    /* Use !important to override any inline margin styles */
    margin-top: 0 !important;
  } 
}

https://example.com/unique-link

Answer №2

Implement this in your CSS code. For adjusting margins based on screen size, make use of @media

@media only screen and (min-width:500px){ // Adjust the value according to your smallest screen width
  .overlay-container {
    margin-top: 0%
  }
}  
@media only screen and (min-width:1200px){
  .overlay-container {
    margin-top: -15%
  }
}

Also, remove margin-top from internal styling

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

Non-responsive Click Event on Dynamically Created Div Class

I am facing some uncertainty in approaching this problem. In the HTML, I have created buttons with additional data attributes. These buttons are assigned a class name of roleBtn. When clicked, they trigger the jQuery function called roleBtnClicked, which ...

javascriptjqueryhtmlclickjquery-events

How to effectively combine css() and delay() in jQuery?

fid: https://jsfiddle.net/k13sazuz/ Is there a way to create a delay chain for CSS rules using jQuery? $('.two').css('background','blue').delay(11800).css('background','red'); ...

javascriptjqueryhtmlcss

Setting background colors for classes based on an array

I have a total of six div elements on a single page, all sharing the same class. My goal is to give each one a unique color from an array I have prepared. I want to avoid any repetition of colors among these divs. Currently, I have managed to assign backg ...

javascriptcssarrays

Dealing with empty POST request bodies in Node.js Express is a common challenge

In my Node.JS project using Express framework, I am encountering an issue while trying to access the body of a POST request. The POST request is being sent through an HTML form, and upon checking with WireShark, I can see that the request is indeed getting ...

javascripthtmlnode.jsexpresspost

Update data dynamically on a div element using AngularJS controller and ng-repeat

I am currently navigating my way through Angular JS and expanding my knowledge on it. I have a div set up to load data from a JSON file upon startup using a controller with the following code, but now I am looking to refresh it whenever the JSON object cha ...

javascriptjqueryhtmljsonangularjs

Click on the navigation bar buttons to toggle between different divs and display multiple information boxes simultaneously

Here is the current code snippet... $("#contact").click(function() { if ( $( "#contact_div" ).length ) { $("#contact_div").remove(); } else { var html='<div id="contact_div" class="contact-info"><p>Contact info</p&g ...

javascriptjqueryhtmlcss

The excessive height of a Bootstrap 5 row is causing the image to overflow beyond the container

I am currently working on setting a maximum height for a banner I am designing in bootstrap5. Here is my code snippet: .banner { background: red; max-height: 50px; } <head> <title>Example</title> <meta charset="utf-8" ...

htmlcssbootstrap-5

Manage positioning of input elements within group button arrangements

I'm attempting to align the firstname, lastname inputs, and button on the same line. The combined width of the above three elements should be equal to the width of the 'xxxxxxx' input. You can view the code here: http://jsfiddle.net/zxb5 ...

twitter-bootstrap-3bootstrap-4

ng-disabled directive not functioning as expected

Trying to develop a customized button directive, I aim to utilize the ng-disabled attribute and link it to a variable within the scope. Check out the HTML snippet below: <div ng-controller="MyCtrl"> <btn dis="disableBtn"></btn> </d ...

javascripthtmlangularjs

Navigating nested loops within multidimensional arrays

Currently, I am experimenting with nested loops to search through nested arrays in order to find a specific value called "codItem". Below is a test model for the array (as I do not have access to the original fetch request on weekends): let teste = [{ it ...

javascripthtmlarraysloops

Eliminate the golden hue from the input field when autofill is activated

Can anyone help me figure out how to get rid of this unsightly chrome background that appears when autofill is enabled? (See below for reference.) I've attempted the following solutions: *:focus { outline: 0; } input:-webkit-autofill { -webk ...

htmlformscssinput

There seems to be a PHP syntax error within the INSERT INTO statement, resulting in SQL state 37000 when executing SQL

Error Caution: odbc_exec() encountered an SQL error: [Microsoft][ODBC Microsoft Access Driver] Syntax error in INSERT INTO statement., SQL state 37000 in SQLExecDirect in E:\DEP\Prog\PHP6\starcraft\starcraft\personnage_trai ...

phphtmlmysqlsqlsql-server

Guide on incorporating HTML data into an existing webpage

Requesting assistance in creating an HTML page that features a dynamic drop-down menu. The drop-down should trigger a list to appear upon selection, which can be sourced from either a text file or plain HTML document. The envisioned functionality involves ...

htmlcss

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

javascriptjqueryhtmlcssresponsive-design

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

Alternative solution to avoid conflicts with variable names in JavaScript, besides using an iframe

I am currently using the Classy library for object-oriented programming in JavaScript. In my code, I have implemented a class that handles canvas operations on a specific DIV element. However, due to some difficulties in certain parts of the code, I had t ...

javascriptjqueryhtmloopcodeigniter

Social media platform displaying visual content organized by likes and showcasing the number of images

Hey there, I'm in need of a jQuery image gallery plugin that doesn't load all the images at once when the page loads. Just to give you an idea: If there are 25 images in the menu, I would like to display only four images with a "+21 more" option ...

jquerycsshtmlimage-gallery

What is the best way to create a clickable background for a modal window?

I am looking to add a chatbox feature to my website and have been utilizing Bootstrap Modal for this purpose. My goal is to keep the modal open even when the user clicks outside of it, while still allowing them to interact with the background of the websi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

javascriptphphtmlajax

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React. One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variabl ...

cssreactjsbootstrap-4