0
Welcome Guest! Login
0 items Join Now

Center and enlarge Logo with CSS

Last Post
Search Topic
    • Beginner's Avatar
    • Beginner
    • Rocketeer
    • Posts: 81
    • Thanks: 0

    Center and enlarge Logo with CSS

    Posted 10 years 3 months ago
    • Dear all,

      I struggling with CSS to center and enlarge a logo to 100% (rt-grid-12) on my new test site with Gantry Framework 4.1.27

      Could some one take a look into website www.bueble-fanclub.de ? Currently I have deleted all CSS tags of my gantry-custom.css, so all is set back to default.

      Thanks a lot in advance.


      Regards,
      Daniel
    #1170201
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Center and enlarge Logo with CSS

    Posted 10 years 3 months ago
    • Beginner wrote:
      Dear all,

      I struggling with CSS to center and enlarge a logo to 100% (rt-grid-12) on my new test site with Gantry Framework 4.1.27

      Could some one take a look into website www.bueble-fanclub.de ? Currently I have deleted all CSS tags of my gantry-custom.css, so all is set back to default.

      Thanks a lot in advance.


      Regards,
      Daniel

      A few things:

      1) Change your module class suffix to " rt-image" (there is a leading SPACE). Please see the guide How to Add and Use module class suffixes
      2) in your image code remove the "float:left" so you jsut have this -> "<img style="" src="/images/masthead.jpg" alt="">"
      3) to maintain responsiveness for images never supply fixed values for width & height
      4) This is not a valid CSS code -> "padding: auto !important;" Check W3cschools for the proper definiton
      5) youe final code should look like this:
      .rt-image {
  display: block !important;
  margin: auto !important;
  max-width: 100%;  
  text-align: center;
}
    #1170317

Time to create page: 0.053 seconds