iPad footer width isn't right

Hello.

I have a custom footer and it looks fine on the desktop PC but on the iPad, it's truncated but about 20% (see the images below).
In my CSS, I have the screen width set at 97% which seems to work perfectly on every desktop I've used. Works well on the iPad, too. Until I changed the footer.

In the overall_footer_begin template, I have min-width: 100%. Changing that will affect both screens (so when it's perfect on the iPad, it's far too wide on the desktop).
Is there something I can so to make the iPad width (and mobile phones, I suppose) display the footer at the proper width without messing up the desktop version?

www.bellsareringing.forumotion.com
phpbb3

Desktop:


iPad:


Many thanks as always!

There are few issues here.
First of all, use this CSS.

Code:

.floating_foot_list {
    float: left;
    width: 25%;
    min-width: 320px;
}

Whenever you add a min-width, use

Code: px

values instead of

Code: em

or

Code: %

.
Second problem that I see is that you are using couple of

Code: padding-left

to work as the margin.
Replace all padding-left with margin-left with

Code: %

values, for example, replace this chunk:

Code:

.foot_list_title {
    display: block;
    color: #ffffff;
    padding-left: 137px;
    text-align: left;
    padding-top: 30px;
    font-size: 17px;
}

with

Code:

.foot_list_title {
    display: block;
    color: #ffffff;
    margin-left: 25%;
    text-align: left;
    padding-top: 30px;
    font-size: 17px;
}

And similarly,

Code:

li.foot_wid_li {
    color: #393939;
    line-height: 28px;
    text-align: left;
    padding-left: 104px;
}

with

Code:

li.foot_wid_li {
    color: #393939;
    line-height: 28px;
    text-align: left;
    margin-left: 18%;
}

Also a general practice should be to include the css in stylesheet for easier editing

This should fix your problems, and if it doesn't just post. Good luck!

Hey Rhino.

After implementing your code, the footer is a lot neater on the iPad and phone. That is to say, the text in each column doesn't wrap. Thanks!

The original problem remains, however. On the desktop, the footer fills the full width of the screen.
iPad and phone do not. It's the same as it was previously: about 80% of the way there.

Any ideas on that?

Full CSS is here...

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; }
@media only screen and (min-device-width : 120%) and (max-device-width : 120%) {
  #wrap { width:120% !important }
}

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





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


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


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

Okay there's one way to fix that, and that is to cut off your

Code: page-footer

from the

Code: body

.
Place all the footer content outside

Code: </body>

.

The reason is see why it is like that is because you have widgets on the right which reduce the width of body itself. Not sure why it doesn't affect on PC.
Either ways make sure to keep template backups also.

Rhino.Freak wrote:Okay there's one way to fix that, and that is to cut off your

Code: page-footer

from the

Code: body

.
Place all the footer content outside

Code: </body>

.

Sorry to be a pain. Walk me through that?

Rhino.Freak wrote:The reason is see why it is like that is because you have widgets on the right which reduce the width of body itself. Not sure why it doesn't affect on PC.
Either ways make sure to keep template backups also.

I did notice that but, as it wasn't affecting the desktop version I figured it could be fixed. The previous footer (the basic formation version) stretched the full width. And the top menu bar also stretches the full width on all devices. Not sure if that helps you.

Find

Code: <div id="page-footer">

And cut all its contents including this div.
Now go to

Code: overall_footer_end

and find

Code: </body>

And paste the whole

Code: div

there and check if it works.

Ok. Did that. It didn't fix the width issue but it moved the footer BELOW the formotion info (Make a Forum, Free Forum Support, Admin Panel, etc).

I think (THINK!) I can see what you've tried here; taking the footer outside of the boundaries set by the body (??)
But it's not had an effect on the iPad/phone.

Out of interest, how do I keep the template backups?

Well backups are all manual, basically just copy stuff to a notepad file and keep it safe in your pc (or use http://pastebin.com) so that in case things go wrong you can revert back to previous state.
Well I see it had no effect and yes I tried to that only. Hmm.
I'll try again later to solve this issue, please be a bit patient.

Of course. Thank you.

Update:

I removed the side widgets to see if they were stopping the footer from going full-width and...they're not.
Even when the widgets were removed, the footer is still at around 80% width. So I don't believe it's the side-widgets that are causing the problem.

Update 2:
I've had a look in developer tools under iPad and found these 3 lines in overall_header:

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">

Maybe a coincidence but as you can see from the screenshot, the width is exactly that of the truncated footer.
I deleted that entire div and it got rid of the header but it fixed the footer problem.
Maybe if we restrict the height of that div it will stop the footer being truncated (??). I'm guessing now.

There must be something that I missed. I'll check out your css again when I get the chance.

Thank you!

I found a temporary solution with this:

Code:

body {
    min-width: 1200px;
}

But I don't see the cause of the shrinking size... Let's ask @Ange Tuteur

Brilliant! That's fixed it.

Thanks, Rhino.

One last thing (and I'm sure this is a quick fix - if not, forget it), the new footer has pushed the forumotion links right to the very edge so that the last link (either REPORT AN ABUSE or MOBILE VERSION) is almost cut off. How would I shift that back to the centre by 10px or so?

Again, thank you for your efforts, patience and perseverance!

Troy.

That's the

Code: div

below

Code: <div class="index_foot_wid">

with an inline style.
I recommend to remove the inline style from there, give it a class and just change the

Code: text-align: right;

to

Code: text-align: center;

.

Cheers!