Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeForum
Welcome, Guest

Mobile Usability
(1 viewing) (1) Guest
  • Page:
  • 1
  • 2

TOPIC: Mobile Usability

Mobile Usability 4 years, 9 months ago #39225

Hi there, So I created a new module position just under the slider called "Adv". Everything is perfect but when i checked the site's mobile compatibility, I got the error that Text too small to read. I then checked it on my mobile and the front page is not looking great . The writing is meant to be in tables but on a mobile it goes all over the place. Any advice on what i can do to fix this problem?
Last Edit: 4 years, 9 months ago by Lalaland. Reason: fixing mod name.

Re: Mobile Usability 4 years, 9 months ago #39232

Dear Sir

Because the mobile has the screen too small, so you can disable the text on mobile for slider.
I checked your site and could not found the slider at there.
please send us the screenshot to clearer

thanks

Re: Mobile Usability 4 years, 9 months ago #39234

I am not using the slider, i created extra module position under slider and i think its got to do with the data on the home page being in a table. the data is not staying inside the table when viewing on a mobile. I have given link to pic here

Re: Mobile Usability 4 years, 9 months ago #39236

Dear Sir

You should to use the <div> <span> tag instead of table, tr,td.
Our template support the bootstrap. please refer use the Bootstrap Grids here for your content, so it will show beautiful on mobile.
www.w3schools.com/bootstrap/bootstrap_grid_system.asp

thanks

Re: Mobile Usability 4 years, 9 months ago #39237

I have tried but something is not working great.

This is my old code:

<div class="wellcomesj" style="text-align: center;">
<p style="margin-left: 120px; text-align: center;"><span style="color: #333333;"><span style="font-size: 14pt; font-family: arial,helvetica,sans-serif;"><span style="color: #c0c0c0;"><strong>&nbsp;</strong></span></span></span></p>
<table style="height: 394px; border-color: #ffffff; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 301px;"><span style="color: #999999; font-family: arial, helvetica, sans-serif; font-size: 11pt;">Ons verwelkom jonk en oud, enkellopend, getroud, geskei, weduwee, wewenaar, gay, ryk, arm, Afrikaanses, Engelse, skreeuende babas, woelige toddlers, moeilike tieners, twyfelaars, liberales, fundamentaliste, soekers, die wat mooi sing en die wat vals sing, die wat lanklaas in die kerk was en die wat nie hou van kerk nie... en VIR JOU. By ons gemeente is elkeen iemand!</span></td>
<td style="width: 301px;"><a href="index.php/preke-sermons"><img class="effectck-honey" title="Preke::Luister na preke / Listen to sermons." src="images/cross.png" alt="" width="251" height="165" /></a></td>
</tr>
<tr>
<td style="width: 301px;"><a href="index.php/bedieninge"><img class="effectck-honey" title="Bedieninge::Sien ons Bedienings / See our Ministries." src="images/bible.png" alt="" width="251" height="165" /></a></td>
<td style="width: 301px;"><span style="color: #999999; font-family: arial, helvetica, sans-serif; font-size: 11pt;">We welcome young and old, single, married, divorced, widow, widower, gay, rich, poor, Afrikaans, English, crying babies, restless toddlers, difficult teenagers, doubters, liberals, fundamentalists, seekers, those that can sing and those who can't, those that who haven't been to church in a while and those who don't like church... AND YOU. In our congregation everyone is someone!</span></td>
</tr>
</tbody>
</table>
<p style="margin-left: 120px; text-align: center;">&nbsp;</p>
<p style="margin-left: 120px; text-align: center;">&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
</div>


This is my new code: which works if i test it on W3school https://www.w3schools.com/code/tryit.asp?filename=G6A43YMZX44D

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    
  <div class="row">
    <div class="col-sm-6" style="text-align: center; color: #999999; font-family: arial, helvetica, sans-serif; font-size: 11pt;">
      Ons verwelkom jonk en oud, enkellopend, getroud, geskei, weduwee, wewenaar, gay, ryk, arm, Afrikaanses, Engelse, skreeuende babas, woelige toddlers, moeilike tieners, twyfelaars, liberales, fundamentaliste, soekers, die wat mooi sing en die wat vals sing, die wat lanklaas in die kerk was en die wat nie hou van kerk nie... en VIR JOU. By ons gemeente is elkeen iemand!
    </div>
    <div class="col-sm-6" style="width: 301px;">
      <a href="index.php/preke-sermons"><img class="effectck-honey" title="Preke::Luister na preke / Listen to sermons." src="http://www.ngkerktableview.co.za/images/cross.png" alt="" width="251" height="165" /></a>    
    </div>
            <div class="col-sm-6" style="width: 301px;">
      <a href="index.php/bedieninge"><img class="effectck-honey" title="Bedieninge::Sien ons Bedienings / See our Ministries." src="http://www.ngkerktableview.co.za/images/bible.png" alt="" width="251" height="165" /></a>   
    </div>
        <div class="col-sm-6" style="text-align: center; color: #999999; font-family: arial, helvetica, sans-serif; font-size: 11pt;">
      We welcome young and old, single, married, divorced, widow, widower, gay, rich, poor, Afrikaans, English, crying babies, restless toddlers, difficult teenagers, doubters, liberals, fundamentalists, seekers, those that can sing and those who can't, those that who haven't been to church in a while and those who don't like church... AND YOU. In our congregation everyone is someone!    
    </div>

  </div>
</div>
    
</body>
</html>

When i past it into Joomla it looks like this:


And it should look like this:
Last Edit: 4 years, 9 months ago by Lalaland. Reason: fix url

Re: Mobile Usability 4 years, 9 months ago #39245

Does anybody know where I am going wrong here?
  • Page:
  • 1
  • 2
Time to create page: 0.23 seconds

Notification

Please find your issue via Suggested Posts before submitting your question. We have solved the most of issues and maybe your issue was solved before.

Latest My Topics

No posts to display.

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes