How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1

I am looking to position 4 Facebook logos in the center bottom of my background image.

The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div.

Currently, I can center the Facebook logo within the bg div, but it is not responsive.

My goal is to have the Facebook logo consistently positioned over the bg div, so that regardless of screen width changes made by the user, the logo remains locked in place relative to the bg div.

htmlcss

Answer №1

Check out this solution:

Live Example on JsFiddle

http://jsfiddle.net/46psK/2983/

HTML Code snippet

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://s2.uploads.im/t/8LauQ.png" alt="" />
    </div>
</div>

CSS Styling

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.img-container {
    background-image: url("http://s2.uploads.im/t/VtT8j.png");
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
         background-position: center; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

Answer №2

If you want to enhance your code, consider making the following adjustments. To begin with, eliminate the col-xs-1 class from all .facebook elements in your HTML, as shown below:

<div class="col-xs-6">
    <div class="facebook"></div>
    <div class="facebook"></div>
    <div class="facebook"></div>
    <div class="facebook"></div>
</div>

In your CSS stylesheet, simply include the following:

.bg .col-xs-6{
    text-align: center;
}

.facebook{
    display: inline-block;
}

For a live demonstration of these changes, check out this DEMO

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

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up. You can see for yourself by trying to put the image and text next to each other using "float: left": http://jsfiddle.net/a7Vj8/1/ Every time I attempt to float th ...

htmlcss

A simple demo showcasing interactive HTML pages using Django and AJAX

In my search for answers, I came across the following helpful posts: How to Reload table data in Django without refreshing the page Tutorial on Django dynamic HTML table refresh with AJAX Despite the insights from these posts, I am still facing chal ...

pythonhtmlajaxdjango

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

htmlcssangulartypescript

Using PHP variables in CSS styling

Let me explain the situation. In my index.php file, I have a class called 'rectangles' which includes properties for color and size. I defined a variable named $rectangle($rectangle=new rectangles('red',25);). Additionally, I include ...

phphtmlcssinclude

Unable to transfer card from the top position in the screen

Utilizing Tailwind (flowbite) for the frontend of my project, I encountered an issue where the Navbar was overlapping the Card. I attempted using mt-8 to resolve the problem, but it did not yield significant changes. What adjustments should I make to achi ...

cssnext.jstailwind-cssstyling

Placing an item from a "stack" onto a separate line on smaller screens

My goal in Bootstrap is to achieve the design shown in this image: https://i.stack.imgur.com/9Eoen.png The first layout can be achieved by placing B and C within the same div container. The second layout can be accomplished by defining C on a new row ind ...

htmlcsstwitter-bootstrap

Styling borders of an image

I am working on an application where I have a collection of images. When the user clicks on an image, it receives a thick border around it at a certain distance. Now, I want to customize this border to reduce the spacing between the image and the border b ...

androidcss

PHP appears to be failing to gather input values from form submissions using both the POST and GET methods

I have been working on setting up a login and logout system, but I am encountering an issue with sending a hidden value for logging out. Despite trying different approaches to solve this problem, I either receive error messages (while the code actually wor ...

phphtml

How can I use AJAX to read an image file and display it on a Canvas?

Is there a way to read an image from my server using Ajax and then display it on Canvas? I am aware that this can be achieved by using normal image tags and canvas draw methods, as shown below: <img id="myImage" src="./ColorTable.PNG" style="display:n ...

javascriptjqueryajaxhtmlcanvas

Is there a syntax problem with the jQuery (this).next() statement that is causing it to not

Struggling with the implementation of a .next() selector. It seemed straightforward, but I must be missing something. Here's the current script that is not functioning as expected: $('.ITEM').hover(function (){ $(this).next('.ITEM ...

jqueryhtml

Ways to interact with elements lacking an identifier

Currently, I'm faced with an HTML challenge where I need to interact with an element labeled tasks. *<td class="class_popup2_menuitem_caption" unselectable="on" nowrap="">Tasks</td>* In my attempt to do so, I've implemented the foll ...

pythonhtmlselenium

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

javascriptregexhtmlangular

What steps are involved in extracting a Flot animation?

Check out this cool animation of a diatomic chain in action on this website: http://lampx.tugraz.at/~hadley/ss1/phonons/1d/1d2m.php I'm interested in extracting it, specifically to create a gif. The HTML script for the animation is visible: var c= ...

htmljqueryflot

Tips for adjusting the div style when resizing the browser

As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...

javascripthtmlcss

Adding a dynamic click event in HTML using IONIC 4

I've created a function using Regex to detect URL links and replace them with a span tag. The replacement process is working fine, but I'm facing an issue where when I include (click)="myFunction()" in the span, it doesn't recognize the cli ...

htmltypescriptangular7ionic4

`The dilemma of z-index in a dropdown menu nested within an animated card`

Having an issue that I have attempted to simplify in this StackBlitz example (the actual project is created with Angular components and Bootstrap, etc.): https://stackblitz.com/edit/angular-bootstrap-4-starter-njixcw When incorporating a dropdown within ...

cssangularbootstrap-4z-indexopacity

I'm looking to make my PayPal donate button smaller after noticing that PayPal is making it larger. How can I adjust the size of my customized PayPal

I am seeking your help in resolving an issue with PayPal enlarging my button from 130px x 65px to 300px x 150px. I have checked the button on both a local browser and within the Square Space editor, but the result remains the same. I even attempted to adju ...

htmlpaypal

Switching over to the latest version of Material-UI, v1.x.x

Currently, my app relies on Material-UI v0.17.0 which is not compatible with React v16.0.0. In order to make it work, I need to upgrade to Material-UI v1.0.0. I came across a migration tool here, but it only updates import statements. Many props have chan ...

javascriptcssversion-controlmigrationmaterial-ui

Frequently encountering broken styles in Magento 1.9 due to missing CSS and JS files

Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...

cssmagentocachingstyles

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

Currently, I am in the process of building a website on my laptop while following an instructor's video tutorial. It has been important for me to set the same pixel measurements as the instructor in order to replicate the design they provided. However ...

css