Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS My WordPress website is not loading correctly on different size monitors! Reply To: My WordPress website is not loading correctly on different size monitors!

#176496
Filmguy2013
Participant

Thanks, guys! I will confront them about the theme not being truly responsive now that I have some confirmation from people in the know like you folks. One more question. Does anyone know where I can go to get my website made into a responsive website? I am guessing I will probably have to shell out some dough and hire a web developer to do it?

Also, Paulie, there are at least media queries in the CSS. Would I have to mess with the media queries to make my website responsive? The media queries are:

        /* =RESPONSIVE
-------------------------------------------------------------- */

.menu-primary-responsive-container, .menu-secondary-responsive-container  {
    display: none;
    margin: 10px;
}

.menu-primary-responsive, .menu-secondary-responsive  {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
}

/* Tablets ----------- */

@media only screen and (max-width: 768px) {

     #container, #footer-container {
        width: 100%;
    }

    #main, 
    #main-fullwidth, 
    #header, 
    #footer-widgets,
    #footer {
        padding-left: 10px;
        padding-right: 10px;
    }

    #main, #main-fullwidth {
        background-image: none;
    }

    #header {
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .logo, .header-right {
        float: none;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .header-right {
        padding-top: 10px;
    }

    #topsearch {
        float: none;
        width: 96%;
        margin: 10px 2%;
    }

    #header #topsearch {
        margin-left: 0;
        margin-right: 0;
        width: 100%; 
    }

    #top-social-profiles {
        float: none;
        width: 100%;
        display: block;
        text-align: center;
    }

    #content, #sidebar-primary, #sidebar-secondary {
        width: 100%;
        float: none;
        padding: 0;
        margin: 0;
        display: block;
    }

    .menu-primary-container, .menu-secondary-container {
        float: none;
        margin-left: 0;
        margin-right: 0;
        display: block;
    }

    .fp-slider, #fb-root {
        display: none;
    }

    .post-box {
        width: 100%;
        height: 100%;
        float: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    #footer-widgets-container #footer-widgets {
        width: inherit;
    }

    .footer-widget-box {
        width: 100%;
        float: none;
        margin: 0;
        padding: 0;
    }
    #copyrights, #credits {
        display: block;
        float: none;
        text-align: center;
    }

    #footer-container #copyrights, #footer-container #credits {
        padding: 5px 0;
    }

    #footer-container #footer {
        width: auto;
        padding-left: 100px;
        padding-right: 10px;
    }

}

/* Mobile Phones ----------- */

@media only screen and (max-width: 480px) {

    .menu-primary-responsive-container, .menu-secondary-responsive-container {
        display: block;
    }

    .menu-primary-container, .menu-secondary-container {
        display: none;
    }

    #header .menu-primary-responsive-container, #header .menu-primary-responsive-container {
        margin-left: 0;
        margin-right: 0;
        width: 100%; 
    }
}