Announcement

Collapse
No announcement yet.

Theme template is resizing logo -- I would like it to go full width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Theme template is resizing logo -- I would like it to go full width

    I'm using the Sweet Cookies theme and would like the logo to go fully across the screen, filling the header space.
    Attached image shows what I currently have -- it's just a placeholder logo until I know what dimensions to make.
    So, I need to know how to alter the code to have it go full width, and also what dimensions my logo should be to work (and be responsive).
    Here's the current code that I think applies:

    #header {
    background: rgba(255, 255, 255, 0.4) url('images/header_bg.png') repeat;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    height: 125px;
    width: 100%;
    position: relative;
    padding: 15px 30px;
    }
    #logo {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    }
    #logo img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 100%;
    }

    Thank you in advance if you can help!!
    You do not have permission to view this gallery.
    This gallery has 1 photos.

  • #2
    CaseyU If you can, it would be much easier if you post a link to your site so that we can trouble shoot and get you the proper coding needed.

    Thanks,
    Shaun
    TheCartDesigner.com
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert


    Follow Us on Twitter

    Comment


    • #3
      You need to play with height of #header width of #logo and width of section that is containing your logo which in mostly cases is left header or header left. those three things will fix your logo.feel free to ask if you have any questions CaseyU
      tangopixel.com
      Website Design and Development

      Comment


      • #4
        Thank you so much for the input -- got it to work! For anyone wondering, this was added to the global footer:

        <style>
        #header {
        height: 100%;
        }
        @media (max-width: 1023px)
        {
        #logo {
        max-width: 100%;
        }
        }
        </style>

        Comment


        • #5
          Thumbs Up CaseyU
          tangopixel.com
          Website Design and Development

          Comment

          Working...
          X