Hi there,

 

Was doing this job for a client but I've now hit a brick wall and I must say it isn't a problem I've ever experienced before. I use a 1024x768 monitor and to me everything looks perfect. But when I delivered it to the client, he had a bigger screen size and it looked terrible. The elements were so far apart from each other, and I was just confused as to why it was doing it.

 

Here's a picture of what it looks like:

 

 

And my code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Thessaloniki</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/sticky-footer.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Begin page content -->
    <div class="container">
		<div class="right">
			<h1>Les zazoos/thessaloniki/08</h1>
		</div>
			</div>
	
	<div class="left">
		<p><img src="img/featured.jpg" alt="Featured Image"></p>
	</div>
	
	<div class="right">
		<p class="close">close</p>
		<div class="img2"><p><img src="img/rectangles.jpg" alt="rectangles"></p></div>
	</div>
	
	<div class="right2">
	<p></p>
	<p>floor area: interior 550 sq.m. open air 420 sq.m.</p>
	<p>Thessaloniki, 2008</p>
	<p>A notorious setting for the city of Thessaloniki, situated by the estate where the former king of Greece used to reside when in town. A privileged space with an immaculate sea and city view.
	The goal was to achieve the immediate but delicate crossing between the different uses.
	We produced a balanced mixture of textures and colour, materials and light, in order to create a luxurious yet relaxing atmosphere.
	All furniture is purpose-designed by arkteam.</p>
	
	<p>arkteam architects
	senior architect:
	Wassily Karalasos</p>

	<p>photos:
	vavdinoudis-dimitriou / studiovd</p>
	</div>

    <div id="footer">
       <div class="right">
		<a href="#">about</a><br />
		<a href="#">contact</a>
      </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

CSS:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text-muted {
  margin: 20px 0;
}

/* Custom CSS Below this line */
.right {
	float:right;
	padding-right:20px;
}

.right a {
	color:black;
	text-decoration:none;
}

.right a:hover {
	color:black;
	text-decoration:underline;
}

.left {
	float:left;
	padding-left:20px;
}

.right2 {
	max-width:350px;
	float:right;
	padding-right:200px;
}

/* Mobile Views */

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

	body { font-size: 1.5em; }

	.right {
		width:100%;
		display:block;
		text-align:center;
	}
	
	.right2 {
		min-width:95%;
		display:block;
		max-height:100%;
	}
	
	img {
		min-width:100%;
	}
	
	.img2 {
		display:none;
	}
	
	h1 {
		font-size: 2em;
	}

}

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

	body { font-size: 1.5em; }

	.right {
		width:100%;
		display:block;
		text-align:center;
	}
	
	.right2 {
		max-width:95%;
		max-height:100%;
		display:block;
	}
	
	img {
		max-width:100%;
		max-height:100%;
	}
	
	.img2 {
		display:none;
	}
	
	h1 {
		font-size: 2em;
	}

}

Hopefully someone can help me.

 

Thanks,

Daniel.

Give the overall site width a max width.

Give the overall site width a max width.

 

This. Elements will simply have free-reign and will expand unless you constrain them inside your container.

Hi,

 

Tried this. I tried adding max-width:100%; to both the body{} and the container class with this result, and it looks nothing like it should:

 

Live site: http://surgenetwork.co.uk/john/

 

What it should look like:

You need to use a media query like you have already and specify a max-width only when the browser window is past a certain width, for example 1024px. Setting it to be 100% will just force it to stretch to the edges of the viewport and your content will scatter.

You need to use a media query like you have already and specify a max-width only when the browser window is past a certain width, for example 1024px. Setting it to be 100% will just force it to stretch to the edges of the viewport and your content will scatter.

 

Ah I see, I am still quite new to media queries lol.