Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #162537
    jamietallman
    Participant

    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/

    #162558
    Skandha
    Participant

    @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

    #162613
    jamietallman
    Participant

    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

    #162714
    Skandha
    Participant

    @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

    #162866
    jamietallman
    Participant

    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?

    #163008
    Skandha
    Participant

    @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

    #163047
    jamietallman
    Participant

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

    #163113
    Skandha
    Participant

    @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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Promotion Headline Font Size, Padding, and Button Location’ is closed to new replies.