Tips for creating a responsive div and its inner content

In my current project, I am working with a div containing 4 inner divs. These inner divs have fixed positions and I am struggling to make the overall layout responsive while keeping each individual div in its original position. Here is my code on jsfiddle.

I have set the positions of the inner divs using margin-top and margin-left properties.

.one{
    margin-top: 16em;
    margin-left: 2em;
    position: absolute;
}
.spinner.two {
    margin-top: 20em;
    margin-left: 1em;
    position: absolute;
}
.spinner.three {
    margin-left: 4em;
    margin-top: 23em;
    position: absolute;
}
.spinner.four {
     margin-left: 14em;
    margin-top: 19em;
    position: absolute;
}

Despite my efforts, I have not been able to achieve responsiveness. Any assistance would be greatly appreciated.

Answer №1

I have developed a more responsive jsfiddle that adjusts according to the width of the device. Check it out here

.one { margin-left: 7%; }
.two { margin-left: 4%; }
.three { margin-left: 17%; }
.four { margin-left: 40%; }

Key changes I made include:

  1. Eliminating unnecessary absolute positions
  2. Setting the active area width to 100% of its container for maximum responsiveness to different browser widths
  3. Using relative positioning based on % width instead of fixed pixels or ems

While it may not meet all your requirements, it is definitely a more responsive solution than before.

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

Exploring Nested XML: Displaying nested XML data dynamically on an HTML webpage

Request: Clients are able to supply any XML file (along with an XSD file that includes the schema of the XML file) containing data. I am required to display a 'data preview' on the asp.net core website and save the Schema of the XML in a hierarch ...

Creating an editable list item with jQuery: A step-by-step guide

I am trying to create a user-friendly interface where users can view and edit their information in a listview. The data will be retrieved from a database and displayed in the listview. My goal is to make the listview editable, so when a user clicks on it ...

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

I'm in the process of developing a webpage with form controls (2 in this example). Here's my code: <body> <div class="option_choice_global"> Select your options <div class="col-xs-2"> <lab ...

Exploring the Wordpress Navigation Hierarchy

Recently, I've been working on customizing a Wordpress Theme called iconic-one for a friend of mine. Overall, the customization process has been going smoothly, but I have encountered a roadblock. I made some changes to the style of the navigation bar ...

import an external JavaScript file into another JavaScript file

Is there a way to include an external JavaScript file into tinyMCE and access all its functions? For example - I want to integrate jQuery Mobile with tinyMCE and make all its functions available. This problem arose while attempting to incorporate the jQ ...

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

Creating a Kendo Grid that mimics the appearance and functionality of an

Can someone help me with styling my Kendo grid to match the look of a basic HTML table? I want to use the table style I already have set up instead of the default Kendo style. Is there a way to achieve this? #resultTable th { cursor:pointer; } #result ...

What is the best method to transfer text entered in one textarea to the output of another?

I recently picked up JavaScript again and encountered an issue while developing an app. I am struggling to pass input from one textarea to another, where the text should be converted to uppercase. I attempted to tweak code from w3, but I prefer to achieve ...

Issue with PHP and CSS: Navigation bar does not properly indicate the current active tab

When attempting to display a webpage with a tabbed style navbar that changes upon clicking, I am encountering an issue. The desired result is shown in this image: https://i.sstatic.net/xR9zw.png However, after clicking on the links multiple times, the ou ...

The dropdown-menu is positioned in a different location than its relative position

Utilizing the bootstrap dropdown feature in the navigation bar with a menu (represented by three dots) icon https://i.sstatic.net/vR13Z.png However, the issue arises on mobile devices. When I open the navigation bar and click on the menu button, the dropd ...

Disappearing Div Dilemma: The Mystery of the Responsive Design

I am currently facing an issue where two div elements (`.left` and `.right`) are not displayed vertically when the width value is less than 800px. Strangely, the `.left` div disappears when I try to adjust the width. I have shortened the code for clarity. ...

The MinWidth property in ColumnDefinition is not functioning as expected

Currently, I am encountering an unusual issue while using a Grid in WPF (XAML) and setting the MinWidth property in a ColumnDefinition. When I have 9 ColumnDefinitions with 'Width="*"' specified for each one, and then apply the MinWidth property ...

Having issues with referencing external JavaScript and CSS files in Angular 6

Dealing with an angular6 project and a bootstrap admin dashboard template, I'm facing issues importing the external js references into my Angular application. Looking for guidance on how to properly import and refer to external Js/CSS files in an angu ...

It is impossible for me to utilize inline SVG as a custom cursor in CSS

Below is the code I have written. I am attempting to change the cursor using an inline SVG, but it doesn't seem to be working as expected. However, when I use the same code as a background, it works perfectly: .container { width: 50vw; height: ...

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...

Excluding child elements in JQuery

My DOM object contains the following HTML: <div class="parent"> this is my <span>11</span> original text i <span>23</span> want <div class="child1">Lorem Ipsum is simply dummy text</div> <div class= ...

Validating PHP code to ensure that either one of two form fields is filled in

I have been working on a website that utilizes javascript for various functions and PHP-based Captcha code to validate form fields. Everything is functioning well, but the form can still be submitted even if none of the fields are completed. I require at ...

What could be causing my bootstrap carousel slider to stay stuck in place?

Hey everyone, I'm having trouble getting the carousel from Bootstrap to work properly. I copied the code without making any changes, but for some reason, the carousel is not functioning (can't move to the next slide). Does anyone have a solution ...

Ways to retrieve anchor tag values from an AJAX response without a defined class

if(ajaxRequest.readyState == 4) { var response = ajaxRequest.responseText; response=response.split('^^--^^'); var buname=response[5].split('^^|||^^'); //rest code } The AJAX request has returned the following code, now stored in the va ...