Edit website to be responsive based on display size-CodePudding

I work on a school project that has a website. The website is made by other graduated students and I have almost no HTML or CSS knowledge. I want the website to be more mobile friendly, meaning that every frame and object gets resized according to what display size you have. Now there is text outside the display, iframes being too big, e.t.c. I have tried to fix this for hours by searching online without any major results.

The thing I've discovered is that changing from overflow-x: auto to overflow-x: hidden (in a CSS file) can help to remove overflow/bleed.

If you have any tips on how I can improve this page it would be strongly appreciated. Feel free to inspect the code using browser tools (CTRL SHIFT I).

How do I resize iframes, text, images, e.t.c. according to the width and height of the display?
Why is the footer text outside of the screen, and how can I fix it?

CodePudding user response：

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

read this, you can also use bootstrap grid to make things easier

CodePudding user response：

You Should be use media query find the classes of the problematic places and rewrite them in css within that area

@media only screen and (max-width: 600px) {
   .live-map-title {
    font-size:12px;
  }
.map-iframe {
    width:100%;
  }
}

CodePudding user response：

For skips the most of overlaps that could occur in the page, try to use the configuation below:

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

* {
 box-sizing: border-box; // padding and border will not be added to width and height calc
}

img {
 max-width: 100%; // protect from images be more large than the container
}

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

box-sizing: border-box; will help you in mostly cases, but in some cases, after you inspect the element with overlap width, will can use the calc() to fix it, like:

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

In you case at https://aqpi.se/karta.html the problem is you setting a fixed width on the iframe element.

Responsive web sites are created with media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.