Order History display Order History Info not stacking etc.

[herbsandhelpers]

Hello,

I been totally driven mad trying to use the responsive design to try and correct the appearance of the above. I have exhausted it and NOTHING has changed doooohh!

Can someone help? 

Order History: The Reorder and View buttons cover the other details, the details will not display properly in mobile view, desktop view okay.

Order History Info: Remains 1/4-3/4 view no matter what in mobile so it is difficult to see, why does this not stack as above? How to stack?

No matter how many settings I play with it NEVER changes ...

Please help only an issue on MOBILE view.

Thank you,

Lorraine

[herbsandhelpers]

Okay so using an update for account system from the team, the Order History Info is now stacking great in mobile view - SOLVED!

The Order History overlap has improved slightly in mobile but still some overlap. I hope this can be fixed too.

Great so far ...

[herbsandhelpers]

Okay,

So following the instructions I have added the padding see below. So far nothing has changed.

Here is the b.pagination I don't know what to alter? Please guide:

.pagination:after {
  clear: both;
  content:'';
  display:block;
}
.pagination {
  margin-bottom:20px;
}
.pagination .active a,  .pagination .active span {
  font-weight: bold;
  border:1px solid #1a61ad;
}
.pagination .left-area {
  float: left;
}
.pagination .next a,  .pagination .next span {
  font-size:0;
}
.pagination .next-pages {
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination .p-blog-index {
  text-align: right;
}
.pagination .page-number {
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination .paging {
  display:inline-block;
}
.pagination .paging span.prev,  .pagination .paging span.next {
  opacity: 0.3;
}
.pagination .prev a,  .pagination .prev span {
  font-size:0;
}
.pagination .prev-pages {
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination .right-area {
  float: right;
}
.pagination a:hover {
  text-decoration: none;
}
.pagination a,  .pagination span {
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination a.next,  .pagination span.next {
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination a.next:before,  .pagination span.next:before,  .pagination .next a:before,  .pagination .next span:before {
  font-size:20px;
  line-height:26px;
  content:'\f105';
  font-family:FontAwesome;
}
.pagination a.prev,  .pagination span.prev,  .pagination .prev a {
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination a.prev:before,  .pagination span.prev:before,  .pagination .prev a:before,  .pagination .prev span:before {
  font-size:20px;
  line-height:26px;
  content:'\f104';
  font-family:FontAwesome;
}
.pagination span.active {
  background-color: #532a68;
  color: #ffffff;
  font-weight: 700;
  height:30px;
  min-width:30px;
  text-align: center;
  vertical-align: top;
  line-height:30px;
  display:inline-block;
  border:1px solid #e0e0e0;
  padding-right:5px;
  padding-left:5px;
  margin-left:5px;
}
.pagination span:hover {
  text-decoration: none;
}
ul.pagination {
  list-style: none;
  padding:0px 0px;
  margin:0px 0px;
}
ul.pagination li {
  display:inline-block;
}
 

[Hotclutch]

You can try to go to the block or widget that contain the items that do not stack, and adjust the settings there.

[herbsandhelpers]

Thank you,

I did all this to distraction to start with ... NOTHING changed.

The OSC4 team gave me a new account.zip to upload, after this all the stacking is good and normal.

The only problem I'm left with is in mobile size/view in Order History the bottom lines overlap and obscure. It looks unprofessional.

I've been told that the cause is inheriting from an earlier version and the only way to fix it is manually.

I've been able to follow up to step 2, however step 3 involves the pagination and the team wanted to see my b.pagination before suggesting updates.

Thank you,

Lorraine

[pandrei]

3 hours ago, herbsandhelpers said:

The only problem I'm left with is in mobile size/view in Order History the bottom lines overlap and obscure. It looks unprofessional.

I've been told that the cause is inheriting from an earlier version and the only way to fix it is manually.

I've been able to follow up to step 2, however step 3 involves the pagination and the team wanted to see my b.pagination before suggesting updates.

Please attach your current screenshot.

[herbsandhelpers]

Please find how it now appears on my iPhone. Portrait and Lanscape views:

Lorraine 

 

Edited April 27, 2024 by herbsandhelpers
Privacy

[herbsandhelpers]

[herbsandhelpers]

Can someone help please?

Thank you,

Lorraine

[herbsandhelpers]

Can someone advise?

[herbsandhelpers]

Can someone help with this please?

Lorraine

[Hotclutch]

I am on the latest version, and confirm this problem, across all 4 themes.

[Hotclutch]

I have exported the theme from the latest version and imported it to my installation, and the problem is fixed then.

[pandrei]

On 5/28/2024 at 6:50 PM, Hotclutch said:

I am on the latest version, and confirm this problem, across all 4 themes.

It depends on the initial version of osCommerce. Themes are updated partially with system updates.

On 5/28/2024 at 6:30 PM, herbsandhelpers said:

Can someone help with this please?

It is hard to customize the theme without access to the site.

Try to remove all lines into this css class (you can copy/paste all lines to backup text file before removing):

 

[Hotclutch]

22 hours ago, pandrei said:

It depends on the initial version of osCommerce. Themes are updated partially with system updates.

I have checked my updated installation, and the Printshop theme does not reflect changes. I only became aware when I did another clean installation and noticed the changes. May I suggest that the three other themes be added as apps with version numbers. Watch theme is already so, maybe you could add the others, then it would be easier to check for changes.

[herbsandhelpers]

Hi Andrei,

I'm terrified of deleting all the CSS class. What would happen next? What do I do next?

Thanks again,

Lorraine

[Hotclutch]

^^ You could make a fresh test installation with the latest release, and see if your problem still persists there. If its fixed on the new theme, then you could start looking for the updated CSS to apply to your existing theme.

[herbsandhelpers]

Thank you and where is the updated css can someone post it here?

I’ve deleted all themes except the one I’m using in preparation for going live.

This is one issue that’s still not fixed. 
 

Lorraine 

[Hotclutch]

The updated CSS will be in the new theme, if indeed it has been updated. This problem in this thread I saw was fixed for the printshop theme, so I assume it will be for the others too.

In my personal case, I keep a record of changes i make to the theme. So what i did was take the new theme and added my changes to it.

[herbsandhelpers]

Okay,

After a million scary back ups I finally deleted the whole of p.account-index.

What happened? The problem with mobile has been resolved. However I now have two account dashboard blocks is this normal?

 

Edited June 10, 2024 by herbsandhelpers
wrong pic

[Hotclutch]

^^No its not normal, have you checked in the theme editor if there are 2 instances of that block?

[herbsandhelpers]

Finally!

Yes I have deleted the extra dashboard block and am pleased to say that all the account layout issues now seem to be resolved. 
 

Working and displaying as expected with mobile view.

THANK YOU!

Lorraine 

[pandrei]

3 hours ago, herbsandhelpers said:

Finally!

Yes I have deleted the extra dashboard block and am pleased to say that all the account layout issues now seem to be resolved. 
 

Working and displaying as expected with mobile view.

THANK YOU!

Great! You're welcome!