[Debbie]

In Widgets > Promotion Headline Right, there is a message that says “This is the Promotion Headline Right. Enable it by going to Appearance => Customize => Theme Options => Promotion Headline Options.”

However, in Promotion Headline Options, I don’t see any “enable” options for the Promotion Headline Left or Right widgets. There is a Promotion Headline Left Section Width, which I set to 75, thinking that might enable the widgets since it isn’t 100%.

Next, I added an image widget to Widgets > Promotion Headline Right. But the image shows on the left side and the Promotion Headline Button no longer appears.

What I want is the Promotion Headline Text, Promotion Subheadline Text, and Promotion Headline Button to be on the left side of the Promotion Headline and the image to be on the right side of the Promotion Headline.

Help!

https://miboxdallas.com

[Skandha]

@violetdeb: There seems to be a bug with the Promotion Headline Option and Promotion Headline left/right widgets. I have forwarded the bug to the development team and this issue will be resolved in the next theme update.

Untill then:
Go to => Appearance => Customize => Widgets => Promotion Headline Right => Add a Image Widget with the image you want to display in the promotion headline

At the end of Promotion Subheadline Text in the Promotion Headline Option add the following Code.
<a class="promotion-button roll-button more-button" href="https://catchthemes.com/" target="_blank">Buy Now</a>
Replace Buy Now with your required button text.

Then to align the Promotion Headline Right Widget to the right side
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.section.left {
	float:left;
}
.section.right {
	float:left;
}

This should solve your issue for the time being.
Regards.
Skandha

[Debbie]

It’s closer, but the text and image are in the left 75% of the headline and the right 25% is blank, even though I have the image in the Promotion Headline Right section. I’ve tried changing the Promotion Headline Left Section Width, but that doesn’t seem to help.

Also, I’d like a little more spacing between the subheading and the button. And once the image is in the right 25% of the Promotion Headline, it should be centered (it might be automatically … I’m just mentioning it now so you’ll know what I’m looking for).

Thanks!

[Skandha]

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

.promotion-button.roll-button.more-button {
	margin-top:10px !important;
}
#promotion-message .left {
	width:75%;
} 

Let me know if this solves you issue.
Regards,
Skandha

[Debbie]

Very, very close now.

1. When you are on a page other than the home page (which has the featured slider), the image in the promotion is slightly cut off at the top. Actually, I just checked the landscape view on mobile … it is cut off quite a bit there. Might have to do with my logo … let me know if I need to create a new topic for this.

2. When you shrink the width of the page so that the left/right sections of the promotion are stacked, the left section only takes up the width specified by “#promotion-message .left” css you gave (which does fix the look for when the left/right sections are next to each other). This is especially odd-looking on mobile devices.

Here’s the relevant additional css I have so far. Note that I adjusted the width from 75% to 60% and I’m also including the logo css in case that is related to the image getting cut off. Let me know if you need to me to post all my additional css. Thanks!

/* Fix problem with left/right Promotion Headline widgets */
.section.left {
float:left;
}
.section.right {
float:left;
}
.promotion-button.roll-button.more-button {
margin-top:10px !important;
}
#promotion-message .left {
width:60%;
}

/* Shrink logo when scrolled */
.float-header #site-logo img {
width: 200px;
transition: all 0.5s ease;
}

[Debbie]

Any advice on my last reply?

[Skandha]

@violetdeb: Hello there, Sorry for the late reply. I’ll get back to you on this very soon.
Apologies for the delay.

Regards,
Skandha

[Debbie]

This is still an issue. Any suggestions?

[Skandha]

@violetdeb:
1. I checked your site and the slider seems to be only enabled in the homepage.
2. The right and left section of promotion headline seems to show up fine even when the width is shrinked and even in mobile devices.

Apologies for very late reply. I seem to have missed the email.
Let me know if you have anymore issues.
Kind Regards,
Skandha

[Debbie]

1. Correct, the slider is only on the home page … the issue is with the promotion image getting cut off at the top on pages other than the home page and on landscape mobile.

2. So weird that it looks fine now, but you are right. No more issues on this point.

https://miboxdallas.com

[Skandha]

@violetdeb: For the promotion getting cut off at the top on pages other than the homepage and on landscape mobile
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:767px) {
	#promotion-message {
		position:relative;
		top:43px;
	}
}
@media screen and (min-width:428px) and (max-width:767px) {
	#promotion-message {
		position:relative;
		top:80px;
	}
}

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

[Debbie]

🙁 That messes up the home page … leaves a space between the slider and the promotion … I think I probably just have too many css tweaks and can’t get them all to play nicely together. Thank you for trying though; I really appreciate your help!

[Skandha]

@violetdeb: You will need to try decreasing the size of the logo in mobile view. I think that way you will be able to solve the issue.

Kind Regards,
Skandha

[Author]

Posts