Help with responsive CSS header text and image

**gwmbox** · 05-12-2015, 01:51 AM

Hi all

I know I can setup different media sizes for responsive view, but I am trying to work out how I can do this dynamically via responsive css (only).

What I have is a small logo image that could be used as a background or aa an image and then there is the site title that has space between for where the logo should appear. The title is a simple two word title which should make things easier. Both the site title words and the logo need to auto resize based on screen with.

So in essence I am wanting

header text word 1 - image - header text word 2

Some css I have been playing with but not able to get it to work is

Code:

#header {
  max-width:100%;
  border-bottom:0 none;
}

#header {
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

#header #site-title {  
  height:101px;
  height:6.3125rem;
  font-size:56px;
  font-size:3.5rem;
  line-height:99px;
  line-height:6.1875rem;
  word-spacing:104px;
  word-spacing:6.5rem;
  text-align:center;
  text-transform:uppercase;
  background: transparent url(images/logo.png) no-repeat 49% 0;
  white-space: nowrap
}

The above tries to use the logo as a background, but if it would work better as a standard image I'd be happy (actually better for me) to change that

The html output I have tried several ways as shown here

HTML Code:

<div id="header">
  <h1 id="site-title"><a href="http://mysite.com/">Two Words</a></h1>				        
</div>

HTML Code:

<div id="header">
  <img src="http://mysite.com/logo.png" alt="Two Words"><h1 id="site-title"><a href="http://mysite/">Two Words</h1></a>				        
</div>

HTML Code:

<div id="header">
  <h1 id="site-title"><a href="http://mysite/"><img src="http://mysite.com/logo.png" alt="Two Words">Two Words</a></h1>				        
</div>

Thanks for your help

**BorderTerroir** · 05-12-2015, 05:26 AM

First of all does your HTML contain the following?

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

These lines ‘tell’ the browser what sort of device to render an image for.

The CSS then reflects this information, see example below.

Code:

/* Settings for a Desktop PC
===================*/

/* desktop styles here */


/* Settings for a Tablet
===================*/
@media screen and (max-width: 980px) {

/* tablet styles here */

}


/* Settings for a SmartPhone
===================*/
@media screen and (max-width: 640px) {

/* smartphone styles here */

}

**Beverleyh** · 05-12-2015, 07:35 AM

We would need a link to the page to offer specific help, but in the meantime, for a totally fluid/scalable option, have a play with viewport units http://caniuse.com/#feat=viewport-units Good for modern browsers and IE9+ (you can provide fixed-size fall-backs for IE8 in a conditional stylesheet)

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="description" lang="en" content="A responsive / scalable header demo."/>
<title>Responsive / Scalable Header</title>

<style>
#header #site-title {  
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	background: #ddd url(logo.png) no-repeat 46.5% 50%; /* tested with a 192 x 192 px img */
	background-size: 7vw;
	font-size: 5vw;
	line-height: 10vw;
	word-spacing: 10vw;
}

@media ( min-width:60em ) { /* bigger than 960px - fixed units after this point to stop upscaling */

	#header #site-title {  
		background-position: calc(50% - 30px) 50%; /* calc offset from center to account for different word length */
		background-size: 67px;
		font-size: 3em;
		line-height: 2em;
		word-spacing: 2em;
	}

}
</style>

</head>
<body>

<div id="header">
	<h1 id="site-title"><a href="http://mysite/">Two Words</a></h1>				        
</div>

</body>
</html>

If you need more help, please provide a link to your page.