Skip to main content
nigelh70638339
nigelh70638339
Inspiring
July 11, 2018
Answered

Gaps between divs on responsive page

  • July 11, 2018
  • 3 replies
  • 5124 views

Hello,

I am starting one of my websites from scratch and have run into a really annoying problem. The problem is that I have a gap between two divs which only shrink when I narrow the browser.

This is the code:

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

<head> <meta name="robots" content="INDEX,FOLLOW"/>

  <meta name="robots" content="noimageindex"/>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

                <meta name="description" content="Ultimate Trumps is a dedicated Trumps brand that is specific to marketing strategy while keeping the traditional game of Trumps.">

        <meta name="keywords" content="Top Trumps marketing, Sales and Marketing, QR Code with Top Trumps, QR code for Sales and Marketing">

    <title>Ultimate Trumps, the home of Trumps for Marketing and Sales.</title>

        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">

   

</head>

    <body>

   

    <div id="wrapper">

   

    <div id="header">

   

    <img src="images/Logo.png" width="210"></div>

   

    <div  id="headertext">

   

    <p>Ultimate Trumps is a dedicated brand that combines the fun of Trumps with the busy world of Marketing and Sales.</p>

   

    </div><!--end of headertext-->

   

    </div><!--end of header-->

   

    </div><!--end of wrapper-->

   

   

   

</body>

   

    </html>

and this is the css:

@1552174 url('https://fonts.googleapis.com/css?family=Sansita');

body {background-image: url(../images/Cloud_2.png);

  background-repeat: repeat-x;

  background-color: #78bbfa;

  max-width: 100%;

  font-family: Sansita, sans-serif;

  font-size: 14px;

  display:flex;}

#wrapper {margin: auto ;

  max-width:80%;

  height: auto !important;

  padding: 10px 10px 10px 10px;

  border: 2px #FFFFFF solid;

  border-radius:10px;

  box-shadow:2px 2px 5px #666;}

#header {max-width: 100%;

  margin: auto;

  text-align:center;

  height: auto !important;

  width: auto !important;}

#header, img {max-width:auto;

  float:left;}

#headertext {float:right !important;

  left:auto;

  max-width:40% !important;}

#headertext p {text-align:justify;}

Hopefully I am not too far off from it being correct.

Any help is appreciated!

Thanks in advance!

This topic has been closed for replies.
Correct answer osgood_

OK, I have tried the code (I added the script to my css file). In Firefox it works good but in Chrome and Safari the logo is stretched vertically and does not change when the browser is resized.

Thanks!


nigelh70638339  wrote

OK, I have tried the code (I added the script to my css file). In Firefox it works good but in Chrome and Safari the logo is stretched vertically and does not change when the browser is resized.

Thanks!

Try the revised code below, flexbox is stretching the image vertically on account of it NOT being in some kind of container. I've now wrapped it in a <figure></figure> container and updated some of the css:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Ultimate Trumps</title>

<style>

body {

background-image: url(http://www.ultimate-top-trumps.co.uk/test/images/Cloud_2.png);

background-repeat: repeat-x;

background-color: #78bbfa;

max-width: 100%;

font-family: Sansita, sans-serif;

font-size: 14px;

}

#wrapper{

margin: auto ;

width: 80%;

max-width: 1200px;

padding: 10px 10px 10px 10px;

border: 2px #FFFFFF solid;

border-radius:10px;

box-shadow:2px 2px 5px #666;

}

#header    {

display: flex;

}

#header img {

max-width: 100%;

height: auto;

}

#header p {

flex 1;

padding: 10px 0 0 0;

margin: 0 0 0 30px;

}

@media screen and (max-width: 768px) {

#header p {

width: 60%;

}

}

@media screen and (max-width: 480px) {

#header    {

flex-wrap: wrap;

justify-content: center;

}

#header p {

width: 100%;

margin: 0 0 0 0;

}

}

figure {

margin: 0;

padding: 0;

max-width: 210px;

}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">

<figure>

<img src="http://www.ultimate-top-trumps.co.uk/test/images/Logo.png">

</figure>

<p>Ultimate Trumps is a dedicated brand that combines the fun of Trumps with the busy world of Marketing and Sales.</p>

</div>

<!--end of header-->

</div>

<!--end of wrapper-->

</body>

</html>

3 replies

pziecina
pziecina
Legend
July 12, 2018

As I said in my first reply, you are not telleing flexbox how to work. By not including things like flex-flow, or flex-basis, flexbox is defaulting to its initial value settings.

That means that everything inside the flex container is set to flex-direction:row;, flex-wrap:nowrap;, flex-grow:0;, flex-shrink:1;, flex-basis:auto;.

Result - All your flex child elements are displayed in one long row, (no wrap), All the flex child elements will not grow but space themselves depending on content, the flex child elements will however shrink as the viewport gets smaller down to a min-width of the content (for text that could be each individual character), a flex-basis of auto means that the size of each flex child element will be dependant on any min values in the css or content.

If you place a border around each flex child element, you will see better what is happening. Also as you add more child elements you will see the danger of not specifying a flex-flow.

flexbox specs -

https://www.w3.org/TR/css-flexbox-1/

pziecina
pziecina
Legend
July 11, 2018

In addition to osgoods answer, the problem may simply be that you do not have enough content.

You have set the display to flex, (flexbox) but you have not set any flex basis, or told the browser how you wish the flexbox child items to work. You should also use content align to tell the browser how to align content in a flexbox child container, as floats, (whilst they do work in your example code) are in some circumstances ignored in a flexbox layout.

O
osgood_
Legend
July 11, 2018

I dont think youre giving us enough to determined where this gap is. Could you upload the page and link to it?

The code youve supplied looks a bit goofy to me but until we know what layout you are trying to acheive its a bit difficult to provide a comprehensive answer.

nigelh70638339
nigelh70638339Author
Inspiring
July 12, 2018

The website is at

Ultimate Trumps, the home of Trumps for Marketing and Sales.

Its very simple as I am rebuilding it.

Thanks in advance

O
osgood_
Legend
July 12, 2018

nigelh70638339  wrote

The website is at

Ultimate Trumps, the home of Trumps for Marketing and Sales.

Its very simple as I am rebuilding it.

Thanks in advance

I cant actually see what gap you are referring to.......it looks okj to me in Firefox and Chrome?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices