How can I make my header image properly responsive?

2 Views

I am trying to put a site together for a friend using a really nice premium WordPress theme. I have paid for the theme but the designer will not help with customisation.

The site is currently at www.zerocarbonfood.co.uk/test/. Originally the theme had a small left-aligned logo but my friend favours this large full-width one, which I think works better. Problem is now that I look at it on an iPad or iPhone (portrait) the logo is too big and screws it up. In the theme options it is defined as 922px width and 168px height. I cannot put a percentage value in there. Can I override this in CSS somewhere?

Read More

Any help would be gratefully received as I am a bit out of my depth.

Post Views: 2

Related posts

Leave a Reply

8 comments

  2. The easiest way to deal with it is to insert the logo image inline rather than as a background image. That way you can apply CSS to the img element itself;

    HTML

    <div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>

    CSS

    #logo-container img {
   width: 100%;
   height: auto;
}

  3. You can use following media condition in css

     /* Resize Background*/
@media only screen and (max-width: 800px) {

    #header{
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}

  5. Try using % instead of px. This way, your image will scale with page size.

    In your HTML, you could try something like

    <img src="logo.png" width="80%" height="80%"/>

    This would scale with screen width. Of course, you want to scale the height as well to preserve aspect ratio.

    FYI, the site looks fine on my Android phone when I zoom out all the way.

  7. How image gets zoomed on hover?

    Here is the sample html:

    <footer>
              <!-- Main Footer -->
              <section class="section background-dark">
                  <div class="line">
                      <div class="margin">
                          <!-- Column 1 -->
                          <div class="s-12 m-12 l-4 margin-m-bottom-2x">
                              <h4 class="text-uppercase text-strong">Our Philosophy</h4>
                              <p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>

                                  <div class="line">
                                      <h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
                                      <div class="margin">
                                          <div class="s-12 m-12 l-4 margin-m-bottom">
                                              <a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
                                          </div>
                                          <div class="s-12 m-12 l-8 margin-m-bottom">
                                               <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                                               <a class="text-more-info text-primary-hover" href="/">Read more</a>
                                         </div>
                                    </div>
                                </div>
                         </div>

                  <!-- Column 2 -->
                     <div class="s-12 m-12 l-4 margin-m-bottom-2x">
                      <h4 class="text-uppercase text-strong">Contact Us</h4>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-placepin text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><b>Adress:</b> Responsive Street 7, London, UK</p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-mail text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><a href="/" class="text-primary-hover"><b>E-mail:</b> contact@sampledomain.com</a></p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-smartphone text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><b>Phone:</b> 0700 000 987</p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-twitter text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><a href="/" class="text-primary-hover"><b>Twitter</b></a></p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-facebook text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11">
                              <p><a href="/" class="text-primary-hover"><b>Facebook</b></a></p>
                          </div>
                      </div>
                  </div>

                  <!-- Column 3 -->
                       <div class="s-12 m-12 l-4">
                      <h4 class="text-uppercase text-strong">Leave a Message</h4>
                      <form class="customform text-white">
                          <div class="line">
                              <div class="margin">
                                  <div class="s-12 m-12 l-6">
                                      <input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
                                  </div>
                                  <div class="s-12 m-12 l-6">
                                      <input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
                                  </div>
                              </div>
                          </div>
                          <div class="s-12">
                              <textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
                          </div>
                          <div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div>
                      </form>
                  </div>
                 </div>
                </div>
              </section>
              <hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">

              <!-- Bottom Footer -->
              <section class="padding background-dark">
                  <div class="line">
                      <div class="s-12 l-6">
                          <p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
                          <p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
                      </div>
                      <div class="s-12 l-6">
                          <a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
                      </div>
                  </div>
              </section>
          </footer>

    Here is part of css:

    a, a:link, a:visited, a:hover, a:active {
    color: #777;
}
.text-primary, .text-primary *, .primary-color-primary .text-primary, .primary-color-primary .text-primary * {
    color: #49BF4C !important;
}
.text-primary-hover:hover, .primary-color-primary .text-primary-hover:hover {
    color: #49BF4C !important;
}
.text-white, .text-white *, .primary-color-white .text-primary, .primary-color-white .text-primary * {
    color: #fff !important;
}
.background-primary, .primary-color-primary .background-primary {
    background-color: #49BF4C !important;
}
.margin-bottom-10 {
    margin-bottom: 10px !important;
    display: block;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #000;
    margin-bottom: 15px;
    margin-top: 0;
}
h4, .h4 {
    font-size: 1.1rem;
}
@media screen and (max-width: 768px) {
    .margin-m-bottom {
        margin-bottom: 1.25rem !important;
        display: block;
    }
}
.image-hover-zoom:hover img {
    transform: scale(1.1);
}

/*SAmple*/
.section {
    padding: 6rem 1.25rem;
}
.background-dark, .primary-color-dark .background-primary {
    background-color: #002633 !important;
}
.background-dark, .background-dark p, a.background-dark, a.background-dark:visited, a.background-dark:link, .background-dark a, .background-dark a:link, .background-dark a:visited, .background-dark a:hover, .background-dark a:active, .primary-color-dark .background-primary, .primary-color-dark .background-primary p, .primary-color-dark a.background-primary, .primary-color-dark a.background-primary:visited, .primary-color-dark a.background-primary:link, .primary-color-dark a.background-primary:visited, .primary-color-dark .background-primary a, .primary-color-dark .background-primary a:link, .primary-color-dark .background-primary a:visited, .primary-color-dark .background-primary a:hover, .primary-color-dark .background-primary a:active {
    color: #7697A2;
}
hr.break {
    border: 0;
    border-top: 1px solid #e5e5e5;
    display: block;
    margin: 40px 0;
}
.margin-top-bottom-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block;
}
hr.break:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.text-size-12, .text-l-size-12 {
    font-size: 12px !important;
    line-height: 1.4;
}
p {
    color: #777;
    font-size: 0.85rem;
    line-height: 1.6rem;
}
.background-dark h1, .background-dark h2, .background-dark h3, .background-dark h4, .background-dark h5, .background-dark h6, .background-dark .h1, .background-dark .h2, .background-dark .h3, .background-dark .h4, .background-dark .h5, .background-dark .h6, .primary-color-dark .background-primary h1, .primary-color-dark .background-primary h2, .primary-color-dark .background-primary h3, .primary-color-dark .background-primary h4, .primary-color-dark .background-primary h5, .primary-color-dark .background-primary h6, .primary-color-dark .background-primary .h1, .primary-color-dark .background-primary .h2, .primary-color-dark .background-primary .h3, .primary-color-dark .background-primary .h4, .primary-color-dark .background-primary .h5, .primary-color-dark .background-primary .h6, .background-primary h1, .background-primary h2, .background-primary h3, .background-primary h4, .background-primary h5, .background-primary h6, .background-primary .h1, .background-primary .h2, .background-primary .h3, .background-primary .h4, .background-primary .h5, .background-primary .h6, .primary-color-primary .background-primary h1, .primary-color-primary .background-primary h2, .primary-color-primary .background-primary h3, .primary-color-primary .background-primary h4, .primary-color-primary .background-primary h5, .primary-color-primary .background-primary h6, .primary-color-primary .background-primary .h1, .primary-color-primary .background-primary .h2, .primary-color-primary .background-primary .h3, .primary-color-primary .background-primary .h4, .primary-color-primary .background-primary .h5, .primary-color-primary .background-primary .h6 {
    color: #fff;
}
.text-uppercase {
    text-transform: uppercase;
    line-height: 1;
}
b, strong, .text-strong {
    font-weight: 700;
}
h4, .h4 {
    font-size: 1.1rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #000;
    margin-bottom: 15px;
    margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
    color: #152732;
    font-weight: normal;
    line-height: 1.3;
    margin: 0.5rem 0;
}
h4 {
    font-size: 1.4rem;
}
.text-size-20, .text-l-size-20 {
    font-size: 20px !important;
    line-height: 1.4;
}
.margin-top-30 {
    margin-top: 30px !important;
    display: block;
}
a.text-more-info:after {
    content: "f006";
    font-family: mfg;
    font-size: 0.8rem;
    margin-left: 0.625rem;
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;
}
a.text-more-info {
    display: block;
    font-size: 0.85rem;
    margin-top: 0.625rem;
}
.text-white-hover, .text-primary-hover, .text-dark-hover {
    transition: color 0.20s linear 0s;
    -o-transition: color 0.20s linear 0s;
    -ms-transition: color 0.20s linear 0s;
    -moz-transition: color 0.20s linear 0s;
    -webkit-transition: color 0.20s linear 0s;
}
.image-hover-zoom {
    display: block;
    overflow: hidden;
}
.image-hover-zoom img {
    transition: all 0.20s linear 0s;
    -o-transition: all 0.20s linear 0s;
    -ms-transition: all 0.20s linear 0s;
    -moz-transition: all 0.20s linear 0s;
    -webkit-transition: all 0.20s linear 0s;
}