Header image resized

I installed a plugin and after that the header image has been resized, giving a weird look. I deactivated the plugin still no change.Even the site is opening differently on different systems.Kindly help as I don’t know much about coding.

My site is http://tinydroplets.com


Currently header image is displayed fine. Can you tell us which plugin you have installed, so maybe we can try to reproduce that on local? If it was some plugin for image manipulation of image sizes you can try to run https://wordpress.org/plugins/regenerate-thumbnails/ plugin in order to regenerate images to dimensions defined within the theme. In general, we need some additional info regarding your issue.

Best Regards

Thank you…
Actually I found out the same.And i changed new header images.I had installed one free carousel gallery plugin (unite-gallery-lite) which resized all images.
As of now if u see my website http://tinydroplets.com.
you will see that the call for action button and header images gets hidden behind navigation bar…Kindly help to re-position the button to bottom of header image.


This is happening because you are not using any intro text.

You can use custom css code below in order to reposition button:

@media only screen and (min-width: 1199px) {
    .welcome-info {
        top: 280px;

and you can adjust top value according to your needs. You can apply the code with simple custom css plugin.

Best Regards


I have the code as follows:

@media only screen and (max-width: 991px) {
.welcome-info {
top: 280px;
bottom: 10px;
right: 10px;
width: auto;

Actually I did not put any intro text as its getting hidden.
Check another page http://www.tinydroplets.com/index.php/upcycling/


You probably changed header offset. Try to set it to default values from Appearance > Customise > Header Image, like this http://screencast.com/t/Jp3o5QcpA , and try your page again.

Best Regards

Thanks dimikjones. :slight_smile: :slight_smile:

I have browsed through many support threads…can u please help be to get this down arrow placed on my page as in this example.


Thanks a lot.

I simplified things so hopefully it isn’t too hard now. Add the following custom css (via simple custom css, etc.):

#scroll-arrow {
opacity: 0.5;
color: white;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -25px;
z-index: 999999;

#scroll-arrow:hover {
text-decoration: none;
bottom: 25px;

Modify the opacity and color to suit your site’s background. If you don’t want the arrow on mobile sites, you’ll have to wrap the above in a:

@media screen and (min-width: 1025px) {


and add a:
@media only screen and (max-width: 1024px) {
#scroll-arrow:hover {
display: none;
visibility: hidden;

Then modify your child-theme’s header.php file to include the following just before the “<div id=“content”…” on the last line:

<?php if ( is_front_page() || get_theme_mod(‘moesia_banner’) != 1 ) : ?>
<i class=“fa fa-chevron-circle-down fa-3x”></i>
<?php endif; ?>

The above header.php code didn’t come out right, it should (hopefully) look like:

<?php if ( is_front_page() || get_theme_mod('moesia_banner') != 1 ) : ?>
   <a id="scroll-arrow" href="#site-navigation"><i class="fa fa-chevron-circle-down fa-3x"></i></a>
 <?php endif; ?>