Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflowing the display and iframes being too large that need to be addressed. Despite hours of searching online, I have been unable to find a solution.

One thing I have discovered is changing overflow-x: auto to overflow-x: hidden in the CSS file can help eliminate overflow issues.

If anyone has tips on how to improve this specific page, I would greatly appreciate it. Please feel free to inspect the code using browser tools (CTRL+SHIFT+I).

  • How can I resize iframes, text, images, etc., based on the display's width and height?
  • What is causing the footer text to extend beyond the screen, and how can I rectify this issue?
htmlcssiframeresponsive-design

Answer №2

To minimize the chance of overlaps on your page, consider implementing the following configuration:

html, body {
 // reset the browser settings
 margin: 0;
 padding: 0;
}

* {
 box-sizing: border-box; // ensures padding and border do not affect element dimensions
}

img {
 max-width: 100%; // prevents images from exceeding container size
}

// more information at https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Using 'box-sizing: border-box;' will solve most overlap issues. However, in some cases where overlap persists, you can use calc() function to adjust dimensions, like so:

element {
 width: calc(100% - 30px);
}

In the specific case at , the issue is caused by setting a fixed width for the iframe element.

For creating responsive websites, utilize media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.

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

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

Does anyone know the ins and outs of how the website www.nikebetterworld.com was created?

Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...

javascriptjquerycssweb

Performing PHP MySQL table database insertion utilizing the $_GET approach using Codeigniter-3 and Dropzone-4.1 plugin

Currently working with CodeIgniter 3 and running into an issue with "id_case" showing as undefined index. When I click a link in index.php: <?php echo "<td><a href='/ci_dropzone/?id_case=".$row['id_case']."'>Upload File ...

phpmysqlcsscodeigniter-3

Animating Brightness and Contrast in CSS

I come from a strong background and I am looking to create a dynamic loop that changes the brightness using CSS specifically on Chrome. The goal is to have the background color match the user's profile, providing a unique experience each time. For ex ...

css

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

Click here for the image reference showing the 0ms potential saving message I'm having trouble with a warning in Google PageSpeed and I've tried everything. This is the code I'm using to define the font-family: @font-face { font-family: ...

htmlangularseofont-facepagespeed

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width https://i.sstatic.n ...

javascriptcssbrowsercross-browserpixel

Designing the Irish flag solely with HTML and CSS: a step-by-step guide

I have successfully created the Indian flag using HTML and CSS, with the exception of the Ashok Chakra. Now, I am looking to create the Irish flag which features a vertical tricolor design, unlike the horizontal tricolor layout of the Indian flag. Can anyo ...

htmlcss

Visit the embedded AJAX feature that is failing to show any results

I've been working on this seemingly simple problem for days now, but I'm still stuck. I have the following Go code... package main import ( "fmt" "net/http" "html/template" "database/sql" _"github.com/mattn/go-sqlite3" ...

htmlajaxgo

Sending a PHP object as the value of an HTML radio button

When dealing with a custom object that needs to be passed as a form value in a radio button selection, the usual method involves invoking the toString() function on the object. However, this simply converts the object to a String, which may not be ideal fo ...

phphtmlforms

Revise HTML form using variable obtained from prior form

I thought this would be a simple task, but for some reason I can't seem to figure it out and my online searches have been unfruitful. So here's the situation: My website consists of three pages. On the first page, the user fills out a form which ...

htmldjangoforms

Enable jquery offsetParent() function

$(document).ready(function(){ $("button").click(function(){ if ($("p").offsetParent().css("background-color") === "red") { $("p").offsetParent().css("background-color", "yellow"); } else { $("p").offsetParent().c ...

javascriptjqueryhtmlcss

Creating custom themes in React Native using dynamically loaded JSON data

Is it possible in React Native to override custom styles with dynamically fetched font-size and background color values from a server's JSON data? I am looking to incorporate this JSON data theme into my style themes. Can you provide the syntax for cr ...

cssajaxreactjsreact-nativereact-redux

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...

javascripthtmlgrid-layout

Can you provide step-by-step instructions on how to customize styles with MUI in my application?

I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful. For example, Method 1: import React from 'react' import { Typography } from '@mui/material& ...

cssreactjsmaterial-ui

Table borders not displaying properly in Chrome when cells are hidden

I'm dealing with a peculiar issue regarding the display of borders in Chrome when individual cells are hidden within an HTML table. The borders disappear, despite being defined for the row and table elements. Does anyone have experience with this spec ...

htmlcssgoogle-chromehtml-table

Using onclick events, manipulating innerHTML, and dynamically generating tables

Below is the code snippet: window.onload=function(e){ //Created by Firestar001 var X; var Y; var board=""; var rizzalt=document.getElementById("rezzalt"); var letters = new Array; letters = ["A","B","C","D","E","F","G","H","I","J"]; for(a=0; a<=9 ...

javascripthtml

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

Material-UI: Eliminate the missingOppositeContent:before element from TimelineItem

I'm currently using Material-UI to construct a timeline. Here is the code snippet I am working with: <Timeline align="right" className={classes.monthlyContainer}> <TimelineItem > <TimelineSeparator className={class ...

cssreactjsmaterial-ui

What is the best way to create a JavaScript "input" field that only accepts vowel letters?

Is there a way to create an "input" field that only accepts vowel letters? Additionally, I want to ensure that copying and dragging text into the input field will also be filtered out. <div class="field"> <input class="fie ...

javascripthtmlinputtext

Utilizing Bootstrap 5 Grid to blend fixed and dynamic width elements within a single row

I am currently working on developing a grid system for my Blazor application that features small fixed-size columns with one large column. Instead of dividing the grid into 12 columns using col-xs-*, I have opted to set custom widths without using the col ...

htmlcssbootstrap-5