Topic Resolution: Resolved
  • Closed
  • Jeremy Luban
    Spectator
    June 25, 2016 at 8:06 am #28602

    Hi
    I just made a new website using .evolve plus.
    I have an image in the header that does not resize when viewed on an iPhone.
    The website is http://www.lubanlab.org
    Any help getting the header to resize would be appreciated.
    Thanks
    Jeremy

    Denzel Chia
    Moderator
    Posts: 2656
    June 26, 2016 at 1:18 pm #28616

    Hi,

    Please use the following in Theme Options -> Custom CSS

    .custom-header {
    background-size: 100% auto !important;
    }

    Thank you

    Jeremy Luban
    Spectator
    Posts: 20
    June 26, 2016 at 4:28 pm #28618

    Wow! That worked like magic. Thanks so much.

    There is a new problem that results from the resizing on the iPhone:
    the blank padding space underneath the header image became much bigger. It takes up about 1/3rd of the screen. On a laptop the sizing looks good, but on the iPhone it is much too big.

    Is there a way to fix that?

    Thanks again,
    J

    Daniel Jones
    Spectator
    Posts: 148
    June 26, 2016 at 7:18 pm #28619

    Hi Jeremy,
    Thanks for reaching out to us again.

    Kindly try out the following custom CSS code:
    @media only screen and (max-width: 768px){
    .custom-header {
    height: 55px!important;
    }
    }

    I hope that helps.

    Jeremy Luban
    Spectator
    Posts: 20
    June 27, 2016 at 3:17 pm #28640

    That’s much better!!! Thanks.
    But now there is the problem that the bottom of the Header is cut off by the black horizontal bar. This now happens both on the laptop at certain screen sizes, and it happens on the iPhone whether the phone is vertical or horizontal.
    Again, any help would be much appreciated.
    Jeremy

    Denzel Chia
    Moderator
    Posts: 2656
    June 28, 2016 at 1:34 am #28648

    Hi,

    Increase the 55px as written in Daniel’s reply.
    Increase until you are able to see your entire image height in mobile.

    This now happens both on the laptop at certain screen sizes

    Please use this online website.
    http://viewportsizes.com/mine/

    Tell me at what size you see the cut off issue.

    Thank you.

    Jeremy Luban
    Spectator
    Posts: 20
    June 28, 2016 at 4:37 am #28653

    Hi Folks
    To make it fit on a horizontal iPhone I made it 150 px, but the black bar underneath the header image is much too thick.
    And the header gets cut off if I view it on the full-length of the laptop, or on a larger desktop screen.
    Is there no way that the header and the bar with the links can be made to a fixed size on any screen? There are plenty of websites that work this way. For example, look here:
    http://www.genetics-gsa.org/MODSupport/Mod/Support
    This website sizes perfectly….
    Thanks
    J

    Denzel Chia
    Moderator
    Posts: 2656
    June 28, 2016 at 5:23 am #28654

    Hi,

    On this site.
    http://www.genetics-gsa.org/MODSupport/Mod/Support
    The banner is an image in the HTML image tag.
    But in our theme, your banner is a background image in a div.

    An image in HTML tag and a background image in a div behaves differently.

    Yes, if you have an image in HTML tag and not as a background div, it will be much easier to handle.
    But this will require modifications to the theme code.
    Our support does not include providing assistance in modifying theme codes.

    You can contact us for customization service via https://theme4press.com/theme-customization-service/

    Or you can use multiple sets of media query css to fix it in different browser widths, which is why I asked for viewport sizes.

    Thank you

    Jeremy Luban
    Spectator
    Posts: 20
    June 28, 2016 at 6:53 am #28655

    OK. I think I understand what you are asking. Sorry to be so dense!

    I think I will try putting the images into the page, rather than into the header. I think this might be easier to control?

    Otherwise, is there was a way to shrink the extra white space at the top of the individual pages, underneath the header? Hopefully this will be easy and I can leave you alone after that!

    Thanks again,
    J

    Daniel Jones
    Spectator
    Posts: 148
    June 28, 2016 at 3:42 pm #28662

    Hi Jeremy,

    Thanks for reaching out to us again.

    Kindly try out the following custom CSS code:

    .hentry {
    padding-bottom: 0px!important;
    }
    .entry-content {
    margin-top: 0px!important;
    }
    .content {
    padding-top: 0px!important;
    }

    I hope that helps.

    Jeremy Luban
    Spectator
    Posts: 20
    June 29, 2016 at 7:15 am #28671

    That works great!!!
    I think I’ll go with this.
    Thanks so much for the excellent assistance.
    Jeremy