This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

AKITA not properly RESPONSIVE, tablet or smartphone

  • Creator
    Topic
  • March 12, 2016 at 6:45 am #25316
    missalice
    Participant

    Hello Jason,

    Here is the website
    http://www.baliberty.com

    HERE is my configuration
    WP v. 4.4.2
    Akita v. 2.1.9.2 with a Child Theme

    PLUGINS installed and ACTIVED, all already updated :
    – Askimet v. 3.1.8
    – All in one Favicon v. 4.3
    – Contact Form 7 v. 3.4.2
    – Dynamic To Top v. 3.4.2
    – EWWW Image Optimizer v. 2.5.9
    – Regenerate Thumbnails 2.2.6
    – Simple Analytics 1.0.3
    – Theme Blvd Layout Builder
    – Theme Blvd Layout Builder V. 2.0.9.5
    – Theme Blvd News Scroller Widget Version 1.0.9
    – Theme Blvd Shortcodes Version 1.5.9.1
    – Theme Blvd Sliders Version 1.2.4
    – Theme Blvd String Swap Version 1.0.8
    – Theme Blvd Widget Areas Version 1.2.4
    – Theme Blvd Widget Pack Version 1.0.5
    – Theme Blvd WPML Bridge Version 2.0.1
    – Widget Logic Version 0.57
    – WordPress Database Backup Version 2.3.1
    – WP Editor Version 1.2.5.3
    – WP Minify Version 1.2.0
    – WPML Media Version 2.1.19
    – WPML Multilingual CMS
    – WPML Multilingual CMS Version 3.3.6
    – WPML Sticky Links Version 1.3.17
    – WPML String Translation Version 2.3.6.1
    – Yoast SEO Version 3.1.1

    3 PLUGINS INSTALLED BUT NOT ACTIVATED, yet, because of potential issues :
    – WPML Translation Management Version 2.1.5
    – Xoogu Currency Conversion Version 2016-02-18
    – WP Super Cache Version 1.4.8

    The following issues are quite similar either on Firefox/Chrome/Safari…

    ISSUE n° 1 on ALL THE PAGES
    When the web site is opened on tablets or smartphones,
    the web site is not FULLY RESPONSIVE.
    Indeed, there is a blank marge on the right side of the screen page. It makes the website look smaller than it could, should be…
    http://postimg.org/image/b8mmt3795/d1d68580/
    http://postimg.org/image/i4oerp8jr/7a81a26b/

    Any suggestion ?

    ISSUE N°2 on the HOME PAGE/ RIGHT
    the Facebook widget on the right side goes over the screen page, toward the right

    ISSUE n° 3 on the HOME PAGE / BOTTOM
    The facebook window in the footer goes over the screen page, toward the right also…
    http://postimg.org/image/luiml4iod/fcec7b61/
    [url=http://postimg.org/image/luiml4iod/][img]http://s14.postimg.org/luiml4iod/Bottom.jpg[/img][/url]

    ISSUE n° 4 on all pages with PRICE TABLE
    On smart-phone on tablet, the price table goes over in the blanck ride side…
    as if it was a static-blocked element ?
    http://www.baliberty.com/en/level-1-padi-open-water/
    or
    http://www.baliberty.com/en/padi-rescue-diver-efr/
    This last page is actually being tested for a “ $/€ Switcher Button”

    but the issue is the same so it is not because of this switcher button.
    Maybe because of the photo popup gallery ?
    [url=http://postimg.org/image/40hspkilx/][img]http://s10.postimg.org/40hspkilx/Price_Table_1.jpg[/img][/url]
    [url=http://postimg.org/image/gfrl9zsol/][img]http://s18.postimg.org/gfrl9zsol/Price_Table_2.jpg[/img][/url]

    Any idea Jason ?
    Thanks a lot for your help

  • Creator
    Topic
Viewing 13 replies - 1 through 13 (of 13 total)
  • Author
    Replies
  • March 12, 2016 at 6:49 am #25317
    missalice
    Participant

    Pictures of the pages with the Table prices

    http://s10.postimg.org/wddag14c9/Price_Table_1.png
    http://s18.postimg.org/twojsv309/Price_Table_2.png

    Thanks
    Miss ALice

    March 12, 2016 at 10:34 pm #25318
    Jason Bobich
    Keymaster

    Hi,

    Issues 1, 2, & 3: These are all because of how you’re putting in this 3rd-party Facebook code. You need to somehow implement it in a way where it will be responsive. I would go back to Facebook or wherever you’re copying the code from, and look more into setting up a code block that will be responsive.

    https://developers.facebook.com/docs/plugins/page-plugin

    Issue 4: I believe we talked about this before in the past, and nothing has changed. If you want tables to be responsive you need to wrap them in <div class="table-responsive">, as instructed in the Bootstrap documentation. 

    <div class="table-responsive">
	<table class="table table-striped table-condensed table-bordered">
		...
	</table>
</div>

    Reference: http://getbootstrap.com/css/#tables-responsive

    • This reply was modified 7 years ago by Jason Bobich. Reason: Add info about responsive tables
    March 16, 2016 at 5:25 am #25327
    missalice
    Participant

    Dear God Jason,
    Once again, THANK YOU so much.
    Issue 1-2-3 Facebook box are SOLVED.
    Issue 4 : I made all the class “table-responsive”
    However, and the issue is same on FF, Safari or Chrome,
    The 3 cells including the LightboxGallery: the thumbails aren’t adjusted in the cell.
    There is too much blank space.
    And it is because of the penultimate line, (only text inside, “chambre double climatisée…) :
    [url=http://postimg.org/image/qrdd3qa4j/][img]http://s13.postimg.org/qrdd3qa4j/Capture_d_e_cran_2016_03_16_a_13_14_15.jpg[/img][/url]
    These 3 texts refuse to return on line and keep on only 1 line.
    That is why the cell includes lightbox are so long to the right side.
    Could you please, help me again ?

    Thanks

    March 16, 2016 at 5:11 pm #25330
    Jason Bobich
    Keymaster

    You do not add the class to the table itself, you need to wrap the table in a DIV with class “table-responsive”. Please pay close attention to the following example:

    <div class="table-responsive">
	<table class="table table-striped table-condensed table-bordered">
		...
	</table>
</div>
    March 18, 2016 at 11:11 am #25336
    missalice
    Participant

    Thank you Jason for your answer.
    I’M SORRY: I don’t understand it because my code HAS ALREADY got this DIV with class “table-responsive”.
    http://www.baliberty.com/padi-efr-rescue-plongeur-secouriste/

    http://pastie.org/10765027

    Sorry, but the pastie.org seems not to be working.

    SO HERE IS THE FULL CODE :

    <div class="table-responsive">
<table class="table table-striped table-condensed table-bordered "><colgroup> <col style="width: 25%;"/> <col style="width: 25%;"/> <col style="width: 25%;"/> <col style="width: 25%;"/></colgroup>
<tbody>
<tr>
<td style="color: #2c9691;" colspan="4">Prix** par élève payable au départ, en roupies indonésiennes (rp)  /  Groupe de 2 à 4 élèves </td>
</tr>
<tr>
<td>FORMATION SEULE
<p style="font-size: 87%;">Formation + déjeuners</p>
</td>
<td>STANDARD
<p style="font-size: 87%;">Formation + déjeuners + 2 nuits</p>
[raw]
[lightbox_gallery][lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6-240x150.jpg" title="Standard Bungalow" frame="true" align="left" icon="image"]
<div style="display: none;">[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" class="img-responsive"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" class="img-responsive"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" class="img-responsive"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" class="img-responsive"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" class="img-responsive"]</div>
[/lightbox_gallery][/raw]</td>
<td style="text-align: left;">SUPERIOR
<p style="font-size: 87%;">Formation + déjeuners + 2 nuits</p>
[raw][lightbox_gallery][lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-18.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-18-240x150.jpg" title="Superior Room" frame="true" align="left" icon="image"]
<div style="display: none;">[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-4.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-4-240x150.jpg" title="Superior Room" frame="true" icon="image"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-221.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-151-240x150.jpg" title="Superior Room" frame="true" icon="image"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-7.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-17-240x150.jpg" title="Superior Room" frame="true" icon="image"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-6.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-12-240x150.jpg" title="Superior Room" frame="true" icon="image"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-5.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/superior-room-tulamben-14-240x150.jpg" title="Superior Room" frame="true" icon="image"]</div>
[/lightbox_gallery][/raw]</td>
<td>DELUXE
<p style="font-size: 87%;">Formation + déjeuners + 2 nuits</p>
[raw][lightbox_gallery][lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-25.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-25-240x150.jpg" title="Deluxe Cottage" frame="true" align="left"]
<div style="display: none;">[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-91.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-91-240x150.jpg" title="Deluxe Cottage" frame="true"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-28.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-28-240x150.jpg" title="Deluxe Cottage" frame="true"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-71.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-17-240x150.jpg"
title="Deluxe Cottage" frame="true"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-1.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-1-240x150.jpg"
title="Deluxe Cottage" frame="true"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-8.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-8-240x150.jpg"
title="Deluxe Cottage" frame="true"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-4.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-4-240x150.jpg"
title="Deluxe Cottage" frame="true"]
[lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-221.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/deluxe-cottage-tulamben-221-240x150.jpg"
title="Deluxe Cottage" frame="true"]</div>
[/lightbox_gallery][/raw]</td>
</tr>
<tr>
<td class="price">5000000</td>
<td class="price">5500000</td>
<td class="price">6000000</td>
<td class="price">7000000</td>
</tr>
<tr>
<td></td>
<td><p style="font-size:85%; text-align:left;">Chambre double climatisée, douche eau chaude, petit-déjeuners</p></td>
<td style="font-size:85%; text-align:left;">Chambre double supérieure climatisée, salle de bains, balcon vue mer, volcan. Piscine à débordement dans jardin tropical, petit-déjeuners.</td>
<td style="font-size:85%; text-align:left;">Chambre double spacieuse climatisée, salle de bains, cocktail d'accueil, mini-bar, TV, Wifi, terrasse sur jardin tropical; piscine à débordement, petit-déjeuners.</td>
</tr>
<tr>
<td style="font-size: 90%;" colspan="4">Exclus de toute formule : thé &amp; café hors petit-déjeuner, dîner, mini-bar, boissons alcoolisées, massage, guide snorkelling, tout extra du menu Baliberty.</td>
</tr>
</tbody>
</table>
</div>

    THAT IS WHY, I DO THINK THAT THE PROBLEM COMES FROM THE
    penultimate line, (only text inside, “chambre double climatisée…) :
    [url=http://postimg.org/image/qrdd3qa4j/][img]http://s13.postimg.org/qrdd3qa4j/Capture_d_e_cran_2016_03_16_a_13_14_15.jpg[/img][/url]
    These 3 texts refuse to return on line and keep on only 1 line.
    That is why the cell includes lightbox are so long to the right side.

    THANKS FOR YOUR HELP,
    Alice

    March 18, 2016 at 4:58 pm #25338
    Jason Bobich
    Keymaster

    When I originally looked at your site I saw places where you added the class directly to the table.

    Now it’s all setup properly when I look at the page you just linked to. This is all the table-responsive class does, that being it allows the table to be horizontally scrolled so it doesn’t break the layout. Now, if you think cells have too much space or are too wide, you can play with table and cell width as you normally would.

    March 19, 2016 at 10:09 am #25341
    missalice
    Participant

    OK, Now everything is ok and the layout is not break. Cells and table have no special width.

    BUT on SMARTPHONE, can you explain me WHY
    the text in the penultimate line (“chambre double climatisée…” in the 3 cells) is not abble
    to wrap or to return to the line.
    As if it was text with a ” white-space:nowrap;” ?
    ????
    Where does this “no-wrapping text issu” come from ?
    Thanks

    March 20, 2016 at 12:31 am #25347
    Jason Bobich
    Keymaster

    The table has no bounds now because it has not width. What would force the text to wrap to the next line? So, now that your table will scroll horizontally, try giving your table a total width in pixels, and then giving your inner cells percentage widths.

    March 20, 2016 at 9:15 am #25362
    missalice
    Participant

    HI Jason,
    Sorry, i’m not satistfied with the scrolling table option, which is not very easy to see on smartphone.
    I do prefer the classic way, with all the columns visible in 1 time on the screen.
    like here, check the UK version (http://www.baliberty.com/en/padi-rescue-diver-efr/)

    [url=http://postimg.org/image/jb6z5vek5/][img]http://s18.postimg.org/jb6z5vek5/Capture_d_e_cran_2016_03_20_a_17_08_30.jpg[/img][/url]

    I made few corrections in the code that make the table now almost perfect.
    But, it still goes a bit over the right side.
    So, can you help me to fix this issue ?

    Thanks a lot

    March 20, 2016 at 4:33 pm #25363
    Jason Bobich
    Keymaster

    Looks fine to me. I’m not sure what else you’re going to do.

    March 21, 2016 at 6:07 am #25366
    missalice
    Participant

    Hi,
    Could you please watch my website with a small smartphone,
    like iphone 5 or
    samsung galaxy S2 – S3 or S4 ?
    Many of my customers come from Asia where there are a lot of these “SMALL” Smarthone.
    Thanks

    March 21, 2016 at 9:01 pm #25369
    Jason Bobich
    Keymaster

    If it were me, I’d just come up with a different way to display the data on mobile devices, as a table scrunched down that small isn’t going to look good, no matter what you do. That’s why people have come up with the lateral scrolling solution for tables, because there’s really isn’t any other good solution.

    http://getbootstrap.com/css/#responsive-utilities

    <div class="hidden-xs hidden-sm">
   Display for desktops
</div>
<div class="hidden-md hidden-lg">
   Display for mobile
</div>

    But in terms of a responsive way to display tables, I’ve given you the only solution the theme offers, utilizing the frontend frameork, Twitter Bootstrap. This is all going to be a customization you’ll need to make.

    March 27, 2016 at 1:27 pm #25410
    missalice
    Participant

    Dear Jason,
    Thank you again for your patience and your help. You are right, I should find another way to display these data.
    However, before find out the perfect graphic solution, I’ve just changed the size of the text in the table, from 13px to 12px and finally, it seems to help a lot.
    Thanks a lot, lot, lot,
    Alice

  • Author
    Replies
Viewing 13 replies - 1 through 13 (of 13 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.