Post by SherryM » Sun Aug 26, 2018 8:58 am

Hi
Can you tell me how to fix this Clickable elements too close together. It is saying 5 pages are Affected and when I check them in the google mobile friendly url testing tool they pass with out any issues.
Google webmaster tools is telling me this for mobile friendly and also this Content wider than screen Affected pages is 1 and when I test that one it says it pass. There must be a reason for this here are the pages for the clickable elements to close https://www.iowagoatmilksoap.com/
https://www.iowagoatmilksoap.com/Hosting
https://www.iowagoatmilksoap.com/delivery
https://www.iowagoatmilksoap.com/Shippi ... urn-Policy
https://www.iowagoatmilksoap.com/about_us

And for the pages that is too wide is my homepage https://www.iowagoatmilksoap.com/

Is there some kind of code I need to add and if so where. Thanks

Newbie

Posts

Joined
Thu Apr 19, 2018 3:26 am

Post by IP_CAM » Mon Aug 27, 2018 11:04 am

That's to be found here:
catalog\view\theme\default\template\common\header. twig

Code: Select all

<li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
        <li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            {% if logged %}
            <li><a href="{{ account }}">{{ text_account }}</a></li>
            <li><a href="{{ order }}">{{ text_order }}</a></li>
            <li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
            <li><a href="{{ download }}">{{ text_download }}</a></li>
            <li><a href="{{ logout }}">{{ text_logout }}</a></li>
            {% else %}
            <li><a href="{{ register }}">{{ text_register }}</a></li>
            <li><a href="{{ login }}">{{ text_login }}</a></li>
            {% endif %}
          </ul>
        </li>
catalog\view\theme\default\template\common\header. tpl

Code: Select all

<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
        <li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <?php if ($logged) { ?>
            <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
            <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
            <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
            <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
            <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
            <?php } else { ?>
            <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
            <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
            <?php } ?>
          </ul>
        </li>
---
Image
---

Attachments

mobile_unfriendly_urls.jpg

Mobile Unfriendly URL's - mobile_unfriendly_urls.jpg (69.91 KiB) Viewed 3286 times


For Sale: Top URL's, including OpenCart V-Pro installed, like seen here:
http://www.bigmax.ch - http://www.ipcam.li - http://www.opencart.li
For Information + URL's offered, please contact me at: jti@jacob.ch
I am NOT available for Custom Support in existing OC Installations!
My Github Repositories: https://github.com/IP-CAM
Image


User avatar
Guru Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by SherryM » Tue Aug 28, 2018 5:48 am

Hi
Thank you so much so I just check the pages you posted and is there something I'm looking for to change in my cpanel in those 2 pages?

Newbie

Posts

Joined
Thu Apr 19, 2018 3:26 am

Post by IP_CAM » Tue Aug 28, 2018 8:06 am

There is only one file involved, either a header.tpl, or then a header.twig, :D
depending of the OC Version used. Wich you did not mention, so, I placed
both Code Sections, in the hope, that you'll find out about, wich seems not
to be the case. :choke: But this makes me fear, that you will end up in tears,
if you try to change existing things, without learning first, what all that means.
---
It's a regular HTML <li> .... </li> LISTING Section, more or less, shown in the
Code above, and in order to add some space in between the individual </li> <li ...>
Sections, one could try to add one or two invisible 'space|s' between the different Links,
by adding one or more &nbsp; , to make it look like </li>&nbsp;&nbsp; <li...>
---
Good Luck, and from next time on, always inform about OC Version and Theme used,
it's the only way, to get anywhere around here, and the Helpers usually don't ask twice...
Good Luck! ;)
Ernie
---
Image explanation on header.tpl file:
download/file.php?mode=view&id=35452
---

Attachments

add_space_to_topheader_links.jpg

add_space_to_topheader_links.jpg (240.75 KiB) Viewed 3202 times


For Sale: Top URL's, including OpenCart V-Pro installed, like seen here:
http://www.bigmax.ch - http://www.ipcam.li - http://www.opencart.li
For Information + URL's offered, please contact me at: jti@jacob.ch
I am NOT available for Custom Support in existing OC Installations!
My Github Repositories: https://github.com/IP-CAM
Image


User avatar
Guru Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by SherryM » Tue Aug 28, 2018 9:27 pm

Hi
Thank you so much sorry about that I'm using 3.0.2.0 open cart. I will see what I can do and yeah I would be going crazy that is for sure. Thank you again

Newbie

Posts

Joined
Thu Apr 19, 2018 3:26 am

Post by SherryM » Tue Aug 28, 2018 9:41 pm

Hi
Sorry to be a pain This is what the code looks like and not sure where to add the space I got this from the header.twig

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ title }}</title>
<meta name=>
<base href="{{ base }}" />
{% if description %}
<meta name="description" content="{{ description }}" />
{% endif %}
{% if keywords %}
<meta name="keywords" content="{{ keywords }}" />
{% endif %}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
{% for style in styles %}
<link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
{% endfor %}
{% for script in scripts %}
<script src="{{ script }}" type="text/javascript"></script>
{% endfor %}
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
{% for link in links %}
<link href="{{ link.href }}" rel="{{ link.rel }}" />
{% endfor %}
{% for analytic in analytics %}
{{ analytic }}
{% endfor %}
</head>
<body>
<nav id="top">
<div class="container">{{ currency }}
{{ language }}
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>
<li class="dropdown"><a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_account }}</span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
{% if logged %}
<li><a href="{{ account }}">{{ text_account }}</a></li>
<li><a href="{{ order }}">{{ text_order }}</a></li>
<li><a href="{{ transaction }}">{{ text_transaction }}</a></li>
<li><a href="{{ download }}">{{ text_download }}</a></li>
<li><a href="{{ logout }}">{{ text_logout }}</a></li>
{% else %}
<li><a href="{{ register }}">{{ text_register }}</a></li>
<li><a href="{{ login }}">{{ text_login }}</a></li>
{% endif %}
</ul>
</li>
<li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
<li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
<li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
<h1><a href="{{ home }}">{{ name }}</a></h1>
{% endif %}</div>
</div>
<div class="col-sm-5">{{ search }}</div>
<div class="col-sm-3">{{ cart }}</div>
</div>
</div>
</header>
{{ menu }}

Newbie

Posts

Joined
Thu Apr 19, 2018 3:26 am

Post by IP_CAM » Wed Aug 29, 2018 9:53 am

Well, I don't use an OC Twig-themed Version, but if you compare the both images I made,
or both pieces of code, shown further above, you will find out, that they look rather similar.
And don't forget to reset your Cache Systems, before taking a look, or it won't show up!
But if it does not work, I could not help any further...
Good Luck! ;)
Ernie
---
Image

Attachments

add_spaces_between_topheader_links.jpg

add_spaces_between_topheader_links.jpg (88.54 KiB) Viewed 2753 times


For Sale: Top URL's, including OpenCart V-Pro installed, like seen here:
http://www.bigmax.ch - http://www.ipcam.li - http://www.opencart.li
For Information + URL's offered, please contact me at: jti@jacob.ch
I am NOT available for Custom Support in existing OC Installations!
My Github Repositories: https://github.com/IP-CAM
Image


User avatar
Guru Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by SherryM » Thu Aug 30, 2018 5:36 am

Hi
Thank you so much that helps 100% gives me idea of where to add the spaces. Thank you again

Newbie

Posts

Joined
Thu Apr 19, 2018 3:26 am

Post by IP_CAM » Thu Aug 30, 2018 11:52 am

Good for you, good Luck ;)
And one reminder, ONLY use a well-done Text Editor, like Notepad ++, to edit Code,
but NEVER use MS WORD or similar WYSIWYG Tools, they might screw up Code Files.
Ernie

For Sale: Top URL's, including OpenCart V-Pro installed, like seen here:
http://www.bigmax.ch - http://www.ipcam.li - http://www.opencart.li
For Information + URL's offered, please contact me at: jti@jacob.ch
I am NOT available for Custom Support in existing OC Installations!
My Github Repositories: https://github.com/IP-CAM
Image


User avatar
Guru Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 4 guests