Cannot centre Banner Block

[Fletcher91]

Hi, I am having trouble centering an image at the top of my prestashop website (see attached screen shot).

 

I have tried placing this in global.css:

 

#header .banner a img {

  display: block;

  width: 100%;

  height: 100%;

 }

 

.banner .container, header .banner a {max-width:100%!important; width:100%!important;}

 

 

And the image is large enough to completely fill the width, but it is not.

 

It is a module called "Banner Block"

 

Would really appreciate some help with this

[JeredBolton]

In your theme's header.tpl file you'll see that the Banner Block puts its image in container and row elements:

<div class="banner">
    <div class="container">
        <div class="row">
            {$smarty.capture.displayBanner}
        </div>
    </div>
</div>

The container is going to restrict the wdith of the image.

 

Futhermore, blockbanner.css contains css which will also restrict the width of the image.

Edited February 13, 2017 by JeredBolton (see edit history)

[Fletcher91]

Thanks for replying

 

I have found the file, what exactly should I change in the header.tpl file?

[JeredBolton]

The div with class container is going to prevent child elements from expanding to the full width of the browser so you could try removing it.

[Fletcher91]

Thanks. I have found a deleted:

 

<div class="banner">

<div class="container">

<div class="row">

{$smarty.capture.displayBanner}

</div>

</div>

</div>

​

But it has not fixed the issue :/ Do you have anymore suggestions? Thanks for your help and time. (If this helps, there was a default image when I first started on the site and that image displayed correctly. Problem only happened when I replaced it with my own image).

[JeredBolton]

Deleting that block of code will remove the banner completely.

 

To remove just the container remove the lines highlighted below:

 

<div class="banner">

    <div class="container">

        <div class="row">

            {$smarty.capture.displayBanner}

        </div>

    </div>

</div>

[Fletcher91]

Very strange. Just doesn't want to go full screen. I deleted the highlighted code and re upload a test image at 4000x50px. Still seems to be stopping at exactly the same point.

[JeredBolton]

Have you changed the css in blockbanner.css to make sure the img can go full width?

[Fletcher91]

No >_< lol. What should i place in this file? Really appreciate this!

[JeredBolton]

Make the change to the header.tpl file as per a previous post.

 

In css/modules/blockbanner/blockbanner.css in your theme's directory, delete the following lines:

 

#header .banner a {                                                           
  display: block;                                                             
  max-width: 1170px;                                                          
  max-height: 65px;

}                                                         
                                                                              
#header .banner a img {                                                       
  display: block;                                                             
  width: 100%;                                                                
  height: 100%;                                                               
  max-height: 65px;                                                           
  max-width: 1170px;

}

 

Make sure you don't delete the closing curly brace on the second block of code.

[Fletcher91]

Thats it!! Mate you are a legend! Thank you so much for your help.

 

Do you have a PayPal account? I would like to buy you a drink

[JeredBolton]

I've sent you a PM.