Topic Resolution: Resolved
  • Creator
    Topic
  • #28602

    Jeremy Luban
    Participant
    Been thanked: 3 times

    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

Viewing 10 replies - 1 through 10 (of 10 total)
Replies
  • Denzel Chia
    Moderator
    Post count: 3218
    Been thanked: 128 times
    #28616 |

    Hi,

    Please use the following in Theme Options -> Custom CSS

    Thank you

    Jeremy Luban
    Participant
    Post count: 20
    Been thanked: 3 times
    #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
    Moderator
    Post count: 241
    Been thanked: 19 times
    #28619 |

    Hi Jeremy,
    Thanks for reaching out to us again.

    Kindly try out the following custom CSS code:

    I hope that helps.

    Jeremy Luban
    Participant
    Post count: 20
    Been thanked: 3 times
    #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
    Post count: 3218
    Been thanked: 128 times
    #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
    Participant
    Post count: 20
    Been thanked: 3 times
    #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
    Post count: 3218
    Been thanked: 128 times
    #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
    Participant
    Post count: 20
    Been thanked: 3 times
    #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
    Moderator
    Post count: 241
    Been thanked: 19 times
    #28662 |

    Hi Jeremy,

    Thanks for reaching out to us again.

    Kindly try out the following custom CSS code:

    I hope that helps.

    Jeremy Luban
    Participant
    Post count: 20
    Been thanked: 3 times
    #28671 |

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

Viewing 10 replies - 1 through 10 (of 10 total)
You must be logged in to reply to this topic.