Atmosphere Pro – Added Sidebar page template but now it's not mobile responsive

[ajsantos219]

Hello,

I'm currently using the Atmosphere Theme - absolutely beautiful. One downfall was the inability to add a sidebar to pages. However, I followed this guide http://victorfont.com/enable-sidebars-in-atmosphere-pro/ to
allow for sidebars. It worked perfectly. It did exactly what I wanted.

However, the content on those pages is no longer being mobile responsive or scaling properly to the size of the browser window.

Here's the website and page in question: http://www.flwaterdamagerestoration.com/water-damage-restoration-services/

Thanks in advance,

AJ

http://www.flwaterdamagerestoration.com/water-damage-restoration-services/

[Christoph]

Hi AJ,

you will have to adjust the widths in the media queries
or copy and adjust the media queries from executive pro .

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[ajsantos219]

Thanks for your response, Christoph

What exactly should I be adjusting the width to? I'm very new to this, sorry. I also don't have access to the executive pro theme.

This is my curent CSS for Media Queties in Atmosphere Pro. If it's not too much to ask, would it be possible for you to point out exactly what I should be adjusting and to what?

Thanks!

/* Media Queries
---------------------------------------------------------------------------------------------------- */

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

.site-inner {
margin-top: 0;
padding-left: 10%;
padding-right: 10%;
}

.js .genesis-nav-menu .sub-menu,
.js .genesis-nav-menu .sub-menu a,
.header-image .site-title > a,
.site-header {
width: 100%;
}

.site-header {
position: inherit;
text-align: center;
}

.header-image .nav-primary:not(button) {
margin-top: 0;
padding-bottom: 20px;
}

.nav-primary,
.title-area {
float: none;
}

.nav-primary li.highlight > a,
.nav-primary li.highlight > a:hover,
.nav-primary li.highlight > a:focus,
.js .nav-primary .sub-menu a {
background: none;
border: none;
}

.nav-primary li.highlight > a {
margin-left: 0;
padding-left: 10px;
padding-right: 10px;
}

.nav-primary li.highlight > a:hover,
.nav-primary li.highlight > a:focus {
color: #55acee;
}

.nav-primary .genesis-nav-menu li.highlight > a:hover,
.nav-primary .genesis-nav-menu li.highlight > a:focus {
background-color: #fff;
}

.js nav {
display: none;
position: relative;
}

.js nav .wrap {
padding: 0;
}

.js nav.pagination {
display: block;
}

.admin-bar .menu-toggle {
top: 0;
}

.menu-toggle,
.sub-menu-toggle {
border-width: 0;
background-color: #fff;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
visibility: visible;
}

.menu-toggle:hover,
.menu-toggle:focus,
.sub-menu-toggle:hover,
.sub-menu-toggle:focus {
border-width: 0;
}

.menu-toggle {
margin-top: 10px;
position: relative;
right: 0;
z-index: 1000;
width: 100%;
}

.menu-toggle:before,
.menu-toggle.activated:before {
color: #000;
content: "\f130";
display: inline-block;
font: normal 20px/1 'ionicons';
margin: 0 auto;
padding-right: 10px;
text-rendering: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
vertical-align: bottom;
}

.sub-menu-toggle {
float: right;
padding: 8px 18px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}

.sub-menu-toggle:before {
content: "\f3d0";
display: inline-block;
font: normal 16px/1 'ionicons';
text-rendering: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}

.sub-menu-toggle.activated:before {
content: "\f3d8";
}

.js .genesis-nav-menu .menu-item {
display: block;
float: none;
margin-top: 1px;
margin-bottom: 1px;
position: relative;
text-align: left;
}

.js .genesis-nav-menu .menu-item:hover {
position: relative;
}

.js .genesis-nav-menu .menu-item a {
border: none;
padding: 10px;
width: 100%;
}

.js .genesis-nav-menu .menu-item a:hover,
.js .genesis-nav-menu .sub-menu {
border: none;
}

.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
left: 0;
margin-left: 0;
}

.js .genesis-nav-menu > .menu-item-has-children > a:after {
content: none;
}

.js .genesis-nav-menu .sub-menu {
clear: both;
display: none;
margin: 0;
opacity: 1;
padding-left: 15px;
position: static;
width: 100%;
}

.js .genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}

.js .genesis-nav-menu .sub-menu a {
border: none;
}

.js nav button:hover,
.js .menu-toggle:hover,
.js .nav-primary {
background-color: #fff;
color: #000;
}

.js nav button:focus,
.js .menu-toggle:focus {
background-color: #fff;
color: #55acee;
}

.comment-list ul.children {
margin-left: 0;
}

.site-footer {
padding: 20px;
}

}

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

.gallery-item {
float: none;
}

.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
width: 100%;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: none;
margin-left: 0;
width: 100%;
}

}

[Author]

Posts