Responsivness bugs with the absolute property

HTML & CSS
1

Hi, here is the code. The problem i am having is with the blogpost and imagewtext divs: it’s just not responsive and doesn’t stay in place

<div class="row text-center">
        <div class="imageWtext">
          <img class="fullWidthImage" src="http://placehold.it/400x400" alt="">
          <h1>We are here to make it easy for you</h1>
        </div>
        
        
      </div>
    </div>

<div class="blog-post">
            <h3>Blog article</h3>
            <img src="http://placehold.it/400x400" alt="">
            <a href="about.html" class="button">Learn More</a>
          </div>

css:

.blog-post{
	position: relative;
}

.blog-post> h3{
	position: absolute; 
   top: 150px; 
   left: 0; 
   width: 90%; 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}
.blog-post> a{
	position: absolute; 
    top: 200px; 
    left: 200px; 
}
.blog-post> img{
	border-radius: 5px;
}

thanks

2

The code that you’ve posted does not allow me to emulate the issue. It would be better if you could post a link to the site of a “working page” that includes enough relevant code to actually demonstrate the issue (then we can see what you see) and with a more complete description, perhaps tell what you expect to see).

thanks.

2 Likes
3

here it is : https://jsfiddle.net/npyynw2k/ everything is on the other things when it comes to the imageWtext and blog-post

4

It’s difficult to help without knowing exactly how you intend this layout to work for different sizes.
But as a general rule of thumb, it is best to avoid absolute positioning as much as possible in RWD because it will cause problems.
It’s far better to keep as much as possible in the natural document flow, to keep things fluid. Avoid magic numbers, fixed heights and widths. Such rigid rules will make the layout brittle and it will be prone to breaking when anything moves.

2 Likes
5

then whats the best way to put a text over an image on a certain place, or a button in a bottom right? isn’t absolute the only way?

6

The problem is, too much is absolute, your containers are absolute and use px positioning (magic numbers). If you must use absolute, keep it to a minimum and avoid magic numbers.
It may be that background images could work in this case.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.