Log in

View Full Version : 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


#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


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


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


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


/* 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)


<!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.
gwmbox
05-12-2015, 11:29 PM
Thank you both for your help, I will try what you have provided, but if I can't nut it out I will return with a link to the page in question.

Cheers