Jump to content
Sign in to follow this  
gayatriom

My Header Text - moves into the branding area.

Recommended Posts

gayatriom

I used function add_header_text_to_branding() to add header text to this website : http://www.esww-law.com However, in IE and on phones, the header text moves all the way to the left and overlaps the branding logo. this is the code i used // function name function add_header_text_to_branding(){ ?>

1200 One Securities Centre

3490 Piedmont Road

Atlanta, Georgia 30305

404-841-9400 / 866-266-6607

<?php } // end function And then I used div.header_text{margin-left:900px; color:white;margin-top:-110px;font-size:16px;text-align:center;margin-bottom:0px;} To align it. What am I doing wrong?

Share this post


Link to post
Share on other sites
catrina
I think there's a more elegant way of implementing the styling of the header text by using CSS. For example, this styling can be applied using Custom CSS: [code]

[/code] ...and the following styling can be included in it: [code]div.header_text{margin-left:900px; color:white;margin-top:-110px;font-size:16px;text-align:center;margin-bottom:0px;}[/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
gayatriom
ahh. hmm. ok. so you're saying not to put the top css in functions area? what you just put up there looks pretty similar to what I pasted. what am I missing?

Share this post


Link to post
Share on other sites
catrina
I pasted what you pasted to show you what can be adjusted. Here is the revised CSS you can add to the Custom CSS section: [code]div.header_text { background: #27378b; /* old browsers */ background: -moz-linear-gradient(top, rgba(39,55,139,1) 47%, rgba(55,90,186,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,rgba(39,55,139,1)), color-stop(100%,rgba(55,90,186,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* opera11.10+ */ background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27378b', endColorstr='#375aba',GradientType=0 ); /* ie6-9 */ background: linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* w3c */ border: 2px solid #5E6A71; padding-top:10px; width:210px; margin-left:900px; color:white; margin-top:-110px; font-size:16px; text-align:center; margin-bottom:0px;}[/code] Please remove all styling in the function. It should look like this now: [code]
1200 One Securities Centre
3490 Piedmont Road
Atlanta, Georgia 30305
404-841-9400 / 866-266-6607
[/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
gayatriom
ok. now the overlapping issue has stopped. The only thing is that instead of being aligned with my content so that the right side of the header is in line with the right side of my content, it's off to the right. (this only happens in IE and on the phone)

Share this post


Link to post
Share on other sites
catrina
It could be something to do with the code below or the padding: [code]background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */[/code] Is the problem occurring on an iPhone?

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
gayatriom
It's occuring on my smart phone - android. I'm not too sure about the iphone since I don't have one. :( .

Share this post


Link to post
Share on other sites
kastelic
You can always try different hook such as: pagelines_before_branding pagelines_inside_top_branding pagelines_inside_bottom_branding pagelines_after_branding pagelines_before_branding_icons pagelines_branding_icons_start pagelines_branding_icons_end pagelines_after_branding_wrap

Share this post


Link to post
Share on other sites
gayatriom
hmm. yes. maybe that will help. will try that out.. so i guess i could tru pagelines_after_branding

Share this post


Link to post
Share on other sites
gayatriom
I used pagelines_before_branding_icons instead and it worked perfectly! everything on my smart phone is perfectly aligned! however, i can't check IE right now, so crossing my fingers that it looks perfect in IE also!

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  

×