Logo placement. - Post ID 204992

Jan 26th, 2013 at 06:44 AM
User 2210454 Photo

Fabled_Alpaca .
Registered User
231 posts

Hello all.

Quick question:

I am using the theme "PaperMag Responsive" as a starting point for my site. Now I have never used or looked into a responsive site before so I don't want to mess too much up. But what I want to do is, make the logo stretch across the top of the screen instead of just been left justified. Now I don't know if that is possible to do with it been a responsive site.

So the question is, is it possible and if so how!?!

The site in question is located here: www.gamertop.coffeecup.com

Cheers
Simon,
“If what you’re doing is not your passion, you have nothing to lose.”
Jan 26th, 2013 at 06:54 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,267 posts
Online Now

Do you really want to stretch it? It's already responsive so why not edit the image and have it bigger. Or am I missing what your after?:)
Look at this page.
http://filamentgroup.com/examples/responsive-images/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Jan 26th, 2013 at 07:49 AM
User 2210454 Photo

Fabled_Alpaca .
Registered User
231 posts

Sorry Rolly,

That's what I meant. I have made the logo larger, but it doesn't move from where it is. It just shrinks itself to fit into the same space. If that makes sense?
Simon,
“If what you’re doing is not your passion, you have nothing to lose.”
Jan 26th, 2013 at 09:10 AM
User 122279 Photo

Inger
Senior Advisor
14,624 posts

You could open the style sheet, find this paragraph:

#logoTxt {
background: url(../images/logo.png) top right no-repeat;
background-size: contain;
position: absolute;
display:inline-block;
top: -130px;
left: 4.166666666667%; /* 40/960 */
width: 39.375%; /* 378/960 */
height: 115px;
border: none;
padding-bottom: 50px;
z-index: 10 !important;
}


...and then play with the width, height, left and top values. But stick to %, don't use px or so.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jan 26th, 2013 at 09:16 AM
User 2210454 Photo

Fabled_Alpaca .
Registered User
231 posts

Cheers Inger. Wasn't sure what to mess with! Didn't want to break the entire site!! :lol:
Simon,
“If what you’re doing is not your passion, you have nothing to lose.”

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.