Jump to content
Sign in to follow this  
kak8500

Callout padding and alignment

Recommended Posts

kak8500

I'd like the callout on my site (dev.zeriongroup.com/index) to right align and have much less padding around it. Can you tell me if that's possible? I'm also trying to reduce the font size but have posed that question in another area already. Thanks in advance for any help you can provide.

Share this post


Link to post
Share on other sites
catrina
#callout-area {padding: 0px; margin-top: -10px; margin-bottom: -10px;}
	#callout-area h2.callout_head, #callout-area div.callout_copy {text-align: right !important;}

The padding is already quite small, so I added the margin parameters you can just adjust to reduce space above and below the callout (which you can adjust).


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
kak8500

Thanks. Maybe the problem is the padding around the nav or the feature slider, then? Take a look and let me know what you think. I want there to be much less white space and for the "get a quote" text to be smaller and further right. http://dev.zeriongroup.com/index/

Share this post


Link to post
Share on other sites
catrina
#callout-area {padding: 0px; margin-top: -35px; margin-bottom: -10px;}
	#page-main {margin-top: -40px;}

There looks to be a right sidebar preventing the callout from going all the way to the right. Do you have it enabled in Template Setup?


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
kak8500

I don't. All that's enabled in the header is the brandnav and the callout.

Share this post


Link to post
Share on other sites
Jenny

If you want it to go all the way to the right, just add this to your CSS:

	#callout .callout_text {
	    float: right;
	}
	
For the callout header text ("Get a quote"), add this and change to whatever size you want:
	#callout .callout_head {
	    font-size: 2em;
	}
	
For the copy text ("Click here or..."), add this and change to whatever size you want:
	#callout .callout_copy {
	    font-size: 0.9em;
	}
	


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
kak8500

I still can't get it to move all the way to the right. I'm going to try a different route with this and see if I can make something else work. Thanks!

Share this post


Link to post
Share on other sites
Jenny

Ok! Just make sure you don't have conflicting code in your custom CSS too. :) Good luck!


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

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  

×