Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered regardless of browser size.

If a non-media query solution isn't possible, any suggestions on how to ensure all data stays aligned with the SVG when resizing the browser would be appreciated!

Check out one of the SVGs I'm working on for responsiveness (on the right hand side) here.

I've provided an example showcasing the issue in a codepen with just one percentage displayed on the SVG here.

<div id="Backup-3"></div>
<p id="percentage" class="backup3-percentage">3%</p>

#Backup-3 {
  position: fixed;
  width: 550px;
  margin-left: 73px;
  margin-top: 31px;
}

.backup3-percentage {
  position: fixed;
  color: #000;
  margin-left: 478px;
  margin-top: 96px;
  font-size: 1em;
  transform: rotate(6deg);
}
htmlcsssvg

Answer №1

My preference would be to utilize viewport units

.responsive-div {
    position: fixed;
    width: 70vw; // vw refers to viewport-width, meaning it takes up 70% of the width of the viewport
    height: 50vh; // vh stands for viewport-height, representing 50% of the height of the viewport
}

This article delves deeper into this topic

Answer №2

body{ margin:0; padding:0; 
   }
.mydiv { 
  max-width:1800px; 
  width:100%;
  position:fixed; background:red;  height:100px; border:5px solid green;    box-sizing: border-box;}
<div class="mydiv">
</div>

I believe implementing media queries would be the most effective method to ensure responsiveness of the div.

If not, you can utilize the properties width:100% and max-width for your position fixed div

Answer №3

When it comes to using position: fixed, max-width doesn't perform as expected. Here's a workaround I came up with:

`.nav{
   width: 1280px;
   position: fixed;
 }
 @media all and (max-width: 1280px) {
   .nav{
    width: 100%;
   }
 }`

If you simply set the width without utilizing @media, your block will not respond correctly.

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

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

jqueryhtmlcss

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Currently, I am sending a PHP request to a login handler using the following URL: https://example.com/test.php?username=test123&password=hiuhsda3#24 However, I need to retain the hashtag in either the password or username along with anything that come ...

phphtmlparametersrequesthashtag

Conceal certain elements from being printed by the client side on a website

Imagine logging into social media but not wanting to see the number of "likes" on posts as the page loads. For example, when you open a photo from a friend and underneath it shows "Somefriend, someotherfriend, and 123123 persons like this", you may want t ...

htmlbrowser

What could be causing my wrapper div to not clear properly?

Something seems off with my wrapper div as it's not completely wrapping the children divs vertically. I made sure to clear both of the contained divs but it doesn't seem to be working properly. Any insight on why this might be happening? Check o ...

htmlcss

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

javascripthtmlcssbootstrap-4laravel-5.8

Creating a button in HTML that deletes code from a program: a step-by-step guide

Let me illustrate what I'm endeavoring to achieve. Below is the actual code: var info = { labels: ["March", "April"], datasets: [ { label: "Primary Info", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220 ...

phphtmlcss

Update JSON data in ng-blur event using AngularJS

Could you offer some guidance on how to push the content from a text box into JSON when I click outside of the box? Below is the code for my text box: <input type="text" name="treatmentCost" class="form-control" ng-model="addTemplate" /> And here i ...

javascriptjsonangularjshtml

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

Top tip for combating form misuse in Django applications

Is there a reliable method to restrict form submissions in Django? I need the form to be submitted a maximum of 5 times from the same IP address within one hour. Can this restriction be implemented in Django? I experimented with Django Ratelimit, but unfo ...

pythonhtmldjangoforms

Navigating to User's Specific Info Page using Node.js

Would love some input on my current issue. I have a table featuring a list of users, and my goal is to display user information in detail whenever a user (which corresponds to a row in the table) is clicked. The process involves identifying which user was ...

javascripthtmlnode.jsexpress

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

Avoiding ChartJS tooltips from being cut off

I've been exploring how to prevent chartjs from cutting off its tooltips, but I haven't been able to find a config option to address this issue. https://i.sstatic.net/Knzvd.png Here's what I've attempted so far: <script> ...

javascripthtmlcsschart.js

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

javascripthtmlcssjson

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

javascriptangularjstwitter-bootstrapcssangularjs-ng-repeat

Enhance the styling of elements generated through JavaScript in VueJs with custom CSS

I need help applying CSS to elements that I dynamically created using JavaScript. buttonClicked(event) { console.log(event); let x = event.clientX - event.target.offsetLeft; let y = event.clientY - event.target.offsetTop; let ripples = document.cre ...

javascripthtmlcssvue.jsvuejs2

React does not support having two :focus selectors on a single JSX element

I'm working with a React script that includes a specific element. I want to apply more than one :focus-within selector in CSS, but for some reason only the dropdown selector is being expressed when I focus on the element. Here's the code: React J ...

htmlcssreactjsflexboxfocus

IE z-index anomaly

My line of floated divs reveals a popup when hovered over, but the popup appears under the following divs instead of on top. I've tried using z-index with no success to fix this issue. UPDATE: The problem has been resolved with some assistance, but i ...

jquerycssz-index

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

javascripthtmljsonmootools

Issue with Bootstrap modal not dismissing when using click function

This is my custom function and div. When I click the function, it executes successfully but the modal window remains visible. <script type="text/javascript> $(document).ready(function () { $("#btnRespuesta").click(function () { //al ...

jquerycssajaxtwitter-bootstrap

Enhancing the tooltip inner content in Bootstrap with a description:

Can you help me troubleshoot the code below? I am trying to add a description to numbers in my tooltip, but it doesn't seem to be working. Here is the HTML: <input id="contract-length" class="slider slider-step-2 slider-contract-length" ...

javascripthtmltwitter-bootstrap