Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#197867

Hello,

I have small problem with the layout, I created a table with JCE editor for a restaurant menu.
but I had too play with the table layout so I can get mobile responsive.
But he issue here:
in desktop or bigger screen: the table is very small and not fit the page
in the mobile its out side the screen or the view.

The mobile view:

So is there is any way to create this table to be a mobile friendly and desktop and big screen . please help thanks

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535480

How “wide” are you wanting your menu table to display on desktop view?

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#535483

Hi, just to fill the space at least, I have put a red line boards
so I have some space on the right and left of the page.

Thank you

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#535650

@okkhalid,

Please try to create a new css file called custom.css in this path: /templates/ja_fixel/css and add this css rule:

@media (max-width: 360px) {
.article-content.clearfix td {
padding: 8px 7px;
}
}

And go to backend > change the style of that table:

<table border="0" align="center" style="height: 2332px; width: 351px;">
to:

<table border="0" align="center" style="height: 2332px; width: 100%;">

Hope this helps.

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#536323

Hi, I have did what you have suggested, but the iphone view is still not working good

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#536344

I’m afraid that you must reduce the width of image to have a nice look, pls try to change above css to:


@media (max-width: 360px) {
.article-content.clearfix td {
padding: 8px 0;
}

.article-content.clearfix img {
width: 80px;
}
}


[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#536459

Great that works perfect 100%

[pacochami Friend pacochamiJoin date: November 2011Posts: 8Downloads:110Uploads:0 Thanks: 2]

#539572

Sorry, but i cannot see my site on an iPhone. My safary blows up when visualizing the site

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#539599

You can post your site’s URL here so that I can have a look and give you suggestion.

[Author]

Posts