Joomla Templates Club 406,261 posts

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#167925

When I visit my site through safari/atomic web on my iphone and switch to Desktop version the right side of my site gets cut off.

Is there a way to fix that? Please help.

---

Attachments:

1. 

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#409293

I looked on my sons android and it looks fine.

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#409297

I have not tested it on the Android. However, the iphone and iPad are cutting off the right side of the site.

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#409299

try adding
body{overflow:scroll;}
to the iphone/template.css file. I’d help more but I don’t have a iphone and right this minute I can no longer get to your site.

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#409311

The website is: http://www.brunchrestaurantcafe.com. I want to thank you for your help. I did what you said and that did not fix it. Please confirm that I added the code correctly in the CSS file. Please forgive me, for I am not an experienced CSS coder. Thank you.

The code you advised is under the comment “iPhone Theme Fix”

<blockquote>
/*
# ————————————————————————
# JA Bistro Template for J17
# ————————————————————————
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
# Author: JoomlArt.com
# Websites: http://www.joomlart.com – http://www.joomlancers.com.
# ————————————————————————
*/

/* COMMON STYLE
——————————————————— */

/* Normal links —*/

/* Headings & Titles —*/

/* Readon links —*/

/* FORM
——————————————————— */

/* Search */
#ja-search #mod-search-searchword {
border: none !important;
background: none !important;
width: 100%;
text-indent: 15px;
}

#ja-search .button_hilite1 {
display: none;
}

/* Login */

/* iPhone Theme fix
———————————————————*/

body{overflow:scroll;}

/* JOOMLA STYLE
——————————————————— */
/* Layout Deco —*/
body.com_content #ja-content-main {
background: #fff;
border: 1px solid rgb(135, 135, 135);
margin: 3px 9px 17px;
padding: 9px;
}
/*Leading*/

/*Articles grids*/

/* Meta —*/

/* Inline images —*/
img {
margin-right: 6px;
}
/* Content Pagination —*/
/* More Links */

/* Pagination */

/* List Filters */
td,th {
padding: 2px 5px;
}
/* Tooltips — */

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-mainbody {
position: static !important;
}

/* HEADER
——————————————————— */

/* Logo Image —*/
h1.logo { height: 34px; width: 200px; }

h1.logo a {
background: url(../../images/logo-iphone.png) no-repeat center;
display: block;
height: 34px;
width: 200px;
}

/* Logo Text —*/

/* FOOTER
——————————————————— */

/* MOdule Style —*/
.ja-content-top .ja-moduletable h3 {
padding-left: 10px;
}

.ja-content-top .ja-moduletable .items-more {
padding-left: 10px;
}

/* K2 —*/
div.subCategoryContainer,
div.itemContainer {
float: none;
width: 100% !important;
padding: 0 0 10px;
}

div.catItemImageBlock a,
div.userItemImageBlock a,
div.genericItemImageBlock a,
div.img-style-wrap a {
background: none !important;
}

div.catItemImageBlock span,
div.userItemImageBlock span,
div.genericItemImageBlock span,
div.img-style-wrap span {
background: none !important;
}

div.catItemView {
padding: 0;
}

span.itemImage img {
width: 90% !important;
}

div.genericItemIntroText {
clear: both;
}

/* Ja Comment —*/

#ja-popup {
top: 0;
}

#jac-wrapper .pagination {
padding: 10px 0 !important;
border: 0;
}

/* login —*/
.login label { display: block; }

#ja-login input.inputbox { border: solid 1px #ddd; width: 50% !important; left: 125px !important;}

#ja-login input#modlgn-remember { width: 12px !important; height: 12px !important; }

/* others —*/
.blog div.leading {
padding-top: 8px !important;
padding-left: 5px !important;
}

h1.contentheading,
h2.contentheading,
.contentheading {
border-bottom: none;
}

.leading .article-tools {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
margin: -9px 0 9px -5px;
}

div.blog .img-style-wrap.style3 { float: none; }

.blog .img-style-wrap.style3.left,
.item-page .img-style-wrap.style3.left {
width: 100%;
}

.blog .img-style-wrap.style3.left img,
.item-page .img-style-wrap.style3.left img {
width: 97%;
margin: 0 auto;
}

#jac-wrapper .comment-ranking {
float: left !important;
clear: both;
}

#jac-wrapper .comment-ranking span {
border-left: none !important;
}

#jac-wrapper .comment-report {
float: left !important;
}

</blockquote>

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#409459

ugh.. nope, I said it wrong 🙁

change


---------------------------------------------------------*/

body{overflow:scroll;}

/* JOOMLA STYLE
--------------------------------------------------------- */
/* Layout Deco ---*/
body.com_content #ja-content-main {
background: #fff;
border: 1px solid rgb(135, 135, 135);
margin: 3px 9px 17px;
padding: 9px;
}

to


---------------------------------------------------------*/

/* JOOMLA STYLE
--------------------------------------------------------- */
/* Layout Deco ---*/
body.com_content #ja-content-main {
background: #fff;
border: 1px solid rgb(135, 135, 135);
margin: 3px 9px 17px;
padding: 9px;
overflow:scroll !important;
}

No, promises, i’m a fledgling when it come to .css

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#409543

Thank you again for your time. That still did not fix the issue.

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#409549

I”ll escalate this and hopefully one of our smarter guys can fix it.

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#409551

Thank you.

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#409934

Can someone please help??

[amarks Friend amarksJoin date: July 2011Posts: 260Downloads:0Uploads:40 Thanks: 138 Thanked: 1 times in 1 posts]

#411906

yea let me know when you find out about this

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#411918

there’s a new version of bistro out.. try that and let us know if its fixed would you please

[Ronnie Baroud Friend Ronnie BaroudJoin date: September 2014Posts: 15Downloads:0Uploads:4 Thanks: 2]

#411922

I downloaded Bistro like 2 days ago. There is a newer one than that?

Here is the fix for it, add this in template.css

[PHP]/* iPhone Layout Fix ñ Top Image is cut off on the right —*/

body#bd #ja-wrapper{
overflow: visible!important;
}

/* iPhone Layout Issue
——————————————————— */
#ja-header > div.main {
background: url(“/templates/ja_bistro/images/header-bg.png”) no-repeat scroll center top transparent;
}
#ja-header{
background: none!important;
}[/PHP]

[0dass0a9d-asd Friend 0dass0a9d-asdJoin date: September 2014Posts: 60Downloads:0Uploads:7 Thanks: 13 Thanked: 2 times in 1 posts]

#412171

The problem is caused because the whole template has a 60px margin on the left site. Use firebug to look at each section to see where you need to change the CSS . I believe this is a bug with the template that they are looking into.

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#412206

if you set the colwidth= statement ( assuming T3v2 ) that should solve that.

[Author]

Posts