The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Mobile Version suddenly wrecked!

View previous topic View next topic Go down

Mobile Version suddenly wrecked!

Post by troyeccles on June 6th 2016, 2:06 pm

Hi,

www.bellsareringing.forumotion.com
phpBB3

Over the last couple of days, I've got help in here regarding footer width issues.
It MAY be that in fixing that, the mobile version has wrecked.

*** It's not dynamically sizing to the device, rather than going full width ***

This is a real problem as most members are using the mobile version.


The problem may be with either of the two sections here (full CSS is at the bottom).

Code:
/*page width*/
#wrap { width:97% !important; }
body {
    min-width: 1200px;

OR

Code:
/* Footer width for all devices */
.floating_foot_list {
    float: left;
    width: 25%;
    min-width: 320px;
}


Full CSS:

Code:
/*Vote Button*/
.vote .vote-button, .vote-no-bar {
  display:none;
}
.vote .vote-button:first-child {
    display:block;
}
.vote .vote-button a {
background-image: url('http://i86.servimg.com/u/f86/19/33/21/71/blue_l10.png') !important;
background-repeat:no-repeat;
padding-right: 50px;
padding-top: 50px;

font-size:0 !important;
}
.vote { width:auto }

/*Vote System*/
.VCount:before{
content: url('http://i86.servimg.com/u/f86/19/33/21/71/blue_l10.png');
opacity:1;
filter:alpha(opacity=50);
}
.VCount{
color:#00;
font-size:12px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.3);
font-family: Verdana,Arial,Helvetica,sans-serif;
cursor:default;
}
.VPlus{
color:#00 !important;
font-size:15px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.1);
font-family: Verdana,Arial,Helvetica,sans-serif;
position:relative;
left:9px;
z-index:1;
}

.vote{
opacity:0;
filter:alpha(opacity=0);
}

/*Header Logo*/
#logo img { width:100%; }

/*page width*/
#wrap { width:97% !important; }
body {
    min-width: 1200px;
}
/*Toolbar colour*/
#fa_toolbar, #fa_toolbar_hidden {background-color: #4A1D1D !important;}
/*Hide Search Bar*/
#page-header #search-box {  display:none }

/*Icon Spacing ToolBar*/
.fa_network {
  margin:0 5px;
  max-height:40px;
  max-width:40px;
}
#fa_toolbar { height:50px ! important }
#fa_toolbar { width : 100% ! Important }

/* button image */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }

/* drop down input */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}

/*Profile Box*/
.postprofile {
  text-align:center;
  background:#;
  border:1px solid #CCC;
  border-radius:3px;
  margin: 10px 0px 0px;
  padding: 10px 3px 3px;
  box-shadow: 01px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0);
  min-height: 80px;
position: relative;
max-width: 277px;
word-wrap: break-word;
}

.postprofile dd, .postprofile dt { margin-left:0 }

blockquote blockquote {
   background-color: #ECECEC;
   font-size: 1em;
   margin: 0.5em 1px 0pt 15px;}

.postprofile dd, .postprofile dt { margin-left:0 }

/* offline image */
.post .postprofile {
  background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n33.png');
  background-repeat:no-repeat;
  background-position:center 0px;
 
 
}

/* online image */
.post.online .postprofile {
  background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n32.png');
  background-repeat:no-repeat;
  background-position:center 0px;
}

.postprofile .label {
    float: left;
    margin-left: -3px;
    margin-right: 3px;
    width: 50%;
    text-align: right;
}
.postprofile .label, .postprofile .label span {
    font-weight: 700;
    color: #39C !important;
}
* {
    margin: 0px;
    padding: 0px;}

.postprofile dd {
    color: #333;
    text-align: left;
}
.postprofile dd, .postprofile dt {
    line-height: 1.2em;}

.postprofile dd:last-child, .postprofile dt + dd {
    text-align: center;}

.postprofile { padding-top:70px }

#content-container div#right {
    float: right;
    overflow: hidden;
    width: 220px;
    padding-top: 46px;
}

li.row { position:relative }

/*Last Post Icon location*/



.lastpost > span > a:last-child, .lastpost > div > span > a, .last-post-icon {
  position:absolute;
  right:10px;
  top:10%;
}


ul.topics dd.dterm, ul.topics dt {
    display: block;
    float: left;
    padding-left: 55px;
    width: 50%;
}

.dterm a[href$="?view=newest"] { display:none; }

.postprofile dt img {
  max-height:125px;
  max-width:125px;
}

#login_popup{background-color: #07005e;max-height:600px;colour:#d4c196;border:1px solid white;border-radius:5px;padding:25px;}
 ul.linklist li.rightside a {
    display: inline-block !important;
}

 div#main-content ul.linklist {
    display: none !important;
 
}




/* Spacing between topic and body text */
.postbody .content {
  margin-top:10px; !important;
}
 
/* Topic border width */
.forabg {
padding: 1px;
}

/* Footer width for all devices */
.floating_foot_list {
    float: left;
    width: 25%;
    min-width: 320px;
}

/* Customised Quote box */
blockquote div { margin-left: 3px!important; }
blockquote blockquote { margin: 0.5em 10px 0pt 10px!important; }
blockquote, .codebox {
  background:#FFF;
  border:1px solid #A0C9E3;
  border-bottom-width:1px;
  padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 5px;
    padding-left: 0px !important;
}
 
blockquote cite, .codebox dt {
  color:#FFF;
  background:#A0C9E3;
  border-radius:1px;
  padding:6px;
}
 
 
/* Customised Spoiler box */
dl.codebox {
  background:#A0C9E3;
  border:1px solid #A0C9E3;
  border-radius:1px;
}
 
dl.codebox dt {
  color:#FFF;
  padding:1px;
}
 
dl.codebox dd, .spoiler_content {
  color:#666;
  background:#FFF;
  border:none;
  padding:6px;
  border-radius:1px;
}




/* THEME MOBILE */
#mpage-body {
  background:#EDEDED;
}
 
#mpage-body .post .content a {
  color:#292929;
  text-decoration:underline;
}
 
/* POSTS */
#mpage-body .post .content a:hover { color:#333 }
 
#mpage-body .post {
  color:#525252;
  background:#EDEDED;
  margin:6px 3px;
  border-radius:3px;
}
 
#mpage-body .postbody .post_header {
  color:#FFF;
  background:#4A1D1D;
  border-radius:3px 3px 0 0;
}
 
 
        .avatarMobile {
          background:#EDEDED;
          border:1px solid #555;
          border-radius:40px;
          height:40px;
          width:40px;
          display:inline-block;
          vertical-align:bottom;
          margin-bottom:-0.1em;
          overflow:hidden;
          position: relative;
        }
     
        .avatarMobile img {
          width:40px;
          height:40px;
 }


#mpage-body .postbody:after, #mpage-body .postbody::after { background:none }
 
/* HEADER */
.mobile_title {
  background:none;
  border:none;
}
 
.mobile_title.application_header {
  background:#FFF;
  border-bottom:1px solid #CCC;
}
 
.mobile_title_content {
  color:#333;
  text-shadow:none;
}
 
/* FORUMS */
.mobile_set {
  color:#FFF;
  background:#4A1D1D;
  border:none;
  border-radius:3px;
  margin:6px 3px;
}
 
.mobile_set_content {
  text-shadow:none;
  line-height:16px;
}
 
.mobile_item {
  background:#A0C9E3;
  border:none;
  border-radius:3px;
  margin:6px 3px;
  padding:0;
  overflow:hidden;
}
 
.mobile_item:hover, .mobile_item_content:hover {
  background-color:#333;
}
 
.mobile_item_content {
  padding:6px 0;
  background-position:-2px 50%;
}
 
.mobile_subtitle, .mobile_comment {
  color:#FFF;
  text-shadow:none;
}
 
/* BUTTONS */
.mobile_prev_button, .mobile_next_button, .defaultBtn {
  background:#A0C9E3;
  border:none;
  border-radius:3px;
}
 
.mobile_prev_button p, .mobile_next_button p {
  color:#FFF;
  text-shadow:none;
}
 
.mobile_prev_button:hover, .mobile_next_button:hover, .defaultBtn:hover { background:#333 }
 
/* INPUT FIELDS */
.inputTxtContainer {
  padding:0;
  border:none;
}
 
.inputTxtContainer .inputTxt, #mpage-body textarea {
  color:#666;
  border:1px solid #CCC !important;
  border-radius:3px;
  padding:5px;
}
 
.inputTxtContainer .inputTxt:hover, #mpage-body textarea:hover { border-color:#EDEDED !important }
.inputTxtContainer .inputTxt:focus, #mpage-body textarea:focus { border-color:#333 !important }
 
/* POST BOXES */
#mpage-body blockquote, #mpage-body .codebox, #mpage-body .spoiler {
  color:#666;
  background:#FFF;
  border:1px solid #A0C9E3;
  border-radius:3px;
  display:block;
}
 
#mpage-body blockquote cite, #mpage-body .codebox p, #mpage-body .spoiler_title {
  color:#FFF;
  background:#A0C9E3;
  border-radius:3px;
  display:block;
  float:none;
  padding:0.5em;
  margin-bottom:0.5em;
}
 
#mpage-body .codebox code, #mpage-body .spoiler_content {
  color:#EDEDED;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  padding:0.5em;
}
 
/* ERROR MESSAGE */
.errorMobile {
  color:#FFF;
  font-size:0.8em;
  font-weight:bold;
  background:#E53;
  padding:16px 5px;
}
 
#mpage-body .poll .fieldset { border:none }
 
/* NEW TOPIC */
#mobileActionBar {
  background:#8C5;
  font-weight:bold;
}
 
#mobileActionBar .mobileActionLabel {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/add10.png');
  text-transform:uppercase;
  font-size:1em;
}
 
/* FORUM IMAGES */
.mobile_item_link_content {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/chevro10.png');
  background-position:99% 50%;
}
 
.cat_no_new, .cat_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/folder10.png');
}
 
.forum_no_new, .forum_new, .folder_new, .folder_no_new, .folder_hot, .folder_hot_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}
 
.cat_locked, .forum_locked, .folder_locked, .folder_locked_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}
 
.folder_global, .folder_global_new, .folder_announce, .folder_announce_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}
 
.folder_sticky, .folder_sticky_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png');
}
 
/* NEW POST COLOR */
.cat_new, .forum_new, .folder_new, .folder_locked_new, .folder_global_new, .folder_announce_new, .folder_hot_new, .folder_sticky_new {
  background-color:#8C5;
}

.mobile_image { max-width:99% }

#mpage-body .post embed {
  max-width:99% !important;
  height:auto !important;
}


/*
** The Bells Are Ringing
** May 2016
** By Troy Eccles
**/

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Mobile Version suddenly wrecked!

Post by troyeccles on June 7th 2016, 2:33 am

Update: this code is the culprit:

Code:
body {
    min-width: 1200px;

It was entered to ensure that the custom footer stretched the full width of the page on iPad's (it was only covering about 80%).
However, it's had the undesirable effect of making the mobile version width extremely wide.

Originally this code was BELOW the code for the mobile version. I suspected that might be the issue so I moved it ABOVE the mobile code. No difference.
So I've removed it, which makes the custom footer too narrow: a better option for now at least.

However, as this code fixes the footer, is there a way of making it affect the classic version ONLY rather than all versions?

EDIT: I've tried to google a solution and found the @media tag but I can't get it to work.
For example, the below had not effect:

Code:
body {
  min-width: 1200px;
  @media (max-width: 700px)}


Last edited by troyeccles on June 7th 2016, 2:59 am; edited 1 time in total

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Mobile Version suddenly wrecked!

Post by SLGray on June 7th 2016, 2:54 am

The body refers to the whole forum. It effects the size of the text font, text color, etc.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Mobile Version suddenly wrecked!

Post by troyeccles on June 7th 2016, 3:00 am

Hi @SLGray,

I just edited my last post as you replied so I'm not sure if you've seen the edit.
I used @media in an attempt to exclude mobile devices from the body width but it didn't work.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum