Jump to content

Banner block module, need a fix please.


 Share

Recommended Posts

Hi PS Forum!

 

I need some help from you guys if that's okay?

 

I am trying to get my Banner Block image to center but can't remember which css file I need to edit.

 

Can you help please?

 

http://grass.thehostguys.co.uk/bananas/index.php the banner is right at the top to show you what I mean. 

 

Thanks in advance!

 

William.

Share this post


Link to post
Share on other sites

If I understand you well,

 

file :  /themes/panda/css/global.css, line 271:

 

.img-responsive {

    display: block;

    max-width: 100%;

    height: auto;

    margin-left: auto;            <-- add these two lines

    margin-right: auto;

}
 
 
result:
post-455771-0-67731100-1432740893_thumb.png
 
 
Hope I understood well. If not, please show a screenshot/sketch of what you want,
 
pascal
 
 
P.S. On smaller screens, this banner is totally unusable, as you cannot read the text on it.
Maybe just remove it when the window/screen size gets below a certain point. Just an idea...
  • Like 1

Share this post


Link to post
Share on other sites

 

If I understand you well,

 

file :  /themes/panda/css/global.css, line 271:

 

.img-responsive {

    display: block;

    max-width: 100%;

    height: auto;

    margin-left: auto;            <-- add these two lines

    margin-right: auto;

}
 
 
result:
 
 
Hope I understood well. If not, please show a screenshot/sketch of what you want,
 
pascal
 
 
P.S. On smaller screens, this banner is totally unusable, as you cannot read the text on it.
Maybe just remove it when the window/screen size gets below a certain point. Just an idea...

 

I did this, but it didn't work. Please advise? Thank you very much!!

Share this post


Link to post
Share on other sites

Hi Pure,

 

I see that you put the two lines just OUTSIDE the closing bracket '}' :

 

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto; }                  <-- not here...
  margin-left: auto;
   margin-right: auto;
 
 
the closing bracket should be at the end, AFTER the two added lines:
 
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
   margin-right: auto;
}           <-- but here

 

 

Hope that helps,

pascal

Share this post


Link to post
Share on other sites

Hi Pure,

 

I see that you put the two lines just OUTSIDE the closing bracket '}' :

 

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto; }                  <-- not here...
  margin-left: auto;
   margin-right: auto;
 
 
the closing bracket should be at the end, AFTER the two added lines:
 
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
   margin-right: auto;
}           <-- but here

 

 

Hope that helps,

pascal

You are a star Pascal, cheers buddy! I will mark as solved now.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More