adjust the webpage to be optimized for the size of the screen

Looking to adjust the webpage layout so that it fits perfectly on the screen without the need for vertical or horizontal scrolling. Additionally, we want the image to be centered. See below for the current code snippet:

#copyright {
  top: 0px;
  right: 11;
  z-index: index 1;
}

#image {
  position: absolute;
  height: 2;
  width: 2;
  z-index: index 2;
}
<a href="https://lensdump.com/i/rSRDHc">
  <img id="image" src="https://i3.lensdump.com/i/rSRDHc.png" alt="rSRDHc.png" border="0" /></a>

<div id="copyright"> ©apple </div>

Answer №1

One issue with the overflow setting is that scrolling down to reveal more content on the page would not work as intended. To address this, it is necessary to remove the white background from the image, which seems unnecessary, and consider making the background transparent after cropping, in case a different background color is desired.

The CSS code initially set the right value to 11; however, omitting a specific measurement unit (such as pixels or rem) for this property, as well as for width and height of the image, renders it ineffective. Furthermore, the declaration z-index: index [num] is incorrect syntax and should be simply z-index: [num].

The alt attribute of the image tag contains "png file," which is misleading. Instead, it should provide a description of the image or a link to it.

#copyright {
  right: 11px;
}

#image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.7);
  z-index: -1;
}

body {
  overflow: hidden;
 }
<a href="https://lensdump.com/i/rSRDHc">
  <img id="image" src="https://i3.lensdump.com/i/rSRDHc.png" alt="rSRDHc.png" border="0" /></a>

<div id="copyright"> ©apple </div>

Answer №2

To accomplish this effect, you can utilize a parent div, flexbox, and the vh and vw units in your CSS styling.

The vh unit represents the viewport height, so 100vh equals to 100% of the window height. In this setup, I have placed the image taking up 95% of the screen with the text below occupying 5%. The vw unit functions similarly but for viewport width.

.container{
  height: 95vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }
 #image{
  width: 100%;
  height: 100%;
 }
 #copyright{
  height: 5vh;
  width: 100vw;
  text-align: center;
 }

Feel free to check out the codepen for a live demo: codepen

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

Troubleshooting Problem with React Slider: Inability to Display Images and Previous Button

I'm currently grappling with a React issue after following a tutorial on YouTube. I've been working in CodeSandbox and have encountered a problem where the images and previous button are not displaying as expected. Despite my efforts to debug, th ...

Regular Expressions in action - Substituting text within an eZ Publish XML field

Before utilizing the eZ Publish 5 API to create an Xml content, I need to make some modifications. I am currently working on implementing a Regex to edit the content. Below is the Xml code I have (with html entities) : View Xml code here http://img15.ho ...

The issue with res.sendFile is that it is failing to display

I have encountered an issue while attempting to render HTML with res.sendFile using an absolute path. The encoded HTML is being displayed unrendered within a pre tag in the response. Below is the express code I am currently using: app.get('/', ( ...

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

On my HTML invoice table, I sometimes have empty elements that cause the row to misalign. To fix this, I want to add whitespace if an element is empty. Here is the structure of the table: <div class="invoiceTable"> <div class="titles2" style=" ...

I am having trouble compiling sass in VS Code using the sass --watch command

I've encountered an issue while trying to compile sass through the terminal. Despite having already installed node.js and successfully using Live Sass, I consistently receive the following error message: sass : The term 'sass' is not recogni ...

Node.js user attempting to upload and handle files without any external libraries, solely relying on traditional JavaScript and HTML techniques

Previously, my Node.js code seamlessly integrated with any javascript+HTML project I worked on, leading me to believe there was a direct correlation between Node.js and vanilla Javascript+HTML. However, this misconception was shattered when attempting to u ...

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

Resolving Problem of Jumping When 'invalid-feedback' Appeared in Bootstrap 4 Input

There is an input with an add-on and a customized focus that includes a '%' at the end of the field, which is working fine. However, there is a small issue where the error message causes the input to jump when clicked in or out. To see the issue ...

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...

The cascading style sheet used by a lightbox

I constructed a lightbox using the following HTML code: <a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center" ...

Alert popup onclick feature is malfunctioning

SOLVED: I finally figured out the issue and it is now working perfectly. I had to manually switch to Chrome instead of using the Brackets live viewer. I want an alert box to pop up when the "Home" link is clicked on my website. I tried creating a separate ...

Using HTML and CSS to create a Contact Form

Greetings! I have come across this contact form code: /* Custom Contact Form Styling */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: v ...

Setting the z-index to place an absolutely positioned element below a relatively positioned one

I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...

Offspring of div should have equal height without the top and bottom padding

Looking to ensure that the height of child divs matches the height of the parent divs. Currently, the divs expand as the page is resized. This is for search results, so there are multiple identical code blocks. function matchHeight() { $result = $(&a ...

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

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 ...

Troubleshooting Problem with Padding in ion-content for Ionic Angular

I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout. $ ionic start myApp sidemenu Afterwards, I crafted a straightforward page featuring a list which appears as follows... <ion ...