Return to previous page

Help, Is there any way to leave this part of the page for mobile

This topic has 10 replies, 3 voices, and was last updated 5 years, 6 months ago ago by Rose Tyler

Rikinte

Participant

June 12, 2019 at 15:51

Hi

Is there any way to leave this part of the page for mobile, it stays inside the page my account
https://imgur.com/HsrDV6S

When it is placed on a small screen it has this bar to pull to, I want it to be adjusted in mobile
Photo: https://imgur.com/aNsqMfP

Please, contact administrator
for this information.

#215492 Copied Theme version: Version 5.3.1

9 Answers
Olga Barlow

Support staff

June 12, 2019 at 16:41
Hello,

You can decrease the font-size of the table to show all the information, for example
```
@media only screen and (max-width: 560px){
    table.woocommerce-orders-table  thead th {
        font-size: 0.8rem;
    }
    .my_account_orders td, .my_account_orders .view {
    font-size: 0.7rem;
    }
}
```
#215497 Copied
Rikinte

Participant

June 12, 2019 at 23:46

Hello,

But I do not want to reduce the font size because it gets too small to see on the phone,

I wanted to decrease the size of the table so that it would get an option below, and I could not get this line break as it is in the image: https://imgur.com/FaIBnb1

Would not you have a code for that?

#215507 Copied
Olga Barlow

Support staff

June 13, 2019 at 11:04
Hello,

It’s not possible to change the structure of the table using CSS styles and to show the button below the information. If you want to change the structure of the table for mobile and tablet devices it’s possible only by additional PHP customization. Submit a request here
to get help with this.

We can help you only with minor CSS customization and decrease font-size a little bit, it’s still visible but allows you to avoid 2 lines for that button
```
@media only screen and (max-width:560px){
    .my_account_orders td {
        font-size: .77rem;
    }

    .my_account_orders td .button {
        font-size: .77rem;
        padding: 0;
        height: auto;
        border: none;
        background:transparent;
    }
}
```
Regards
#215537 Copied
Rikinte

Participant

June 13, 2019 at 15:25

Thank you very much, very perfect with this new code.

Now, a single question has like, it increases in the code so that, when clicking the button see more, it gets the black letters, because when clicking it gets white…
Photo: https://imgur.com/YN72kaD

#215565 Copied
Olga Barlow

Support staff

June 13, 2019 at 15:29
Hello,

Replace the previous code by the following
```
@media only screen and (max-width:560px){
    .my_account_orders td {
        font-size: .77rem;
    }

    .my_account_orders td .button {
        font-size: .77rem;
        padding: 0;
        height: auto;
        border: none;
        background:transparent;
    }
    .my_account_orders td .button:hover{
        color:#c62929;
        text-decoration: underline;  
    }
}
```
Regards
#215567 Copied
Rikinte

Participant

June 13, 2019 at 18:45

Thank you very much, same thank you

Just another question please could you help me, there is a css code to put a marscara on that date for my country that for example is so 07/06/2019 and not 2019/06/07
Photo: https://imgur.com/Eyff8yt

#215592 Copied

Rose Tyler

Support staff

June 14, 2019 at 07:51

Hello,

You’re welcome!
Unfortunately, this can’t be changed to the desired view using CSS code only https://prnt.sc/o1oq8p
As I can see, you are using an additional plugin to show that information, so contact the plugin support to get help with this. Maybe they will point you to the right settings or provide help with additional customization.

Regards

#215602 Copied

Rikinte

Participant

June 14, 2019 at 13:53

All right, thank you one more time …

#215640 Copied

Rose Tyler

Support staff

June 14, 2019 at 13:58

You’re welcome!
Have a nice day.

Regards

#215641 Copied
Viewing 10 results - 1 through 10 (of 10 total)