dynamic webpage resizing using html and css

Looking for a way to make my SharePoint window automatically resize when the user changes their browser size. I'm using the web version of SharePoint at work and don't have access to Designer.

<style type="text/css">

#dgwrap {
    HEIGHT: 1000px; BACKGROUND-IMAGE: url(PublishingImages/graybk.png); BACKGROUND-REPEAT: repeat-y; MARGIN-TOP: 75px; WIDTH: 1325px
}
.dgtopbox {
    FONT-SIZE: 9pt; HEIGHT: 200px; FLOAT: left; TEXT-ALIGN: center; MARGIN-LEFT: 350px; MARGIN-TOP: 110px; WIDTH: 700px
}
#dgtopboxleft {
    HEIGHT: 50px; FLOAT: left; MARGIN-LEFT: 350px; MARGIN-TOP: 25px; WIDTH: 200px
}
#dgtopboxright {
    HEIGHT: 50px; FLOAT: right; MARGIN-TOP: 25px; WIDTH: 200px; MARGIN-RIGHT: 300px
}
#dgtopboxother {
    FLOAT: left; MARGIN-RIGHT: 25px
}
#otherbutton {
    HEIGHT: 35px; BACKGROUND-IMAGE: url(PublishingImages/otherbutton.png); BACKGROUND-REPEAT: no-repeat; MARGIN-TOP: 70px; DISPLAY: block; WIDTH: 160px
}
#clmbutton {
    BORDER-TOP: #838b8b 1pt solid; HEIGHT: 40px; BORDER-RIGHT: #838b8b 1pt solid; BACKGROUND-IMAGE: url(PublishingImages/CLMbutton.png); BORDER-BOTTOM: #838b8b 1pt solid; BORDER-LEFT: #838b8b 1pt solid; DISPLAY: block
}
#clmbutton:hover {
    BACKGROUND-IMAGE: url(/Operations/ProviderOperations/SpecialOps/PublishingImages/CLMbutton2.png)
}
#confbutton {
    BORDER-TOP: #838b8b 1pt solid; HEIGHT: 40px; BORDER-RIGHT: #838b8b 1pt solid; BACKGROUND-IMAGE: url(/PublishingImages/CONFbutton.png); BORDER-BOTTOM: #838b8b 1pt solid; BORDER-LEFT: #838b8b 1pt solid; DISPLAY: block
}
#confbutton:hover {
    BACKGROUND-IMAGE: url(/PublishingImages/CONFbutton2.png)
}
</style>


<div id="dgwrap">
<div id="dgtopboxleft"><a title="1box" id="CLMbutton" href="####.html"></a></div>
<div id="dgtopboxright"><a title="2box" id="CONFbutton" href="####.html"></a></div>
<div id="dgtopboxother"><a title="3box" id="otherbutton" href="####.html"></a></div>

<div class="dgtopbox">
<h3>Request Policy</h3>
<p style="text-align: left">1.text here.</p>
<p style="text-align: left">2.text.</p>
</div>

</div>
htmlcsssharepoint

Answer №1

For optimal responsiveness on your webpage, consider utilizing percentages for all values, implementing max-width and max-height over traditional height and width settings, and minimizing the use of Display:Block whenever feasible. Best regards, Arjun

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

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

javascripthtmltypescriptfunction

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

htmlcssangularjsdrop-down-menu

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

I attempted to use the window.screen.width method, but it appears that the script only runs once (upon page load). I am seeking a way for the code to run continuously. Below is my JavaScript snippet: var textinSelected = document.getElementById("se ...

javascripthtml

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

javascripthtmld3.js

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

Is it possible for a div nested within another div to still occupy space on the page despite being set

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $("select#choosebook").change(function(){ $(".title").slideDown(" ...

javascripthtmlcss

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

jqueryhtmlcsstoggle

Exploring jQuery Mobile | Moving Seamlessly between Pages

I'm relatively new to JQM and I'm working on creating a mobile application using jQuery Mobile. Here's the goal I'm aiming for: I have multiple HTML pages, each with its own CSS, JavaScript, and JQM components. What I want is to be ab ...

javascriptjqueryhtmljquery-mobilejquery-mobile-pageshow

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

What is the best way to establish and concentrate on a fresh component in AngularJS?

I am working on a form that has a dynamic number of inputs, which is controlled by AngularJS. <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ...

javascriptjqueryhtmlangularjsevents

Tips for structuring a SQL query result in an AngularJS application

Forgive me if this code is not up to par with the best standards, as I am still relatively new to angular.js. The issue I am facing is that when the data is returned from my query, it appears as a block of text. Despite using echo statements in search.php ...

phphtmlmysqlangularjs

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

htmlasp.net-mvcvue.js

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

Animating an image with CSS steps to create a captivating shaking

My attempt at creating a basic animation is not producing the desired smoothness. .animate { animation: motion 1.5s steps(27) forwards; } @keyframes motion { 100% { background-position: -5778px; } } <div class="animate ...

htmlcssanimation

What could be causing the blurriness in the image?

I'm having trouble displaying an image below my navigation bar. The image I'm trying to display is located at https://i.sstatic.net/8PUa3.png and has dimensions of 234 x 156 px. However, the image appears blurry and only a portion of it can be s ...

htmlcssvue.js

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

What is the method for reverting style properties back to their CSS defaults using Javascript?

The php-generated page contains multiple elements structured like this: <td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td> There is a default style in place with additional styles ap ...

javascripthtmlcssdynamic-html

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

javascripthtmljsonobject