Tagged: , , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 5, 2014 at 4:53 pm #314115
    Netzie

    We have placed an image in the main header section to the right by adding it manually to the header.php (picture of four books to get free download). So this “important” call to action is shown on ALL pages.
    LINK TO SITE: HenningDaverne.dk
    Now that we are testing in on the mobile, could you help us to:-

    1. How to use the THEME AVIA Builder to set this image in the header (as it is positioned now)
    2 Make the image responsive – so it scales down when we view it on mobile
    2. Align it right so that it does not conflict or obscure the menu navi bar on the mobile. (The “Hamburger”)

    Thanks.

    PS. It’s NOT a background picture :-)

    • This topic was modified 10 years, 3 months ago by Yigit.
    September 6, 2014 at 5:49 am #314376
    Ismael

    Hey Peter!

    Thank you for using Enfold.

    Can you please remove the inline styling then replace it with a css class or id instead? 

    <div style="position: absolute;top: 37px;right: 65px;width:405px;height:106px;z-index: 200;">
<a href="http://www.henningdaverne.dk/gratis-kapitler/"><img src="http://www.henningdaverne.dk/wp-content/uploads/2014/09/gratis-kapitel.jpg"></a>
</div>

    Replace it with this:

    <div id="header-right">
<a href="http://www.henningdaverne.dk/gratis-kapitler/"><img src="http://www.henningdaverne.dk/wp-content/uploads/2014/09/gratis-kapitel.jpg"></a>
</div>

    Add this on Quick CSS or custom.css:

    #header-right { position: absolute;top: 37px;right: 65px;width:405px;height:106px;z-index: 200; }

    We’ll check it on mobile view after.

    Cheers!
    Ismael

    September 7, 2014 at 10:34 am #314700
    Netzie

    Hi Ismael,

    Thanks… Cool – But on my HTC Android mobile the picture is not scaling down? and when I turn the screen the image is blocking the menu (burger). How do I fix that?
    Check on your mobile and let me know – Thanks a million

    Cheers

    Peter

    September 8, 2014 at 1:44 pm #315030
    Yigit

    Hey!

    Please add following code to Quick CSS as well and adjust as needed

    @media only screen and (max-width: 480px) { 
div#header-right img {
width: 50%;
float: right;
margin-top: 10px;
}}

    Best regards,
    Yigit

    September 8, 2014 at 6:38 pm #315272
    Netzie

    Hi Lads,

    That worked :) Cool…
    But now the background picture from the first color section repeats it self all the way down (fixed) to the footer…
    The background pic’s settings: Locked, Top Center, No Repeat
    It also loads wrong on my PC – Special after I been in and using the AVIA designer??
    (But we have this issue in another topic as well (Wife writes as me when she is helping out))

    September 9, 2014 at 4:53 am #315577
    Ismael

    Hey!

    Thank you for the update.

    I checked the website on mobile view and the background of the color section is properly set to no-repeat and fixed. It doesn’t repeat as you described.

    Regards,
    Ismael

    September 9, 2014 at 12:17 pm #315798
    Netzie

    Hi Ismael,
    Thanks for your test – It still acts up on my Android… Also on my PC
    I did read a warning somewhere about SEO by Yoast? but it’s gone again… We do have that plugin ver.1.5.6 so maybe that is what causing the different screens? (Am I fishing here? :-))

    September 10, 2014 at 10:44 am #316401
    Netzie

    Hi Yigit
    Re: HenningDaverne.dk we made the adjustments as you suggested to the mobile parameters (so the 4 books banner in the main header at the top right can be seen clearly)… but it is still a problem if you turn the mobile horizontally. If you set the parameters so the picture can be seen clearly vertically you lose horizontally and vice versa.

    Just had a thought as a last resort… is it possible to move the menu hamburger to the left hand side on the mobile so it frees up space on the right??? Otherwise the banner will have to go and the client really wants it somehow on the top bar. I thought about merging the picture with the logo picture but then when it shrinks to mobile the picture will hardly be visible and he wants a very visible call to action.

    Thank you for your patience on this issue!! :-)

    September 16, 2014 at 7:59 pm #320114
    Yigit

    Hey!

    Please try adding following code

    @media only screen and (max-width: 990px) and (min-width: 769px) {
#advanced_menu_toggle, #advanced_menu_hide { top: 156%; }}
@media only screen and (max-width: 768px) {
#advanced_menu_toggle, #advanced_menu_hide { top: 136%; }}

    It will move mobile menu icon to where page titles currently is, so you can display the banner on mobile

    Cheers!
    Yigit

    September 16, 2014 at 10:30 pm #320157
    Netzie

    Hey Yigit, thank you so much… we were so tired of trying to get it right on mobiles we took it off the top bar and replaced it in the footer. It was too creative to try and get a banner, logo and hamburger on the mobile header anyway. However, should we (or others) have this issue in the future, now we how you genius script!
    Love your determination, many thanks!
    Annemarie

    September 17, 2014 at 1:38 am #320207
    Yigit

    Hi!

    You are welcome Annemarie, glad you figured it out :) Let us know if you have any other questions or issues

    Best regards,
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Header, want to make image responsive’ is closed to new replies.