I just found the mobile settings, I listed them below. When I delete these settings from my css code, the site actually works a bit better on the phone – The sidebar is where it should be. When the code stays I run into theese problems when viewing my webpage on an Iphone:
-The sidebar gets pushed under my content instead of being on the right
-The webpage is auto zoomed in instead of zoomed out
-My content div isn’t as wide as it should be, its not covering the horizontal length of the sidebar as well as the actual content. It’s just covering the horizontal length of the content.
-You can’t see the left of the background, the website starts at the left of my content box instead of starting at the background.
Any help would be appreciated so much and here is the code:
/* =Responsive Structure
-------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
.flex-direction-nav {
bottom: -36px;
left: auto;
margin: 0;
right: 21px;
top: auto;
width: auto;
}
.flex-direction-nav li {
float: left;
margin: 0 1px 0 0;
}
}
@media screen and (max-width: 768px) {
.site-description {
float: none;
margin: 0.7857142857em 0 0 0;
width: 100%;
}
#masthead hgroup {
margin: 0 0 2.2857142856em 11.17886178%;
}
.site-content {
float: none;
margin: 0;
}
#content {
margin: 0;
}
#secondary {
float: none;
width: 100%;
}
.hentry {
margin: 0 0 3.1428571428em 11.17886178%;
}
.entry-header .avatar {
margin: 9px 0 0 -12.58581235%;
}
#content .site-navigation {
margin: 0 0 1.5714285714em 11.17886178%;
}
.syndicate,
.widget {
padding: 1.6666666666em 0 0 11.17886178%;
}
.page-header {
margin: 0 0 3.1428571428em 11.17886178%;
}
.featured-content {
float: none;
width: 100%;
}
.featured-content-info {
float: none;
margin: 0;
width: 100%;
}
.featured-summary p {
padding: 0 0 2em 0;
}
.flex-direction-nav {
bottom: -35px;
left: 0;
margin: 0;
right: auto;
top: auto;
width: 100%;
}
.flex-direction-nav li {
float: none;
}
.flex-direction-nav li a {
left: 0;
position: absolute;
top: 0;
}
.flex-direction-nav li .prev {
margin: 0 0 0 -6px;
}
.flex-direction-nav li .next{
left: auto;
margin: 0 -6px 0 0;
right: 0;
}
.flex-control-nav {
bottom: 0;
left: 0;
text-align: center;
width: 100%;
}
#comments {
margin: 0 0 1.5714285714em 11.17886178%;
}
.comment .avatar {
margin: 3px 0 0 -12.58581235%;
}
#content .site-navigation.comment-navigation {
margin: 0 0 1.5714285714em 0;
}
.error404 article .widget {
padding: 1.6666666666em 0 0 0;
}
.syndicate li {
margin: 0 0 0.933333333em 20px;
}
.syndicate li:first-child {
margin: 0;
}
}
@media screen and (max-width: 600px) {
#page {
padding: 3.1428571428em 0.5714285714em 0;
}
#masthead {
margin: 0 0 3.1428571428em 0;
}
#masthead hgroup {
margin: 0 0 2em 0;
}
.site-title {
font-size: 22px;
text-align: center;
}
.site-description {
font-size: 12px;
margin: 0;
text-align: center;
}
.main-small-navigation {
border-bottom: 1px dotted #b3b3b3;
border-top: 1px dotted #b3b3b3;
}
.menu-toggle {
font-size: 17px;
line-height: 2.0em;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.menu-small-menu-container {
margin: 0 auto;
width: 50%;
}
.featured-posts-wrapper {
margin: -0.8571428571em 0 4.7142857142em 0;
}
.entry-header .avatar {
display: none;
}
.byline {
display: inline;
}
.hentry,
.full-width .hentry,
.image-attachment .hentry,
.no-sidebar .hentry,
.error404 .not-found {
margin: 0 0 3.1428571428em 0;
}
.entry-content, .entry-summary {
margin: 1.5714285714em 0 0 0;
}
h1 {
font-size: 22px;
}
h2 {
font-size: 19px;
}
h3 {
font-size: 17px;
}
h4 {
font-size: 15px;
}
h5 {
font-size: 14px;
}
.no-sidebar .page-header {
margin: 0 0 3.1428571428em 0;
}
#comments,
.full-width #comments,
.image-attachment #comments,
.no-sidebar #comments {
margin: 0 0 1.5714285714em 0;
}
.comment .avatar {
display: none;
}
#content .site-navigation,
.no-sidebar #content .site-navigation {
margin: 0 0 1.5714285714em 0;
}
.page-header {
margin: 0 0 3.1428571428em 0;
}
.syndicate, .widget {
padding: 1.6666666666em 0 0 0;
}
.site-footer {
padding: 1.5714285714em 0 1.5714285714em 0;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#page {
padding: 1.5714285714em 0.5714285714em 0;
}
#masthead {
margin: 0 0 1.5714285714em 0;
}
#masthead hgroup {
margin: 0 0 1.1428571428em 0;
}
.featured-posts-wrapper {
margin: -0.8571428571em 0 2.3571428571em 0;
}
.hentry {
margin: 0 0 1.5714285714em 0;
}
.entry-content, .entry-summary {
margin: 0.7857142857em 0 0 0;
}
.commentmetadata {
margin: 0 0 0.9166666666em 0;
}
.entry-content embed,
.entry-content iframe,
.entry-content object {
height: auto;
}
}
