Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Order History display Order History Info not stacking etc.


Recommended Posts

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.

image.png.0d943f01890ffe14a006a4b1b668b8e4.png

image.thumb.png.0995a86de65df19a0c78248994484c05.png

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?

image.thumb.png.b082f547acbfee668e71cf1021448d6d.png

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

Please help only an issue on MOBILE view.

Thank you,

Lorraine

Link to comment
Share on other sites

  • 2 weeks later...

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 ...

Link to comment
Share on other sites

  • 2 weeks later...

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;
}
 

ORDH2024-04-26 154258.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...