Developing (v7+)

Wanting a specific position for a logo with responsive framework

Permalink October 26, 2012 at 5:04 AM

Hi - I'm using skeleton to produce a responsive designed website but the logo for the site I want in a particular position and it needs to overlap the banner of images. I would usually use absolute positioning but that will take it out of the document flow is there a way of doing this while retaining the way the divs scale. I enclose a rough pic to show what I'm after.

Steevb replied on Oct 26, 2012 at 11:13 am Permalink Reply

I use 'relative'.

Say I have a content class, I put my logo class inside it and move it around with css.

Example:

.logo{max-width:500px;width:98%;float:left;margin:-50px 0 0 10px;z-index:299;position:relative}

Then move it for mobile:

@media(max-width: 768px){
   .logo{width:50%;margin:-25px 0 0 10px}}

@media(max-width: 480px){.logo{margin:0 auto;width:90%;float:none}}