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>

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

Transforming ASCII Source Files into JPEG Images

I specialize in publishing technical books, available in print, PDF, and Kindle/MOBI formats, with EPUB coming soon. One challenge I have encountered is that the Kindle does not support monospace fonts, which are important for source code listings. The wo ...

Is it possible to utilize checkbox images for type="checkbox" in ng-repeat with AngularJS?

Hi there, I'm currently attempting to add a checkbox image for input type="checkbox" using ng-repeat. I've styled everything accordingly, but when I apply ng-repeat, it only works for the first item in the list. Here is what my CSS file looks lik ...

Filtering with XML parsing

My XML file has the following structure - <?xml version="1.0" encoding="UTF-8"?> <prj:Flow xmlns:prj="url1" xmlns:com="url2" xmlns:ns2="url3" xmlns:con="url4" xmlns:ns0="url5" xmlns:ns1="url6" xmlns:ns3="url7"> <prj:str> &l ...

Styling applied exclusively to the field for mobile devices

As I work on creating a navigation bar using Bulma and Vue.js, I encounter an issue with the dropdown menu behavior. When the navbar collapses into the hamburger menu, the dropdown list remains in display: block; mode. To address this, I attempted a workar ...

Discovering the method to retrieve the information of the selected item in AngularJS

My table is using the ng-repeat in the <tr> element to load content dynamically from a JSON file. Each row has a unique ID in the table. I need a way to access the inner HTML of the respective row's ID column when it is clicked. Is there a solut ...

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

I am facing an issue while trying to retrieve the content height of each webpage consecutively. When I load pages separately, I can successfully get the height of each page. However, when I attempt to fetch the content height continuously for webpages in a ...

Creating JavaScript functions that accept three inputs and perform an operation on them

Apologies in advance if there are any silly mistakes as I am new to Javascript. I want to add "salary", "pension", and "other" together, then display the result in an input field when a button is clicked. Not sure if I have used the correct tags in my cod ...

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

In preparation for a workshop, I am creating HTML slides using the xaringan package in R, which is based on remark.js. These slides are made with RMarkdown, and while this approach has been effective, I have encountered a need to disable slide numbers on s ...

Use Onblur and Onfocus events in an input field that is read-only

Here is an input field: <input class="" type="text" id="Name_11_1" name="Name" value="Your name:"> I would like to modify it as follows: <input class="" type="text" id="Na ...

What is the method to capture HTML5 validation messages using selenium?

Visit this website. When I click on log in, a User credentials form appears. If I try to login with missing Email Address or Password, I receive the following message: To find this element, I tried printing all the page HTML using driver.getPageSource(), ...

Converting Uniquely Designed Photoshop Shapes into HTML

I am working on a project to design an HTML page that features a profile picture with a heart frame. I have the PSD file with the heart frame included. The profile pictures will be rectangular in shape and should fit behind the heart frame without overlap ...

Adjusting the tab size and space size to their default settings within VSCode

I'm currently facing an issue with my VSCode setup. I am trying to configure the space size to be equal to 1 and tab size to be equal to 2 as the default for every project. However, despite my efforts, it keeps reverting back to spaces: 4 for each new ...

Using Angular directives to pre-select a default option

I am currently working on a select HTML tag with two options, and I want to set the first option as the default choice. My select element includes Angular directives like ng-change and ng-model. I have attempted to achieve this by adding selected = "select ...

Does Blazor offer a GetElementById method for C#? Alternatively, can you help me understand why my Checkbox remains checked?

I need to modify the "checked" attribute of a checkbox input element based on a model's property. The challenge arises when this "checked" attribute is part of a random list of li-elements generated by a list of models representing todo elements. This ...

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

HTML numbered list - precise sequence

Can I customize the format of my ordered list in HTML/CSS to look like this? o. Item 1 i. Item 2 ii. Item 3 iii. Item 4 Is it feasible to create a custom format for ordered lists using HTML and CSS? ...

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

Limiting the Display of Pages with PHP Pagination

Requesting assistance with updating the code to display full records. In my current setup, I am fetching records from a database and showcasing them in groups of 5 per page using the following code snippet: $num_rec_per_page=5; if (isset($_GET["page"])) ...

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

Storing the value of the current vertical scroll position in a variable using jQuery

I'm currently dealing with a challenge that involves using the value of (window).scrollTop() as a crucial variable in my project. What I aim to accomplish is to retrieve and utilize the specific scroll value at a particular moment within an if stateme ...