Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21913

    On my site located at http://www.relevantfl.org when resizing the site by dragging the corner of the browser window inward, the bottom strip of the head image (blue and aluminum portion) does not resize and appears to remain the same width the entire time. Also, the menu options cross over the part of the logo that says “Relevant Church” I have decreased the spacing between each minimum option down to 7px but that still does not seem to help.

    For the header image I have the following Quick CSS applied: “h1.logo img {max-width: 990px;}”

    For the menu I have the following applied: “#top .main_menu ul:first-child > li > a {padding: 0 7px;}”

    #113540

    Hi jmwilliams83,

    Try to add this code in your Quick CSS:

    @media only screen and (max-width: 767px) {
    .container_wrap {
    overflow-x: hidden;
    }
    }

    or this one if the code above doesn’t help:

    @media only screen and (max-width: 767px) {
    .container_wrap {
    overflow-x: hidden !important;
    }
    }

    Hope this helps.

    Regards,

    Ismael

    #113541

    PURE GENIUS! Any suggestions on stopping the overlap of the menu with the logo? I think if I decrease the padding anymore it will look like a sentence instead of a menu.

    #113542

    Hi jmwilliams83,

    Try to add this code in your Quick CSS:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .logo {
    max-width: 774px;
    }

    .main_menu {
    right: -60px;
    }
    }

    Hope this helps. :)

    Regards,

    Ismael

    #113543

    That portion now works perfect! It seems to have brought back the problem where the silver and blue strip is not fully contained and resizing with the site itself. It eventually catches up with the resizing but around what would be the size of a tablet screen its off.

    Will I have to make a modification to one of the below Quick CSS codes:

    h1.logo img {max-width: 990px;}

    @media only screen and (max-width: 767px) {.container_wrap {overflow-x: hidden !important;}}

    #113544

    Hi jmwilliams83,

    Try replacing this code:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .logo {
    max-width: 774px;
    }

    .main_menu {
    right: -60px;
    }
    }

    with this one:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    h1.logo img {
    max-width: 774px;
    }

    .main_menu {
    right: -60px;
    }
    }

    Hope this helps.

    Regards,

    Ismael

    #113545

    Pure genius YOU GUYS ARE AWESOME!!!!

    #113546

    Hi!

    Glad that Ismael could help you :)

    Regards,

    Peter

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Header Image’ is closed to new replies.