Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #80432
    ttolun
    Participant

    Hi there,
    I have randomized 4 header images on my front page. They work totally fine on apple products including mobile, desktop and laptop. However internet explorer, chrome and some other browsers both in mobile and laptop cut the big parts of my top header images. (my web address: tolgatolun.com)

    Do you have any suggestion that can help me solve this issue?

    Thanks,
    TT

    #80455
    Mahesh
    Keymaster

    Hi @ttolun

    Put the following CSS code in “Appearance => Customizer => Theme Options => Custom CSS” box:

    .wrapper img{
        margin-top: 44px;
    }
    
    ::i-block-chrome, .wrapper img{
        margin-top: 0;
    }

    Let me know if this fixes your issue.

    #80458
    Sakin
    Keymaster

    @ttolun: That is part of the design. That menu is be floting above the the header image and slider. See the demo http://catchthemes.com/demo/full-frame/.

    But if you don’t like that then you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
    #feature-slider, #header-featured-image { margin-top: 0; }

    #80472
    ttolun
    Participant

    Thank you for the prompt answer guys. Actually floating menu was the main reason i picked this theme, Sakin.

    However, some browsers (internet explorer and chrome, also mobile: MOTO-G) cut more than half of my header images and even when I scroll up, I was never able to see the other half. So basically, something wasn’t working fine.

    The CSS code you gave actually fixed the cutting problem in all other browsers.- which is good. But the menu doesn’t float anymore until you scroll up.
    (it is the same as for yours MaHesh)

    For now I still left the CSS code you gave, it is still better than being cut.
    But if you have any other solution without preventing the menu from floating, i would really appreciate.

    Thank you
    TT

    #80548
    Sakin
    Keymaster

    @ttolun: I just check in your site in Chrome and it’s working fine. See this screenshot https://www.dropbox.com/s/72uyou2xdxperd2/Screen%20Shot%202015-12-02%20at%206.46.55%20PM.png?dl=0. Also I check in with Safari, Firefox and IE10 and 11.

    Did you refresh your browser and check in? Sometimes it might be cache issue.

    #80609
    ttolun
    Participant

    Thank you Sakin, everything looks alright for now.

    #80617
    Sakin
    Keymaster

    @ttolun: That’s great. Thanks 🙂

    #80990
    stringa
    Member

    Hi ttolun , I found this while looking for some other issues and saw your website.
    Are those header images GIFS or is it a plugin or something else?

    #81043
    ttolun
    Participant

    Yes, stringa they are GIFs.

    #89233
    Feliciano200
    Participant

    Hi would like to make home sliders under menu, with logo and menu on top and sliders underneath without being cut by menu,I want have the menu with logo similar to https://catchthemes.co from this: http://www.legalshield.na/beta/ can you see the slide is overlapped by the menu? Thanks

    #89235
    Mahesh
    Keymaster

    @feliciano200: Go to Dashboard=> Appearance=> Customize=> Theme Option=> Custom CSS
    Note: You have an error in your Custom CSS, there is a missing closing brace at the end. Please put a closing curly brace first.
    Then add the following CSS:

    @media screen and ( min-width: 991px ) {
        #feature-slider {
            margin-top: 88px;
        }
    
        #menu-legalmenu {
            float: left;
    	width: 85%;
        }
    
        #logo-icon {
            width: 15%;
        }
    }

    Regards,
    Mahesh

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Header Images are cut’ is closed to new replies.