[Paul T]

I am using Catch Adaptive Pro on test4.franciscanfriars.org and the Button on the Headline Promotion feature is underneath the text, hence making overall verticle height of that section larger than I wish… I would love the button to be at the right like it is in some of your other themes… e.g. I am using Catch Base Pro on franciscanfriars.org and am trying to duplicate that layout of the Promotion Headline section on the homepage

[Mahesh]

@friarpaul: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

#promotion-message .left, 
#promotion-message .right {
	width: 50%;	
	float: left;
}
  
#promotion-message .left {
	text-align: left;
}

#promotion-message .right {
  margin-top: 25px;
  text-align: right;
}

Regards,
Mahesh

[Paul T]

I am wishing that the overall height of this Promotion Headline Section can still be a bit less… I would like less padding at top and bottom…

I am comparing it to the site I am trying to upgrade… franciscanfriars.org notice on that site.. this section has less vertical height.. and I can get more words in horizontally also…

So in summary two questions:
1. Can overall height of section be less
2. Could I get a few more words into the section (in the horizontal direction) and still not add to the height. (again see francsicanfriars.org for what I’m trying to acheive on this test4.franciscanfriars.org site)

Thanks.

[Mahesh]

@friarpaul: Please add the following CSS:

#promotion-message .wrapper {
	padding-top: 0px;
	padding-bottom: 0px;
}

#promotion-message .right {
    float: right;
    max-width: 20%;
    text-align: center;
}

#promotion-message .left {
    max-width: 80%;
    float: left;
    width: auto;
}

Regards,
Mahesh

[Paul T]

OK, we are real close!!!

Now when I view the website from my cell phone.. the right 1/4 of the donate button is chopped off… (if possible I’d love to keep it on the right however like it is now.. so it still does not add vertical height to the overall promotion section).. can it just be moved a bit to the left to show completely?

The other thing is that the button (on a large display and cell phone, and on my tablet) is right up close to top… can it be centered vertically?

Thanks.

[Mahesh]

@friarpaul: Please add the following CSS:

@media screen and (max-width: 767px) {
    #promotion-message .section.left,
    #promotion-message .section.right {
        max-width: 100%;
    }
}
  
#promotion-message .section.right {
    padding-top: 20px;
}

Regards,
Mahesh

[Paul T]

After inserting this, the LARGE SCREEN DISPLAY IS GREAT, but on a my cell phone, the gap between the top of the donate button and bottom of “Thank you for your Donation!” is too large for me.

can that gap be adjusted to be about 10 pixels less? I.e. the button moved up a bit? (this will make the whole section still a bit smaller in the vertical direction on my mobile device…)

Thanks

[Mahesh]

@friarpaul: Add the following CSS:

@media screen and (max-width: 767px) {
    promotion-message .section.right {
        padding-top: 0;
    }
}

Regards,
Mahesh

[Paul T]

That did not work for me….. I played around with it and got this to work

@media screen and (max-width: 467px) {
#promotion-message .section.left,
#promotion-message .section.right {
margin-top: -20px;
max-width: 100%;
}
#promotion-message .section.left {
padding-top: 30px;
}
}

There may be a better way to do it, if so I’m happy to hear.. but for now I hope I’m good.
Peace

[Mahesh]

@friarpaul: Glad to know that you found the solution. Have a nice day!

Regards,
Mahesh

[Author]

Posts