Community Forums › Forums › Archived Forums › Design Tips and Tricks › Atmosphere Pro – Added Sidebar page template but now it's not mobile responsive
Tagged: Atmosphere Pro, css, mobile responsive
- This topic has 2 replies, 2 voices, and was last updated 8 years, 6 months ago by ajsantos219.
-
AuthorPosts
-
April 22, 2016 at 9:53 am #184176ajsantos219Member
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/April 22, 2016 at 11:25 am #184190ChristophMemberHi AJ,
you will have to adjust the widths in the media queries
or copy and adjust the media queries from executive pro .
April 22, 2016 at 11:59 am #184198ajsantos219MemberThanks 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%;
}}
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.