CODEWITHSUNDEEP
htmlcssresponsive-designpercentage
isolatedhowl
isolatedhowl

Reputation: 191

Responsive Design: Site not shrinking past 763px

So I'm having trouble getting my website to keep shrinking past 763px. It's all marked up with percentages and ems instead of pixels but it seems to be stuck anyways. The main image on the page is also not shrinking and instead, the left floating div beside it begins to overlap once the viewport starts to shrink.

cimmanon has helped with the overlapping issue but I'm still having problems with shrinking the image and the div it is nested in.

http://students.thenet.ca/jlandon/new/school/week5/

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"/>
<link rel="stylesheet" type="text/css" href="week5_main.css" title="Main"/>
<title>Point Grey Realty</title>
<meta charset="UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Point Grey Realty</h1>
    </header>
<div id="backer">
    <article>
        <header id="listing">
            <h2>Arthur Erickson's Golden Mile - $5,290,000</h2>
            <h3>3293 Point Grey Road, Vancouver</h3>
        </header>
    </article>
    <div id="main_image"><figure><img src="goldenmile_entrance2.jpg" alt="entrance"/></figure></div>
    <article id="listing_info">
        <h4>MLS:V940361</h4>
        <figure><img src="bryanyan.jpg"/></figure>
        <ul id="bryan">
            <li>Bryan Yan</li>
            <li>Telephone: 604-732-8322</li>
        </ul>
        <ul>
            <li>Building Type: House</li>
            <li>Bedrooms: 2</li>
            <li>Bathrooms: 2</li>
            <li>Finished Interior: 1,876 sf</li>
            <li>Floor Space: 2,347 sf</li>
            <li>Lot Size: 4,405 sf</li>
            <li>Year Built: ~1963</li>
            <li>2 Storeys</li>
            <li>Large Rec Room</li>
            <li>Age of Building: 50 years</li>
            <li>Land Size: 33.0 x 133.5</li>
            <li>Water, mountain &amp; city views</li>
            <li>Waterfront</li>
        </ul>
    </article>
    <article id="listing_history">
        <p>Designed in 1963, this was the area’s first multi-unit development. The materials chosen for this estate were brick or plaster for walls and structural bays, and pressure treated fir for the wood spans. These materials, along with brick or quarry tile flors, provide a relatively neutral background. The resulting expression is directly that of the sturdy but graceful nature of the masonry against the more tenuous and taut nature of the wood. The site commands a megnificent view of English Bay, the North Shore mountains of West Vancouver and the downtown Vancouver skyline to the east. Private south facing courtyards trap the sun and serve as entry courts from the strets. One outdoor and one indoor swimming pool were incorporated for individual owners as well as several roof gardens.</p>
        <h4>The Unit</h4>
        <p>This is a rare residential offer on the “Golden Mile” built during one of Erickson’s most creative periods. The home was the winner of the 1967 National Award for Design. As a Point Grey resident, he created this home to be perfect. To describe this masterpiece, a quote by the Concrete Poet: “Architecture has to be functional but it should allow another dimension than what people are usually content to think about. It should open the perspective of the visitor to something they haven’t experienced before. It shouldn’t be ordinary or pedestrian.” Kept in its precious originality and offered for the first and perhaps, last time...</p>
    </article>
    <div id="extra_images">
        <figure>
            <img src="goldenmile_entry_mini.jpg"/>
            <img src="goldenmile_kitchen_mini.jpg"/>
            <img src="goldenmile_dining2_mini.jpg"/>
            <img src="goldenmile_living2_mini.jpg"/>
            <img src="goldenmile_bedroom_mini.jpg"/>
            <img src="goldenmile_backyard3_mini.jpg"/>
            <img src="goldenmile_deck_mini.jpg"/>
            <img src="goldenmile_view_mini.jpg"/>
        </figure>
    </div>
</div>
</div>

CSS

body {
background-color: #335942;
background-image: url('background.gif');
background-repeat: repeat-y;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 0.875em;
color: #000000;
}

h1 {
color: #FFFFFF;
font-size: 4.5em;
}

h2 {
font-size: 2.25em;
}

h3 {
font-size: 1.5em;
}

h4 {
font-size: 1.142857142857143em;
padding-top: 5px;
}

#wrapper {
max-width: 90%;
margin-top: 2.12765957446809%;
margin-left: 2%;
margin-bottom: 2%;
}

#backer {
background-color: #FFFFFF;
max-width: 70%;
display: table;
padding: 2.12765957446809%;
}

#listing {
margin-bottom: 1%;
}

#main_image {
float: left;
max-width: 74.46808510638298%;
float: left;
}

#listing_info {
width: 15.95744680851064%;
float: right;
}

#bryan {
font-size: 1em;
}

#listing_history {
width: 100%;
clear: both;
padding-top: 10px;
}

#extra_images {
width: 100%;
padding-top: 10px;
text-align: center;
}

Upvotes: 0

Views: 206

Answers (1)

cimmanon
cimmanon

Reputation: 68329

The image on your front page is 700px wide. After you add in all of the margins/paddings on ancestor elements, it ends up coming out to about 763px. If images are meant to scale with the viewport, they are typically styled like this:

img {
    max-width: 100%;
}

Upvotes: 3

Related Questions