Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #272966

    The site is only a few pages with a few youtube videos? Not sure what is going on but it is so slow? I am not using any plugins out of the normals

    http://ryanlacorte.com/peppersghost/

    and also the logo is isnt responsive, here is all my custom css:
    ———————————————

    #top #main,#top .html_stretched #wrap_all,#top .alternate_color,#top .header_color,#top .main_color,#top .header_color div,#top #header,#top .header_color .container_wrap_meta,#top .header_color .header_bg,#top .footer_color,#top .footer_color,#top .socket_color {
    background-color:rgba(255,255,255,0) !important;
    }

    #top .container_wrap {
    border-top-width:0px !important;
    }

    #top #header_main {
    border-bottom-width: 0px !important;
    }

    #header_meta {
    background: #0772A1;
    }

    #top ul:first-child > li > a {
    color: white;
    }

    #top ul:first-child > li > a:hover {
    color: red;
    }

    .html_header_top.html_logo_center .main_menu {
    text-align: center;
    background-color: #0172b6;
    border-radius: 5px;
    margin-top: 20px;
    }

    #header .container_wrap {
    border: none;
    }

    #main .container_wrap {
    background-color: transparent;
    }

    li:hover .avia-menu-fx, .current-menu-item>a>.avia-menu-fx, li:hover .current_page_item>a>.avia-menu-fx{opacity: 1; visibility: hidden;}

    .html_header_top.html_bottom_nav_header .main_menu ul:first-child>li a {
    border-right-style: solid;
    border-right-width: 1px;
    font-size: 14px;
    }

    .html_header_top.html_logo_center .logo {
    margin-top: 11px;
    }

    .main_color p{
    font-size: 15px !important;
    }

    .main_color h2 {
    font-size: 17px !important;
    }

    .csstransforms3d .show_mobile_menu #mobile-advanced {background-color: lightgray !important;}

    #advanced_menu_toggle, #advanced_menu_hide {
    margin-top:35px;
    background-color: #000000;
    color: #ffffff;
    border-color: #0171b6;
    }

    #mobile-advanced, #mobile-advanced a, #mobile-advanced .mega_menu_title {
    color: #000000;
    border-color: #000000;
    }

    .entry-content-wrapper div li {
    text-indent: 0;
    font-size: 14px;
    }

    .main_color h3 {
    font-weight: bold !important;
    }

    @media screen and (max-width: 600px) {
    #supersized {
    display:none;
    }
    }

    #top ul:first-child > li > a {
    color: white;
    text-shadow: 2px 2px #000000;
    }

    .image-overlay {
    position: absolute;
    background: 0;
    z-index: 500;
    height: 100%;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    }

    .avia_image.avia-align-center img, iframe {
    margin: 0 auto;
    display: inline-block;
    background-color: #FFFFFF;
    border: 2px solid #ff0000 !important;
    box-shadow: 5px 5px 2px #888888;
    border-radius: 0 !important;
    }

    .avia-align-center.avia_image.avia-builder-el-no-sibling {
    margin-bottom: 0;
    margin-top: 0;
    background-color: #FFFFFF;
    border: 2px solid #ff0000 !important;
    box-shadow: 5px 5px 2px #888888;
    border-radius: 0 !important;
    }

    h3.headline {text-shadow: 2px 2px #6F6F6F !important;}

    .logo, .logo a, .logo a img {
    width: 960px;
    height: 124px;
    }

    .html_header_top.html_logo_center .logo {
    margin-top: 0px;
    }

    —————————————-

    • This topic was modified 9 years, 10 months ago by l2yan00.
    #273004

    Hey!

    Your site is loading fine, took less than 2 seconds to load. To fix the logo issue, add this code to the Quick CSS:

    @media only screen and (max-width: 767px) {
    .logo, .logo a, .logo a img {
        width: 100% !important;
    }
    }
    

    Best regards,
    Josue

    #273071

    that is not working. I want the logo that is 960×124 to be displayed above the navigation. also be responsive.

    http://ryanlacorte.com/peppersghost/

    #273289

    ok the logo is good. except its not responsive. Can you help?

    #273290

    also how can I modify the nav to display solid circle bullets instead of the triangle ones?

    http://ryanlacorte.com/peppersghost/

    #273308

    Hi!

    You would need to remove or add new css rules inside media queries to let the logo actually change sizes on tablet and mobile devices. This css force it to always be that larger width:

    
    .logo, .logo img {
    width: 800px !important;
    max-width: 800px !important;
    height: 103px !important;
    }
    

    Best regards,
    Devin

    #273312
    #273321

    You can change the avia-bullet class with:

    
    .avia-bullet {
    border: 3px solid #FF0000 !important;
    border-radius: 3px;
    }
    
    #273327

    ok thanks. the logo still doesnt respind properly while resizing the window. can you check this for me?

    #273352

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive .logo, .responsive .logo img {
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important;
    }
    }

    Result:

    Cheers! 
    Josue

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