Gap between div id boxes - with background image in them - in responsive design

HTML & CSS
1

The site shows well for desktop and tablet landscape but for smaller media a gap appears between the boxes.

What codes do i have to give under media queries (or change in the css basics)?

I tried already all kind of solutions but non so far did solve this problem. Who becomes my CSS Hero?

Here you can see the problem (in reducing your browser size):

http://www.dickettema.eu/dk_rwd/index_test.html

css (briefly):

#container {

  max-width: 1120px;
  min-width:320px;
  margin:0  auto;   }

#header {

  width: 100%; height: 141px;
  max-width: 1120px;
  margin-left: auto; margin-right: auto;
  background-image: url("dk_header_2.jpg");
  background-repeat: no-repeat;
  background-size: contain; }

#nav {

  width: 100%; height: 83px;
  max-width: 1120px;
  margin-left: auto; margin-right: auto;
  background-image: url("dk_nav_2.jpg");
  background-repeat: no-repeat;
  background-size: contain; }

#content_home {

   background-image: url("dk_content_home.jpg");
   background-repeat: no-repeat;
   background-size: contain;
   max-width: 1120px;
   min-height: 648px;
   width: 100%;
   margin-left: auto; margin-right: auto;   }

html (briefly):

<div id="container">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content_home">
<!--
<h1>...</h1>
<p>...</p>
-->
</div>
</div>
2

You seem to have fixed heights. Try height: auto - with max-heights if necessary.

3

Do you mean min-height?
No need for widths on the sub elements.
And not sure why the min-width:320px;

4

Why is the so-called “hero” image in 3 pieces? Why not just 1?

1 Like
5

Does not work! Site disappears completely!

6

Because you have no content.
There is nothing to display.

7

To adjust the header correctly I think you could try background cover with a height adjustment. E.g.:


#header { 
    width: 100%;
    height: 12vw; /* adjust height to viewport width */
    max-height: 141px; /* as the image like in below: */
    max-width: 1120px;
    background-image: url(dk_header_2.jpg); 
    background-repeat: no-repeat;
    background-size: cover;
}

#nav {
    background-size: cover; /* not a sensitive image */
}

EDIT)
Never mind, @ronpat solved your issues in post #27 below.

8

header with nav bar (as one background-image) could be possible but content changes in height in following website pages; which still gives the gap problem. As I wrote: i tried many options but non so far was of help. Hope to find on this forum the css hero! Even position: top etc. doesn’t work. Cover dus not work, etc.

9

I was missing a padding-top: 12.6% to go with height: auto for the header.

The others will need a different padding-top.

1 Like
10

^This.
A site design is built around actual content, not block of imaginary space defined by imaginary numbers.
Add actual content and the process may begin.

11

I did gave in a lot of content but that did not solved this problem!

12

That is just the beginning.

The key to RWD is that an elements size is defined by its content, not “magic numbers”.
Without content, you don’t have a page, there is nothing to style, why bother?
You are hanging wallpaper on a wall that has yet to be built.

13

go to: http://www.dickettema.eu/dk_rwd/werkwijze_2.html - for example and tell me then what your solution is, not might be, but is. Thank you.

14

Why is the text in the header an image? Use actual text.

15

The gap isn’t a hard problem to solve. Understanding the content flow is more difficult when the background images are part of an overall pattern. You mention that the content changes on different pages but how does that bottom image segment change? Does it stretch and compress or repeat (unlikely) or how do you want it to behave?

Then I assume there is to be a menubar near the top. How does that background image behave at narrowing widths or if the user chooses a larger font size than you use?

The puzzle is not the gaps as much as it is understanding how the images are to behave with different and viewports. The images are bound to distort.

2 Likes
16

If the gap isn’t a hard problem to solve, what is then your erudite solution?

17

That doesn’t solve the gap problem.

18

I’ve already given it to you.

19

You can keep denying and rebounding everyone’s advice as long as you like, but you may find it dries out after a while.

20

You meant this:

I was missing a padding-top: 12.6% to go with height: auto for the header.

The others will need a different padding-top.