Jump to content
Sign in to follow this  
amyboehnert

Make Platform pro header full width with no padding

Recommended Posts

amyboehnert

I have been trying to make the header image on my platform pro theme site full width with no padding (white space) above the image. I have very little website building experience so I would greatly appreciate a simplified and easy to execute explanation. Thanks in advance!

Share this post


Link to post
Share on other sites
kastelic
Could we see a link to your site? By full width, do you mean the width of the page, or the width of the screen?

Share this post


Link to post
Share on other sites
amyboehnert
the site is www.cardinalpointmedia.com I am trying to make the header the full width of the screen, and would really appreciate some help. Thanks!

Share this post


Link to post
Share on other sites
amyboehnert
Sorry about that, not sure why that link didnt work. Here it is: http://www.cardinalpointmedia.com/

Share this post


Link to post
Share on other sites
catrina
The header image would need to be wider to fit the full width properly (if it gets enlarged using CSS the image will get pixelated/blurry). If you have the original image, it would be possible to resize it in Photoshop. Alternatively, you can get rid of the slightly blurry shadow around the image and then make the DIV container the image is contained in the same blue color as the outer area of the image so that it can be resized and adjusted to fit the full width.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
amyboehnert
I can make the header larger...no prob. But how do I make it full width with no padding?

Share this post


Link to post
Share on other sites
catrina
This CSS removes the padding from the top: [code]div.branding_wrap {margin-top: -40px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
amyboehnert
That worked for the padding. Awesome...Thanks! Now to the troublesome issue of making the heading full width...any ideas?

Share this post


Link to post
Share on other sites
catrina
Replace the code I gave previously with this code: [code]div.branding_wrap {margin-top: -40px; position: absolute; width: 100%; text-align: center;} div.branding_wrap img {width: 100%;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
amyboehnert
I tried that...it didn't seem to work.

Share this post


Link to post
Share on other sites
Rob
Amy, I'm not sure which Site Design Mode you've selected. I personally use the Full-Width Design Framework (found at Dashboard > PlatformPro > Design Control) and have a full width image under the branding. Take a look [url="http://www.epicurus.com"]Epicurus.com[/url] And feel free to download the background to see what I did. You'll see it's considerably wider than the screen; this is to accommodate wide screen monitors. The settings are "Repeat Horizontally" Vertical = 0 (absolute top) and Horizontal = 50 (centered) For related CSS all I needed was [code]body { padding-top:0px; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×