Menu
I'm trying to make this page but as soon as the screen is smaller it wont make me scroll down to see more of my text. Here is the link fiddle
<html>
<div class="container_12 container clearfix">
<div class="grid_12 clearfix main_content">
<div class="content">
<div><img src="http://placehold.it/780x150"></div>
<div class="text">
<h1>title</h1>
<p> text<p>
<p> text<p>
<p> text<p>
<p> text<p>
</p>
</div>
</div>
</div>
</div>
</html>
<style>
.content{
width: 780px;
padding: 20px;
position: fixed;
left: 50%;
top: 50%;
color: #000000;
font-family: Lora BoldItalic, Lora;
margin-top: -312px;
margin-left: -390px;
}
.text {
background: gray;
opacity: 0.6;
padding: 20px;
}
</style>
Thank you so much in advance!
364
asked Jan 02 '26 00:01
I removed a few things from your CSS:
position: fixed;
left: 50%;
top: 50%;
margin-top: -312px;
margin-left: -390px;
In general (unless you really know what are you doing) using margin (especially negative values), position fixed, left and top is a bad idea because you are forcing elements to stay in a fixed position so your page will not work in all screen sizes.
I saw in your code that you are trying something with a background (is not visible in the demo) try to add the background to body not to html. I don't know what you are trying but I have a feeling that you want the page content to scroll without moving the background you will need to check this out http://jsfiddle.net/gF7Af/31/
I have the following:
.myimg{
margin: auto;
}
.content{
margin: auto;
width: 780px;
color: #000000;
font-family: Lora BoldItalic, Lora;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
