Skip to main content
Participant
September 20, 2018
Question

Expanding box problem

  • September 20, 2018
  • 2 replies
  • 577 views

I have an "expanding box problem" in browser compatibility: I have an image which I want to shrink to fit small browser screens, instead it stays fixed, overflowing the box. I've tried resetting the width, but every image is then reset, not what I wanted. New to CSS and strugging...


Here's the page: www.conorwalton.com/index11a.html

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Community Expert
September 20, 2018

You have a number of errors stemming from obsolete & outdated coding practices.  For example, ALIGN is deprecated and should not be used in HTML as some modern browsers will ignore it.

Showing results for http://www.conorwalton.com/index11a.html - Nu Html Checker

To make the main image responsive and centered, use CSS instead of HTML.  Copy & paste the following code into a new, blank document.  Preview in browsers and resize viewport.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Flexbox</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

/**Desktops**/

body {

    width: 75%;

    margin: 0 auto;

    background: #222;

    color: gold;

    text-align: center;

    border: 5px solid silver;

}

/**Mobile Phones**/

@media (max-width: 530px) {

body {

    width: 95%;

    border-color: green

}

}

/**Tablets**/

@media (min-width: 531px) and (max-width: 1024px) {

body {

    width: 80%;

    border-color: red

}

}

.main_image {

    max-width: 100%;

    display: block;

    vertical-align: baseline;

    margin: 0 auto;

}

.flex_container {

    display: flex;

    flex-flow: row wrap;

    justify-content: center;

    align-items: center;

}

.flex_container > div {

    background-color: #555;

    width: 100px;

    margin: 10px;

    text-align: center;

    line-height: 75px;

    font-size: 30px;

}

</style>

</head>

<body>

<header>

<h1>My 1st Responsive Website</h1>

<nav>Link | Link  | Link</nav>

</header>

<img class="main_image" src="https://dummyimage.com/602x304" alt="placeholder">

<main class="flex_container">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

<div>10</div>

<div>11</div>

<div>12</div>

</main>

<hr>

<footer>My Footer</footer>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
Inspiring
September 20, 2018

The reason it stays fixed is that you have not coded any media queries or styles that establish how to handle the image. What you do have is four linked css files which show html code but no style codes, and the css you did embed in the head of the index file contains nothing that tells the browser how to handle to your image.

Out of curiosity is there some reason you included all of the conditionals for earlier versions of IE? I personally wouldn't bother because of how old they are.

Chris