CODEWITHSUNDEEP
csshtml
hiker77
hiker77

Reputation: 1

Box size won't adjust accordingly when screen is resized

I'm new to HTML and CSS and am attempting to code a responsive web site. But when I resize the screen, the black striped box's position doesn't move up when the screen shrinks. It seems locked into place and there is a gap between it and the slide show above that gets wider the more the screen gets shrunk. I looked through all the other questions on here and tried position:relative, but I can't get it to work. Can anyone tell me how to get the box position to move up with the rest of the page elements when the screen is smaller? Thank you very much. Here is the link:

http://thehotelfrankfort.com/

HTML:

<div id="outerbeforecontent">
<div class="light">
<div class="container">
<div class="row">
<div class="twelve columns">
<p class="slider-desc">Centered in Frankfort’s historic Main Street, just two blocks from one of the most picturesque beaches of Lake Michigan, sits the historic Hotel Frankfort. Our 83 year-old boutique hotel boasts 17 guest rooms, all with private baths, individually controlled heating and air conditioning units and each decorated with a unique theme. An unforgettable gourmet continental breakfast is included in your stay. Our larger suites feature whirlpool tubs or sauna, two-story rooms, and even a fireplace - perfect for your spectacular Northern Michigan getaway! Feel like dining in? We have a full-scale restaurant, dining room and bar along with corporate conference facilities, with gourmet catered meals available for gatherings of up to 100. Come let us serve you in style and experience all Northern Michigan has to offer. From biking to fishing our famous salmon runs, snow skiing, sailing, or experiencing a great meal at one of our many unique restaurants, or even just watching a gorgeous sunset - Frankfort is the perfect place to explore! Whatever your pleasure, you’ll be charmed by the Hotel Frankfort’s blend of old world graciousness, modern-day amenities and peerless personalized service.</p>
<div id="pic"><img src="images/hotel_frankfort_logo_snippet.png"></img>
</div>
</div>
</div>
</div>
</div>
</div>

CSS:

#outerbeforecontent{ text-align: center; margin-top:-50px; width:100%; overflow:auto;}
#outerbeforecontent h1{ line-height:normal; font-weight:normal;}
.light{  padding: 56px 0px 0px;}

Upvotes: 0

Views: 47

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

You're specifying a fixed margin-top value of 529px to <div class="promotion"> which is why there's a fixed gap between the slider and the black stripped box even when the screen is resized. You can replace that value of margin-top with its percentage equivalent which would be:

.promotion {
     text-align: center;
     margin-top: 41%;
}

You can also use the CSS3 @media-queries over here to specify a different margin-top value when the 5 circles are inline and a different margin-top value when the 5 circles get stacked in one line ( browser window < 768px).

Upvotes: 1

Related Questions