All geek questions in one place

How can I set the header image correctly?

I am trying to host a site for a friend using a really nice Wordpress theme. I paid for this topic, but the designer will not help with customization.

The site is at www.zerocarbonfood.co.uk/test/ . Initially, the theme had a small logo aligned to the left, but my friend approves of this large full-sized one, which, I think, works better. The problem is that I look at it on an iPad or iPhone (portrait), the logo is too large and twists it. In the theme settings, it is defined as 922px wide and 168px high. I can not specify the percentage value. Can I override this in CSS somewhere?

Any help would be greatly appreciated as I walk a little out of the depths.

+5
source share
7 answers

The easiest way to handle this is to insert an inline logo image, rather than as a background image. This 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; }
+5
source

try using max-width: 100%; height: auto; max-width: 100%; height: auto; This should change the image correctly.

+3
source

You can use the following condition in css

  /* Resize Background*/ @media only screen and (max-width: 800px) { #header{ width: 100%; height: auto; background-size: 100% auto !important; } }
+1
source

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

In your HTML you can try something like

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

It will scale with the width of the screen. Of course, you also want to scale the height to maintain aspect ratio.

FYI, the site looks great on my Android phone when I completely reduce the image.

0
source

Try image style, not link.

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

Try

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

It will overwrite previous values.

0
source

How does the image zoom in on hover?

Here is an example 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 the CSS part:

 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; }
0
source

Source: https://habr.com/ru/post/1492067/

More articles:


All Articles