Gaps between divs on responsive page

Report · Jul 11, 2018

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">

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

</head>

<body>

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

</div>

</div>

</div>

</body>

</html>

and this is the css:

@Import 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!

Report · Jul 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.

Report · Jul 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

Report · Jul 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?

Report · Jul 12, 2018

The gap is between the text and the logo. I was looking for that to be closer.

In Firefox the text drops beneath the logo when I shrink the page.

I tested the page in both Safari and Firefox. I know I should test it in Chrome as well but have not got round to adding Chrome to my list of browsers.

Report · Jul 12, 2018

I don't know quite what you are trying to achieve, try the code below. At some stage especially for smart phone devices the text does need to drop below the logo.

<!DOCTYPE html>

<head>

<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: 210px;

display: block;

}

#header p {

flex 1;

padding: 10px 0 0 0;

margin: 0 0 0 30px;

}

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

#header img {

width: 35%;

}

#header p {

width: 60%;

}

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

#header {

flex-wrap: wrap;

justify-content: center;

}

#header img {

width: 210px;

}

#header p {

width: 100%;

margin: 0 0 0 0;

}

</style>

</head>

<body>

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

</div>

</div>

</body>

</html>

Report · Jul 15, 2018

Thanks Osgood.

I will give the code a try and see how it looks.

What is meant by @media screen?

Thanks again!

Report · Jul 15, 2018

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!

Report · Jul 15, 2018

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>

<head>

<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>

</figure>

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

</div>

</div>

</body>

</html>

Report · Jul 15, 2018

Sorry to be a pain Osgood!

In Firefox its good. Chrome, the logo doesn't shrink vertically and in Safari the text scrunches up and crosses the wrapper when the browser is shrunk.

Report · Jul 15, 2018

Ignore that! Sorry, I hadn't copied all the code properly! Duh!

What does the @Media screen mean and do?

Thank you!

Report · Jul 15, 2018

nigelh70638339 wrote
What does the @Media screen mean and do?

Media queries alter css values at certain browser screen widths. So for instance if you wanted a different color background on mobile devices you could do that within a media query or you could make the font larger, change an image, alter the flow of the divs etc etc

Report · Jul 15, 2018

Brilliant, thank you!

Report · Jul 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.

Report · Jul 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/