Return to previous page

Website is not showing mobile view similar to desktop view

This topic has 23 replies, 2 voices, and was last updated 6 months, 1 weeks ago ago by Luca Rossi

Ankit Khandelwal

Participant

May 29, 2024 at 04:06

Website is not showing mobile view similar to desktop view

Please, contact administrator
for this information.

#397034 Copied Theme version: 9.3.10

22 Answers

Luca Rossi

Support staff

May 29, 2024 at 07:35

Hi @Ankit Khandelwal,

1. Please edit your home page header under Header Sticky > switch to Mobile display > turn off Main Header Sticky

https://prnt.sc/g6ISgXFLO88S

2. If you’re using the Header with Customizer, you can’t change the current layout to look the same as dekstop view. We suggest you to switch to the Header with Elementor Builder: https://www.8theme.com/documentation/xstore/xstore-builders/new-xstore-header-builder-with-elementor/

3. You can use Loco Translate plugin to change the Product Category Text: https://wordpress.org/support/topic/change-product-categories-text/#post-14432387

4. We’re not clear on this question. Could you please tell us which contact form plugin you’re using?

Thank you for your cooperation and patience. We look forward to resolving this issue promptly.

Best Regards,
8Theme’s Team

#397065 Copied

Ankit Khandelwal

Participant

May 29, 2024 at 15:19

Please help to get it done as per screenshot attached

Please contact administrator
for this information.

#397178 Copied
Luca Rossi

Support staff

May 30, 2024 at 04:24
Hi @Ankit Khandelwal,

1. Header: Please add the following CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
@media (max-width: 600px){
    .header-main h1 {
        font-size: 40px !important;
    }
}
@media (max-width: 480px){
    .header-main h1 {
        font-size: 36px !important;
    }
}
@media (max-width: 430px){
    .header-main h1 {
        font-size: 32px !important;
    }
}
@media (max-width: 390px){
    .header-main h1 {
        font-size: 26px !important;
    }
}
@media (max-width: 320px){
    .header-main h1 {
        font-size: 22px !important;
    }
}
```
2. Menu: to make the menu items same as desktop, please switch to Header Elementor Builder https://www.8theme.com/documentation/xstore/xstore-builders/new-xstore-header-builder-with-elementor/

3. You can try with Contact Form 7 plugin: https://wordpress.org/plugins/contact-form-7/

Best Regards,
8Theme’s Team
#397223 Copied
Ankit Khandelwal

Participant

June 1, 2024 at 16:11

Still header is not corrected, screenshot enclosed

Please contact administrator
for this information.

#397672 Copied
Luca Rossi

Support staff

June 2, 2024 at 13:36
Hi @Ankit Khandelwal,

We couldn’t find these custom CSS codes on your website. Did you successfully add them?
```
@media (max-width: 600px){
    .header-main h1 {
        font-size: 40px !important;
    }
}
@media (max-width: 480px){
    .header-main h1 {
        font-size: 36px !important;
    }
}
@media (max-width: 430px){
    .header-main h1 {
        font-size: 32px !important;
    }
}
@media (max-width: 390px){
    .header-main h1 {
        font-size: 26px !important;
    }
}
@media (max-width: 320px){
    .header-main h1 {
        font-size: 22px !important;
    }
}
```
Best Regards,
8Theme’s Team
#397774 Copied
Ankit Khandelwal

Participant

June 4, 2024 at 18:39

Please note already added css code as above but no change Header Background.

#398127 Copied

Luca Rossi

Support staff

June 5, 2024 at 08:17

Hi @Ankit Khandelwal,

This is how the header looks like on mobile:

https://prnt.sc/Vzlull1PoUSo

Could you please check again?

Thank you!

#398198 Copied

Ankit Khandelwal

Participant

June 5, 2024 at 13:03

My explanation as below :-
1. On Desktop – Header is White Background & Black text
2. On Mobile – Header is Black Background and & white text – This on as per desktop view

Please contact administrator
for this information.

#398245 Copied

Luca Rossi

Support staff

June 6, 2024 at 05:43

Hi @Ankit Khandelwal,

Could you please check again? We’ve updated the custom CSS a little bit:

https://prnt.sc/1mUivwcv5qrB

Thank you!

#398345 Copied

Ankit Khandelwal

Participant

June 6, 2024 at 12:40

Still the same problem showing in your screenshot, if any further details needed please let me know..

Please contact administrator
for this information.

#398431 Copied
Luca Rossi

Support staff

June 6, 2024 at 12:59
Hi @Ankit Khandelwal,
```
1. Main Header
   (a). Background - White
   (b). Text color - Black

2. Menu should be 
 (a). Background - White
   (b). Text color - Black
```
Can you please confirm that the changes above should be applied to the mobile version?

Thank you!
#398435 Copied
Ankit Khandelwal

Participant

June 6, 2024 at 14:43

These suggested changes for mobile version

#398470 Copied

Luca Rossi

Support staff

June 7, 2024 at 06:23

Dear Mr. Ankit Khandelwal,

We hope this message finds you well. We are pleased to inform you that we have implemented the changes you requested. You can review the updates at the following link: https://prnt.sc/eUyV2g0h3zyl

Could you please take a moment to verify the modifications at your earliest convenience?

Thank you for your attention to this matter.

Best Regards,
The 8Theme Team

#398541 Copied

Ankit Khandelwal

Participant

June 7, 2024 at 09:52

Yes correct header only in website open. Please note that still correction needed as mentioned

Please contact administrator
for this information.

#398589 Copied

Luca Rossi

Support staff

June 7, 2024 at 11:01

Hi @Ankit Khandelwal,

We’ve updated per your requests.

Could you please check again?

Thank you!

#398615 Copied

Ankit Khandelwal

Participant

June 7, 2024 at 15:55

That great background corrected but more correction needed as below :
1. Reduce Menu Length as per text (refer screenshot)
2. No categories to be shown on menu (refer screenshot)
3. Logo Text font “B R D R” is changed when menu open , please rectify

Please contact administrator
for this information.

#398670 Copied
Luca Rossi

Support staff

June 7, 2024 at 16:19
Hi @Ankit Khandelwal,

1. It’s default style of off canvas mobile menu, if you reduce the height, you can’t see the sub-menu items.

2. Please try adding this custom CSS:
```
[data-tab="menu_2"] {
    display: none;
}
```
3. That’s the logo image, you can’t change the font family. To hide it, please add this custom CSS:
```
.et_b_header-logo {
    opacity: 0;
}
```
Hope it helps!
#398676 Copied
Ankit Khandelwal

Participant

June 7, 2024 at 17:02

For Point 1 – Is it is possible that menu height automatically adjust its height height

For Point 3 – This HTML block not any image as a logo. So, please correct the font family

#398685 Copied

Luca Rossi

Support staff

June 8, 2024 at 01:10

Hi @Ankit Khandelwal,

1. It’s not possible right now.

2. Please check our screenshot: https://prnt.sc/xD7xt_UYrNL-

Best Regards,
8Theme’s Team

#398707 Copied

Ankit Khandelwal

Participant

June 8, 2024 at 12:26

Please note that our Logo is displaying through “HTML Block 2” heading. So, you can correct LOGO in header

Please contact administrator
for this information.

#398745 Copied

Luca Rossi

Support staff

June 9, 2024 at 05:41

Hi @Ankit Khandelwal,

1. We’ve replaced the logo image with the HTML block, please check again.

2. We can’t reproduce this issue on our end. Please check on a real device.

Thank you!

Files is visible for topic creator and
support staff only.

#398777 Copied

Luca Rossi

Support staff

June 9, 2024 at 05:42

Another screenshot.

Files is visible for topic creator and
support staff only.

#398778 Copied
Tagged: best selling woocommerce, desktop view problems, mobile view issues, responsive woocommerce themes, website display issues, woocommerce themes
Viewing 23 results - 1 through 23 (of 23 total)