Skip to main content
C
conorw69881339
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
Nancy OSheaCommunity 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
C
cdeatherage
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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices