Problem with padding or margin % when refreshing

I want to have 3 icons as hyperlinks to adress the 3 most important module for my website. Everything else i put into the service menu.

 

Right now i use the following code

 

<td class="sys_logo_wrapper">

               <div class="sys_logo_wrapper_cnt bx-def-padding-sec-leftright"><a href="https://inspireants.com/"><img style="height: 44px" src="https://inspireants.com//templates/tmpl_snowball/images/greeny2020.png"></div></td>

<td style="padding-right: 20px; font-size: 22px"><a href="https://inspireants.com/m/articles/home/"><i class="sys-icon newspaper"></i></td>

<td style="padding-right: 20px; font-size: 22px"><a href="https://inspireants.com/m/collab/home/"><i class="sys-icon users"></i></td>

<td style="padding-right: 30%; font-size: 22px"><a href="https://inspireants.com/m/instructables/home/"><i class="sys-icon tasks"></i></td>

<td style="padding-right: 30px" class="sys_search_wrapper">__main_search__</td>

               <td class="sys_menu_wrapper">__service_menu__</td>

 

 

The problem occurs when i use the 30% for the third icon (link) 

 

When i refresh the page with only  F5 or when i enter the site newly. Then the icons are shown as in image B.

 

When i press ALT + F5 then the icons are shown as in image A, which is what i want.

 

But why this strange behaviour? Has anyone an idea? Why does this one % usage, cause this trouble`?

 

I suppose the best way would be to create some css and use different setups for PC and mobile.

 

What could  i do to have the 2. icon in the middle of the screen (every device) and icon 1 on the left and icon 3 on the right?

007 icons A.PNG · 47.7K · 12 views
007 icons B.PNG · 41.2K · 8 views
Quote · 2 Jun 2020

Maybe the code in general.css

width=100%

has something to do with it. It pushes the the other UI elements to the right side of the possible width.

007 icons C.PNG · 34.1K · 10 views
Quote · 2 Jun 2020

Hello mrtn!

 

You may check this behavior in other browsers. Be sure that cleared all caches via  Admin panel->Tools->Cache area.

Quote · 5 Jun 2020

In Firefox the icons are always pushed to the right side. In chrome only when clicked F5. When using ALT + F5 they are shown in the middle, but at the right side when clicking any other icon or link.

 

I had swapped position of Logo and search. And then i added the icons (links) between Logo and search.

 

I suppose that the sys logo wrapper and the width:100 % is responsible for that.

 

td.sys_logo_wrapper {
  1. position: relative;
  2. width: 100%;
  3. text-align: left;

 

Is it correct that this value is in the database? Or where can i change or delete this width?

 

OR?

 

I suppose that i can make a change in the sub_header.html file to create a different table.

 

 

009 logo wrapper.PNG · 1.1M · 8 views
Quote · 8 Jun 2020

I have now a solution. I changed the TABLE and deleted some CLASSES.

 

Is there any reason classes should not be deleted?

 

For the TABLE i use

 

<table style="margin-left: auto; margin-right: auto;width:100%">

               <tr>

               

               <td style="padding-top: 4px; height: 36px;"><a href="https://inspireants.com/"><img src="https://inspireants.com/templates/tmpl_snowball/images/logo_inspireants.png" width="36" /></td>

<td style="font-size: 26px;text-align: center; width: 16%;"><a href="https://inspireants.com/m/articles/home/"><i class="sys-icon newspaper"></i></td>

<td style="font-size: 26px;text-align: center; width: 16%;"><a href="https://inspireants.com/m/collab/home/"><i class="sys-icon users"></i></td>

<td style="font-size: 26px;text-align: center; width: 16%;"><a href="https://inspireants.com/m/instructables/home/"><i class="sys-icon tasks"></i></td>

<td class="sys_search_wrapper" style="text-align: right; width: 16%;">__main_search__</td>

               <td style="text-align: right; width: 16%;">__service_menu__</td>

   </tr>

   </table>

 

 

 

010 menu.PNG · 29.7K · 6 views
Quote · 8 Jun 2020

Hello mrtn!

 

It may be corrected in the templates\tmpl_evo\css\general.css file. Don't forget to clear caches after changes in the admin panel->tools->cache page.

Quote · 8 Jun 2020
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.