donate button padding and font

[R. whitehouse]

the font has changed on its own for the donate text and button text. I need to change the text and also add padding on the right side of the donate button. Can you please help? Thanks.

[Bill Robbins]

Good Morning Rachel,

Sorry for the trouble there. I took a look this morning and the font appears to be the same one that’s in use on the rest of the site. I’ve attached a screenshot of what I’m seeing.

If you’re still seeing something different, let me know and also what browser and operating system you’re having the trouble with.

Thanks,
Bill

Attachments:

1. 

   Screen-shot-2014-03-13-at-7.41.23-AM-132-x-80.png
   

[R. whitehouse]

The font appears to have fixed itself, strange. I do still to know how to add padding for the button on the right side. thanks.

[Bill Robbins]

Hello Rachel,

You can change the padding on the donate button. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #donate a, 
   #donate a:visited {
   	padding-top: 7px;
   	padding-bottom: 7px;
   	padding-left: 12px;
   	padding-right: 12px;
   }
   

   Those are the defaults for each side. You can edit those to fit your needs. If you'd like to move the button, you can add this too:

   
   #donate {
   	margin-right: 10px;
   }
   

   and just change the 10px to the distance you'd like to move it further from the right hand edge in pixels.

3. Update your settings.

See if that doesn't help out.

We had a rather substantial update to the theme back in the fall. You might consider swapping to it. You can see the demo at http://demo.organizedthemes.com/agency/

Visually it's quite similar, but it should be more flexible now and the code under the hood is much improved too.

If you need anything, just let me know.

Thanks,
Bill

[R. whitehouse]

thanks. I will try it.

[R. whitehouse]

Thanks. This works when the button is viewed on a computer but it is cut in half when it is viewed on an iphone. Also, the logo is cut off half way when viewed on a smartphone. Could you please let me know what css will fix this mobile issue? Thanks so much.

[Bill Robbins]

Good Morning Rachel,

The donation button is trying to wrap there due to the limited space. We can try to force it to remain on one line. Here’s how to try that:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #donate a, 
   #donate a:visited {
   	white-space: nowrap;
   }
   

3. Update your settings.

See if that works for you. Let me know what you turn up,
Bill

[R. whitehouse]

It worked! Thanks. How can I get the logo to show up correctly on the mobile? The logo only shows have the top is cut off on the top of the screen. Thanks.

[Bill Robbins]

Let’s try adding this to your Custom CSS too:

@media only screen and (max-width: 480px) {
	
	#header #logo {
		top: 10px;		
	}

}

See how that works for you.

[R. whitehouse]

Thanks. That works if you view the site vertically but if the site is horizontal the logo is cut half way off the top of the screen. Is there code that can fix this?

[Bill Robbins]

Change the 480 to whatever screen width you’d like the change to happen at.

[Author]

Posts