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
**/

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)}

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

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.