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!
July 25, 2014 at 7:30 pm
#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%;
}
}