The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

iPad footer width isn't right

2 posters

Go down

iPad footer width isn't right Empty iPad footer width isn't right

Post by troyeccles Fri Jun 03 2016, 15:35

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 footer width isn't right Screen19

iPad:
iPad footer width isn't right Screen18

Many thanks as always! Smile
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 06:30

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 Wink

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

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 07:08

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! Smile

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?
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 07:11

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
**/
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 07:18

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>
.
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 07:31

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
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 07:36

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?
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 07:38

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.


Last edited by troyeccles on Sat Jun 04 2016, 07:42; edited 1 time in total
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 07:41

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.
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 07:47

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.
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 07:51

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

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 08:07

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.
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 08:19

Of course. Thank you.
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 12:09

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.

iPad footer width isn't right Screen20
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 14:13

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

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 14:44

Thank you!
avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 15:16

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 Razz
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by troyeccles Sat Jun 04 2016, 15:45

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.

avatar
troyeccles
Forumember

Posts : 301
Reputation : 5
Language : English

Back to top Go down

iPad footer width isn't right Empty Re: iPad footer width isn't right

Post by Rhino.Freak Sat Jun 04 2016, 15:53

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! Very Happy
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Back to top

- Similar topics

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