Menu icon Foundation
Page Title and Logo in Header Row

A custom container-style layout is proving to be very difficult to get right for mobile screen widths. I've been struggling for months with this header, where I have text beside a logo image.

Originally I was using Foundation 5 with plain CSS. I've converted to compiling SCSS with Foundation 6, using the terminal program to set up the environment, which is what I'm showing in this screencast video I made today.

First of all, I can't get the logo image not to shrink as the screen narrows from the large breakpoint to the medium breakpoint without defining max-width and max-height for the img. It's not that doing so is a problem. I have a mess of code trying to strong-arm the logo and text into position at every conceivable screen width (not just the breakpoints), so right now I'm getting rid of all that extra SCSS and trying to figure out the best tactical way to implement this monster. I'm keeping in mind that I have 21 other pages that all have different text in the header, some longer an some shorter. Obviously there's no miracle to make everything work, but I need to figure out the best way to structure the Foundation classes before I go off customizing each page individually again.

It doesn't matter whether I use the header tag as the Foundation row contain or use a div inside of it.

I'm largely defeated, so I'm grateful for any kind of advice.

<header class="row">
    <span id="section-logo" class="small-12 medium-2 large-4 columns">
        <img src="img/collab-notext.png" alt="composite logo made from three overlapping logos" />
    </span>
    <span id="page-title" class="small-12 medium-10 large-8 columns">
        <h1>Behind the Scenes</h1>
    </span>
</header>

foundation 6headerimagemobilemedium

A custom container-style layout is proving to be very difficult to get right for mobile screen widths. I've been struggling for months with this header, where I have text beside a logo image.

Originally I was using Foundation 5 with plain CSS. I've converted to compiling SCSS with Foundation 6, using the terminal program to set up the environment, which is what I'm showing in this screencast video I made today.

First of all, I can't get the logo image not to shrink as the screen narrows from the large breakpoint to the medium breakpoint without defining max-width and max-height for the img. It's not that doing so is a problem. I have a mess of code trying to strong-arm the logo and text into position at every conceivable screen width (not just the breakpoints), so right now I'm getting rid of all that extra SCSS and trying to figure out the best tactical way to implement this monster. I'm keeping in mind that I have 21 other pages that all have different text in the header, some longer an some shorter. Obviously there's no miracle to make everything work, but I need to figure out the best way to structure the Foundation classes before I go off customizing each page individually again.

It doesn't matter whether I use the header tag as the Foundation row contain or use a div inside of it.

I'm largely defeated, so I'm grateful for any kind of advice.

<header class="row">
    <span id="section-logo" class="small-12 medium-2 large-4 columns">
        <img src="img/collab-notext.png" alt="composite logo made from three overlapping logos" />
    </span>
    <span id="page-title" class="small-12 medium-10 large-8 columns">
        <h1>Behind the Scenes</h1>
    </span>
</header>
Vladimir over 3 years ago

@Paul Lee I am also interested in solution for this problem. I tried something here
http://codepen.io/zlatiborac/pen/WwbqVj
but still can not make it resize like you wanted. Will keep working on this in the morning :)

RobertWalker over 3 years ago

I have did this stuff in my website http://www.genericapharmacy.net/ , you can do get the reference from this.

Paul Lee over 3 years ago

Thank you, Vladimir. Your reply is gracious and is very much appreciated.

You're right about the column structure. The medium and large columns should be the same. This prevents some of the padding problems I observed. (The logo's container is now "medium-4 large-4" and the text's container is now "medium-8 large-8".)

With these columns, the logo actually appears largest -- the full size of the image file's dimensions -- at the beginning of the small breakpoint (639px). It is not even as large on the large breakpoint. The text does become much smaller at the small breakpoint, which looks promising.

Defining height and width on the logo's container (using the height and width CSS properties) does not work for me at all. I tried setting height and width to the actual dimensions of the PNG image, but doing so makes the image appear very tiny at all breakpoints. Using min-height and min-width properties (trying to prevent the logo from shrinking beyond a specific point) doesn't seem to have an obvious affect.

As a last resort, it may be possible to use a JQuery script to center the text inside the row for the small breakpoint. I still don't have much of a plan for the logo image, though.

Vladimir over 3 years ago

@RobertWalker I am having troubles accessing that website. Is it working?

Paul Lee over 3 years ago

@Vladimir, I'm using percentage max- and min-height in my scss to control how large or small the logo can get. To allow it to be larger than the header row when necessary, at those breakpoints I give it absolute positioning and then force the header's background color to be drawn large enough to encompass the logo image by giving it a min-height.

Right now this is what my SCSS looks like, though I'm sure the specific values will change:

#section-logo {
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        min-height: 55%;
        min-width: 55%;
    }
    @media screen and (min-width: 64em) {
        min-height: 60%;
        min-width: 60%;
        position: absolute;
    }
}

header {
    @media screen and (min-width: 64em) {
        min-height: 125px;
    }
}

I also have a solid plan for centering the title h1 element. I've written a JQuery script that changes the positioning of the h1 element to absolute and then calculates where to put it in order for it to be centered inside the header.

The problem is that the header does not start at the top left of the page due to a CSS centering technique that I'm using. The non-Foundation wrapper elements I'm using aren't giving me a convenient handle to subtract the height and width from the content area from the height and width of the total page. However, once I find a way to discover these values, I'm pretty sure I'll be all set. I've double checked my formulas, and I believe they're correct.

Here is my current script, in case you're interested in using a similar method:

```Javascript console.log("center-title.js loaded");

var headerWidth = $("header").width();
var headerHeight = $("header").height();
var textElementWidth = $("#page-title h1").width();
var textElementHeight = $("#page-title h1").height();

console.log("Width of header = " + headerWidth);
console.log("Height of header = " + headerHeight);
console.log("Width of text in h1 element = " + textElementWidth);
console.log("Height of text in h1 element = " + textElementHeight);

$(function() {
// Give the title h1 absolute positioning so it can be placed precisely.
var titleH1 = $("#page-title h1");

titleH1.css('position', 'absolute');

// Calculate where the title has to be placed to be centered in the header.
var widthDifference = headerWidth - textElementWidth;
var heightDifference = headerHeight - textElementHeight;

console.log("Width difference = " + widthDifference);
console.log("Height difference = " + heightDifference);

// Finding distance from top of page to top of header

var pageHeight = $("#non-framework-container").height();
var pageContentHeight = $("#non-framework-wrapper").height();
var pageHeightOffset = pageHeight-pageContentHeight/2;

console.log("Space above header = " + pageHeightOffset);

var pageWidth = $("#non-framework-container").width();
var pageContentWidth = $("non-framework-wrapper").width();
var pageWidthOffset = pageWidth-pageContentWidth/2;

console.log ("Space left of content =" + pageWidthOffset);

// Getting the absolute value of the difference.
// Dividing by two to get the amount of "padding" on each side.
var horizontalOffset = Math.abs(widthDifference-headerWidth/2) + pageHeightOffset;
var verticalOffset = Math.abs(heightDifference-headerHeight/2) + pageWidthOffset;

console.log("Horizontal Offset = " + horizontalOffset);
console.log("Vertical Offset = " + verticalOffset);

// titleH1.css('left', horizontalOffset+'px');
titleH1.css('top', verticalOffset+'px');
});

Thanks again for the help.

James Johnson over 3 years ago

I have more information did this stuff in follow my article http://www.generic-hub.com/, you can do get the reference from here.

jonathan halks over 1 year ago

For great stuff of knowledge you can refer to http://www.safegenericrx.com/