banner misplaced after header

Hi @longman2020,

?You can vertically center it using CSS. Please refer to this tutorial.

?I hope it helps. Feel free to reach out to us if you have any further queries.

??Kind regards,
?Herman ??

Hi,

I don’t know much about css.
I tried but I couldn’t fix it.

That would be very kind of you if you tell me the code.

Thanks

Hi @longman2020,

Would you please try the following code for the banner

<div class="giveaway-container">
  <div class="giveaway-center">
    <img src="https://iranhandiworks.com/wp-content/uploads/2020/10/Giveaway-banner.png">
  </div>
</div>

Then add the following CSS code in Appearance > Customize > Additional CSS

.giveaway-container { 
  height: 100px;
  position: relative;
}

.giveaway-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

?Feel free to modify the codes as per your needs.
?
?I hope it helps.

??Kind regards,
?Herman ??

Thank you so much for your help Herman.

I tried the codes.
The second one needed a little change in numbers (in height and top) that I did as below and worked fine:

.giveaway-container { 
  height: 50px;
  position: relative;
}

.giveaway-center {
  margin: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

But there is two problem that I don’t know how to solve after implementing the code:

first: in mobile devices the banner is misplaced and smaller.
second: with the code above, the banner is not linked to target page.

Hi @longman2020,

That’s good to know you are able to modify the code to make it works as your preference.

Please add the following CSS that should fix the misplace issue on tablet and mobile

@media (max-width: 1023px) {
    .giveaway-center {
        top: 70%;
}

And for the link, I am sorry, I missed that the banner had a link. You can just add the link to the banner, so the code will like below

<div class="giveaway-container">
  <div class="giveaway-center">
    <a href="https://iranhandiworks.com/giveaway"><img src="https://iranhandiworks.com/wp-content/uploads/2020/10/Giveaway-banner.png"></a>
  </div>
</div>

Please let us know how you go.

Kind regards,
Herman ??

Thank you Herman for your help.

There is still one problem left.

The problem is that in tablet and mobile devices the banner shrinks and becomes small. it is not shown in original size.

I tried to solve it myself, but I couldn’t.

I appreciate if you tell me what to do.

Hi @longman2020,

The image becomes smaller, that’s actually the expected behavior of a responsive layout, I would say.

However, please try adding the following CSS to resize the banner on mobile

@media (max-width: 414px) {
	.giveaway-center {
		width: 90% ;			
	}
}

?I hope it helps.

??Kind regards,
?Herman ??

Thank you very much Herman
It is completely fixed.
That was very very kind of you to help me fix it.

Herman I wanted to say something about this hook:

I think something is wrong here, because when a user inserts a banner, ad, text or anything else in this hook it should automatically goes to center to look neat on the website. It’s not logical that the banner is inserted at left side.

May I ask you to discuss this topic with the developers team to see what their opinion is.

Thank you so much for the time that you put on this.

Good luck

You’re welcome, it’s been a pleasure to help you, @longman2020!

?And regarding your thought about anything should automatically goes to center, actually it’s not how it works. This plugin is not intended only for text, banner, ad or similar stuff, but it is also intended for another thing like JavaScript.
?
?By letting the hook “as it is“, the users will have more flexibility with the custom content they would like to put in the respective hooks.
?
?I hope that clarifies and clears any confusion you may have.

??Kind regards,
?Herman ??