[jamietallman]

I would like to change the size of the Promotion Headline Text and Promotion Subheadline Text? How do I do this?

Also, I would like to reduce the padding of the Promotion Headling so that it’s a little tighter.

Lastly, I would like the button to be located on the far left side with the headline just to the right of it with left justified text. How do I do this?

URL is http://4xq.ca2.myftpupload.com/

[Skandha]

@jamietallman: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* To change the font size of Promotion Headline */
#promotion-message .section.left h2 {
	font-size:25px;
}

/* To change the font size of Promotion Sub Headline */
#promotion-message .section.left p {
	font-size:10px;
}

/* To change the position of Promotion Headline Text and button */
#promotion-message .left {
	float:none;
}
#promotion-message .wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#promotion-message .left {
	order:2;
	text-align:center;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[jamietallman]

Thanks. That worked great for the button position and font size. How can I reduce the white space above and below the button?

http://4xq.ca2.myftpupload.com

[Skandha]

@jamietallman: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#promotion-message .right a {
	margin:0;
}
#promotion-message .section {
	padding:10px;
}

Let me know if this works out!
Kind Regards,
Skandha

[jamietallman]

Thanks. This is looking good on desktop, however I don’t like the way it renders on mobile and prefer the default way. On mobile, it’s trying to keep it in two columns and reduces the button size and make the text box really tall.

Is there a way on mobile to use the default way but on desktop use this custom code?

Lastly, I’d like to change the background color of the promotion headline to #848483 grey color?

[Skandha]

@jamietallman: Replace the above code I provided you by the following.

@media screen and (min-width:767px) {
	/* To change the font size of Promotion Headline */
	#promotion-message .section.left h2 {
		font-size:25px;
	}

	/* To change the font size of Promotion Sub Headline */
	#promotion-message .section.left p {
		font-size:10px;
	}

	/* To change the position of Promotion Headline Text and button */
	#promotion-message .left {
		float:none;
	}
	#promotion-message .wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	#promotion-message .left {
		order:2;
		text-align:center;
	}
	#promotion-message .right a {
		margin:0;
	}
	#promotion-message .section {
		padding:10px;
	}
}

To change background color of Promotion Headline
Go to => Appearance => Customize => Color Options => Promotion Headline Color Options => Change Background Color

Let me know if this helps you out!
Kind Regards,
Skandha

[jamietallman]

Thanks. I think that will work for what I’m wanting.

[Skandha]

@jamietallman: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/catch-base/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts